Image sprites: when do you consider they are worth the effort?
We all know that combining multiple background images into one will reduce the number of http connections and as a result speed up loading web pages. But there are cases when multiple images actually take up less space than one combined image. For example, now I have a hard time deciding if making a sprite is worth it:
- I have 5 background images. If they are kept in separate files their total size is 48KB.
- If I combine these images into one then the one image is 62KB.
The difference is because when saving each image separately I can apply better optimizations without much degrading quality because there are fewer colours to deal with. When all images are put into one then I have to increase the number of colours in the overall image to achieve a similar visual effect.
So which would you choose? One 62KB image or five images 48KB total?
Edit: these are PNG images.