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.