benchmark for using base64 string instead of image reducing http requests

I am looking at replacing source of my images curre开发者_如何学Pythonntly set to a image file in my css to a base64 string. Instead of the browser needing to make several calls, one for the CSS file and then one for each image, base64 embedding means that all of the images are embedded within the CSS file itself.

So I am currently investigating introducing this. However I have an issue I would like some advice on, a known problem with this approach. That is in my tests a base64 encoded string image is somewhere around 150% the size of a regular image. This means it’s unusable for large images. While I am not too concerned regarding larger images, I am not sure when I should and shouldn't use it.

Is there a benchmark I should use, as in if the base64 more than 150% larger I should not use it etc?

What are others views on this and what from your own experiences may help with the decision of when to and not to use it?

Base64 encoding always uses 4 output bytes for every 3 input bytes. It works by using essentially 6 bits of each output byte, mapped to characters that are safe to use. So you'll always see a consist 133% increase for anything you base64 encode, rounded up for the last chunk of 4 bytes. You can use gzip compression of your responses to gain some of this loss back.

This works in only handful of browsers. I would not recommend it. Especially for mobile browsers.

Images get cached on browser if you configure webserver properly. So, images don't get downloaded over and over again. They come from cache and thus super fast. There are various easy performance configuration you can do on your webserver to make this work over the base64 encoding of images embedded in CSS.

Take a look at this for some easy ways to boost website performance: http://omaralzabir.com/making_best_use_of_cache_for_high_performance_website/

You are hopefully serving your HTML and CSS files gzipped. I tested this on a JPEG photo: I base64 encoded and gzipped it and the result was pretty close to the original image file size. So no difference there.

If you're doing it right, you end up with less requests per page but with approximately the same page size with base64 encoding.

The problem is with caching when you change something. Let's say you have 10 images embedded in a single CSS file. If you make any change to the CSS styles or to any single image, the users need to download that whole CSS file with all the embedded images again. You really need to judge yourself if this works for your site.

Base64 encoding requires very close to 4/3 of the original number of bytes, so a fair amount less than 150%, more like 133%.

I can only suggest that you benchmark this yourself and see whether your particular needs are better satisfied with the more complex approach, or whether you're better served sticking with the norm.