What does data:image/png;base64 mean?

Question

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?

possible duplicate of [Images in CSS or HTML as data/base64](http://stackoverflow.com/questions/5258057/images-in-css-or-html-as-data-base64) — hakre, Jan 23 '14 at 08:55
@hakre Its not a Duplicate ..... i haven't asked whether using Base64 encoding is a good practice? Are there some reasons to avoid this? Are there some major browser that don't have data url support? .....all that i have asked is what it is and the ways to convert an image into Base64 ..... by the way thanks for that link ..... helped me to understand more about base64 encodings — Vicky, Jan 28 '14 at 09:27
hi Vicky, that is available in the specification/request-for-comments documents, you can find an introduction to it via the wikipedia page: http://en.wikipedia.org/wiki/Data_URI_scheme - it lists the specification documents at the bottom. — hakre, Jan 28 '14 at 10:26

score 3 · Answer 1 · edited Nov 20 '13 at 07:46

3

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.

edited Nov 20 '13 at 07:46

Sully

14,672
5
54
79

answered Nov 20 '13 at 06:02

Mr. Alien

153,751
34
298
278

@Mr.Alien Can you please look into my question and help me http://stackoverflow.com/q/24078704/2118383 – Vignesh Kumar A Jun 07 '14 at 04:56

score 2 · Answer 2 · answered Nov 20 '13 at 11:04

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.

score 0 · Answer 3 · answered Nov 20 '13 at 06:02

0

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

answered Nov 20 '13 at 06:02

Barmar

741,623
53
500
612

What does data:image/png;base64 mean?

3 Answers3

Examples

Linked