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!
Side effects
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 (data:URI or 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.
Naturally we need to degrade gracefully for cases with disabled JavaScript (just load 2 files).
No comments:
Post a Comment