Inline Images using data URL

Web Performance Optimization Discussions
1

Just learned about this awesome technique : Inline Images with Data URLs - embed graphics inline with data uri scheme - WebSiteOptimization.com

I have few CSS images which use external images which cant be sprited cause they are repeated ones… using inline images within my CSS will reduce number of requests by 3 or 4 (and 6 more as im adding more css images)

Unfortunately IE7 and below doesnt support it. So i plan on serving regular css to ie7 and below and use the css with inline images for other browsers using conditional comments…

Any problems I should take note of in advance before i start?

since only ~27% of my traffic uses internet explorer 7 and below, I should see a vase improvement…

2

FWIW, IE7 and below support MHTML which works a lot like data URI’s (even have some benefits over data URI’s) : MHTML – when you need data: URIs in IE7 and under / Stoyan's phpied.com

3

MHTML looks interesting…

so did i understand this correctly? I gotta implement BOTH mhtml and data uri … ie < 8 will use mhtml and others will use data uri automagically?

4

That’s one way to do it but you’d be sending down twice as much image data (though it should compress well since it’s the same image twice). Another way would be to do it dynamically based on the user agent.

5

just did it using the mhtml method…

interesting… Chrome needs to have the ‘==’ part at the end of the base64 encodings or else it wont work… doesnt ‘==’ mean a newline?

6

here is a quick python script to automagically generate the new css with the assets embedded directly into it…

at the moment only does the data uri method ,… will add mhtml also … requires more work…

usage :-

./css-bundle.py

NOTE: couldnt upload .py file, so its attached as .txt … rename to .py and make it executable…

7

Nice, thanks. I just updated the forums to allow .py attachments as well.