In CSS, you can encode an image in base64?

I just ran into this while looking at the CSS code:

background-image:url(data:image/png;base64,LKJSDLKJFSLDJFKDJFLJS......)

It looks like the actual image has been encoded, this is a widg开发者_StackOverflow社区et that is on a website so it looks like it is done for effeciency reasons so it doesn't have to make a request to a web server.

Is this cross browser safe? This is news to me!

Yes, you can do this: http://en.wikipedia.org/wiki/Data_URI_scheme

No, you may not want to: http://en.wikipedia.org/wiki/Data_URI_scheme#Disadvantages

It's supported in all major browsers, yes. However, IE7 and less dont support it, and IE8 needs it to be less than 32K (which shouldn't be a problem). IE9 does not have this restriction.

http://en.wikipedia.org/wiki/Data_URI_scheme

Yes, but your URL must be under 32k for IE8.

There are also hacky ways for doing this for IE6/7 using MHTML

See http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/

Turbine (for PHP) will convert images smaller than 25kb to data URIs or MHTML automatically

See http://turbine.peterkroener.de/docs.php#plugins-datauri