About a year ago I presented an approach to create completely cross browser base64 inline CSS images. After 2 monthes it became DURIS.ru (Data:URI [CSS] Sprites).
What is data:URI images?
data:URI was presented by W3C years ago as an alternative way to include background images. It allows you to include not just a call to external file but the file itself (binary data in base64 format). This significantly reduces the number of HTTP requests but can lead to CSS file size increase (even with gzip enabled).
The worstest thing
data:URI isn't supported by IE7 and below, this restricts it's possible gain for your website. But for these browsers we can use
mhtml approach, which is generally the same.
data:UR + mhtml
With correct server side browser detection (just
MSIE number_of_version in User Agent string) we can separate client side optimization behavior and provide 2 different techniques for our users:
data:URI for all except IE7 and below and
mhtml for IE7 and below. So it's the solution!
There are some minor side effetcs related to IE7@Vista, such as not working
:hover and dissappearance cached
mhtml images. We are working to prevent them but general logic is already integrated into Web Optimizer.
Large CSS file size
Of course the main side effect if large file size of CSS files (with included base64 images). This can be prevented by splitting CSS to 2 files: one with CSS rules and the other with CSS background images (
mhtml). The second file (with inline CSS images) we can load right after page is shown in browser (to reduce delay of styled content show). And overall page load will hte fastest.