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?
A quick case study might help. Here’s the download performance of a sprite from SitePoint. 83ms spent waiting for the first byte of the response, and 147ms downloading the content. Let’s pretend that we were to split this sprite into two images, and that doing so would reduce the total bytes by 20%. In that case, our choice would be between:
One file: 83ms + 147ms = 230ms
vs -
Two files, 20% fewer bytes: (83ms + 59ms) + (83ms + 59ms) = 284ms
If we were to split this sprite into not just two, but five files, then the accumulated overhead would be even greater.
EDIT: And to answer your question in a more broad way: A sprite would no longer be worth the effort when the increased filesize (if any) takes more time to download than is saved by eliminating however many number of HTTP requests.
Thanks, I was hoping the answer would be in favour of separate images because it’s always some extra work to do to construct the sprites. I know the answer may depend on many factors, especially transfer speed and ping time, I just wanted to know some general numbers.
Generally sprites will be a better option as shown above but there will always be test cases where the images required are better kept separate.
I always try to keep similar images in sprites so that they can be optimised best and indeed if you are using transparent pngs then they are more likely to be much lower file size in a sprite than separate png images. Some icon files may have 50 - 100 small icons in them and they often have massive savings in file size.
The downside of sprites is of course maintaining and applying them to the design. It often means that a special element has to be sized and used for the image in the sprite rather than a background of a parent because of course other images in the sprite would show if you don’t size to fit.
Other things to consider are when to stop adding to a sprite because if you add all your site images to one sprite it becomes very large and assumes your users are going to visit every page to get any benefit from the sprite. Many users only visit a few pages of a site so making them download all resources would be overkill. In the end its a compromise between all the above so its never going to be a “one size fits all” answer.