Jpeg images are already fairly compressed. Applying gzip inflate/deflate to them does not gain much whereas gzipping files with a text content type (.css, .js, .html) usually gives pretty good results. This all led me to think, what happens if I take a decent sized jpeg image, convert it to a data:image base64 set and stick it in a dedicated css file. It will then be crunched by apache and much less data should be sent to the client browser.
So much for the theory. Here’s the actual test file.
– testing with image: http://fragged.org/dev/map-shot.jpg –133.6Kb
– dedicated CSS file: http://fragged.org/dev/base64.css –178.1Kb
– GZIP encoding server side enabled.
Resulting size sent to client (YSLOW components test): 59.3Kb! That’s a whopping saving of 74.3Kb – less data is being sent to the browser and most importantly, the jpeg quality remains the unchanged.
Just a thought… I wish IE6 supported base64.