When is a CSS Sprite too large?

Question

Is the main purpose of sprites to reduce http requests made to the server for graphical elements on a page? Or do you want to try and fit as many elements to the sprite as possible.

I guess what I'm asking is: when is the sprite too large?

Answer 1

You can pack all small static design elements to one master image without big problems.

Of course, if you have 10 megapixel photos on your web site, packing them together would be madness.

Answer 2

It's too large when the user has to wait for the file to download before the page can be used.

Answer 3

Yes the main purpose is to reduce requests (and therefor loading time). Another advantage is that you only have to worry about one image to be cached correctly. Tip: use PNG images as their compression handles large white ("empty") areas best.

Answer 4

Is the main purpose of sprites to reduce http requests made to the server for graphical elements on a page?

Yes, you want to avoid having many requests for small images. Combining them into one sprite allows them to be fetched in one http request.

when is the sprite too large?

It's really the total of all requests you want to look at. The only way for the sprite to be too large is if the sum of its parts (which is exactly what the sprite is) is too large to begin with.

Answer 5

A CSS sprite is too large when you're including anything but the essential UI elements. These are small supplementary images like icons and logos where compression doesn't damage the quality too much. Since all those images would have been otherwise independently loaded, you're no worse off than requesting them individually. If it is taking too long to load, your problem doesn't rely with sprites, but in compressing your images properly.

Answer 6

Google maps uses 256x256 px images.

Answer 7

Regarding sprites, you should definitely check out the discussion on memory usage beneath this blog post too: http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/

My advice:

• Only sprite icon rows, buttons and repeating images (e.g. a rounded corner gradient box).
• Leave everything else alone
• Keep your images under 500x500 or 100kb and leave as little unused space as possible. Use .png or .gif depending on the situation

Answer 8

If you are using PNG for the sprite image type it's helpful to remember that each row is generally compressed (deflated) independently of the other rows.

So to help with the balance of number of sprites/image size, try to fit similar sprites next to each other horizontally rather than vertically - to take advantage of the compression.

PNG also supports "predictors" which only store the deltas between a predicted value (based on preceding rows and preceding pixels in the same row) and the actual value.

Find a good image editor that allows you to set different PNG predictor compression settings (or optimizes automatically) to find a setting that is best for your image.