WebPagetest Forums
Inline Images using data URL - Printable Version

+- WebPagetest Forums (https://www.webpagetest.org/forums)
+-- Forum: Web Performance (/forumdisplay.php?fid=3)
+--- Forum: Optimization Discussions (/forumdisplay.php?fid=5)
+--- Thread: Inline Images using data URL (/showthread.php?tid=257)



Inline Images using data URL - sajal - 06-18-2010 12:02 AM

Just learned about this awesome technique : http://www.websiteoptimization.com/speed/tweak/inline-images/

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...


RE: Inline Images using data URL - pmeenan - 06-18-2010 01:39 AM

FWIW, IE7 and below support MHTML which works a lot like data URI's (even have some benefits over data URI's) : http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/


RE: Inline Images using data URL - sajal - 06-18-2010 03:20 AM

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?


RE: Inline Images using data URL - pmeenan - 06-18-2010 03:22 AM

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.


RE: Inline Images using data URL - sajal - 06-18-2010 04:17 AM

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?


RE: Inline Images using data URL - sajal - 06-20-2010 12:26 AM

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 <source css file url> <final destination>

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


RE: Inline Images using data URL - pmeenan - 06-20-2010 07:53 AM

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