CODEWITHSUNDEEP
htmlcss
Vicky
Vicky

Reputation: 704

What does data:image/png;base64 mean?

I took an example from an online website and the CSS contained a URL pointing to a png and some random letters in both cases can any one tell me how to make such codes or rather what those codes are about ...

here is the html

<center><input class="textbox"type="text" placeholder="E-mail"></center>

here is the css

.textbox { 
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjYxRDEzQTBCMzI0MzExRTFBNDYzRkQ4Qzc3RDdBOTg5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjYxRDEzQTBDMzI0MzExRTFBNDYzRkQ4Qzc3RDdBOTg5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjFEMTNBMDkzMjQzMTFFMUE0NjNGRDhDNzdEN0E5ODkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjFEMTNBMEEzMjQzMTFFMUE0NjNGRDhDNzdEN0E5ODkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz52VTCHAAABFUlEQVR42uxV0Q2DIBBV4z8bdAM26AZ1Ap3AToAT6AR1Ap2gbuAGzKD/TkCP5NmQRpQaSH96yQsJHO/k7t0ZK6WikJZEgS14gHSeZxX6BQuhwerL3pw6ACMIQkuQHsgluDQnM2ugN3rgrK33ha3INdbqBHn1wWFVUU7ghMKxLgt8Oe46yVQ7lrgoD/JdwDf/tg+ueK4mGDfOR5zV8D3VaBwFy6CM1VrsCfjYG81BclrPHVZp7HcoLN8LshdgNMg50pDh7In+uSCIsKUpnqZJWfQ8EB4gOlLRnXBzVVFvpIA5yJTBV241aeLSLI622aRmiho8k3uYRcM6LlLksEWzMA/DjqP4+oNLW5G9Wfz/J/88wEuAAQA9yExzBAEQqwAAAABJRU5ErkJggg==) no-repeat 245px 0px #FFF; 
height: 20px; 
width: 275px; 
    border: 1px solid #848484; 
    color: black; 
}

I want to know what those letters and numbers mean i.e () or rather what it is and how can I convert my own png to that . Any ideas?

Upvotes: 6

Views: 17434

Answers (3)

unor
unor

Reputation: 96587

It’s a data URI.

While HTTP URIs refer to external resources, data URIs include the resources in-line.

By default data URIs use US-ASCII (+ percent-encoding); you can use base64 encoding with ;base64..

Examples

This data URI is a text document in UTF-8, containing only the word "foobar": 

data:text/plain;charset=utf-8,foobar

This one is a HTML5 document: 

data:text/html;charset=utf-8,%3C%21DOCTYPE%20html%3E%0D%0A%3Chtml%3E%0D%0A%3Chead%3E%3Ctitle%3E%3A-%29%3C%2Ftitle%3E%3C%2Fhead%3E%0D%0A%3Cbody%3E%3A-%29%3C%2Fbody%3E

Encoded with base64, that HTML document would look like:

data:text/html;charset=utf-8;base64,PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCjxoZWFkPjx0aXRsZT46LSk8L3RpdGxlPjwvaGVhZD4NCjxib2R5PjotKTwvYm9keT4=

Simply enter these URIs into the address field of your browser, like you would do with HTTP URIs.

Upvotes: 2

Mr. Alien
Mr. Alien

Reputation: 157334

That is nothing but a Base64 encoded image.

Would like to warn you that Base64 has length limitations

Although Mozilla supports data URIs of essentially unlimited length, browsers are not required to support any particular maximum length of data. For example, the Opera 11 browser limits data URIs to around 65000 characters.

  1. Common problems - MDN
  2. Browser Support
  3. Online Converter

Upvotes: 3

Barmar
Barmar

Reputation: 780974

That's a base64 encoding of a PNG image file.

Upvotes: 0

Related Questions