Why use a sprite sheet rather than individual images?

by

The aim is to reduce HTTP requests. In addition, sometimes the compressed sprite will weigh less than the original images.

Recently I had a website with a lot of transparent gradients (white to trans, grey to trans) and some black and white on transparent images. By putting them all in a sprite and reducing the colors in the png to 8 I could get the sprite to be smaller in filesize than the original images (just… it was about a 0.5% saving). By reducing the number of HTTP requests from 10 to 1 though meant the site loaded faster (if measuring time from first connection to all data transferred).

In that case, a measurable increase was found.

I agree though that it’s possible to mess things up and to end up with a larger sprite than needed, especially if you aren’t using PNG compression.

Note two years after posting this – if you are using SSL, you should look into SPDY (my note in a further two years will mention HTTP 2.0 instead of SPDY!). SPDY negates the benefits of spriting.

More Related Contents:

  1. Black image fade over image [duplicate]
  2. How do I auto-resize an image to fit a ‘div’ container?
  3. When to use IMG vs. CSS background-image?
  4. Fill SVG path element with a background-image
  5. Is element block level or inline level?
  6. Removing whitespace between HTML elements when using line breaks
  7. Should I specify height and width attributes for my IMGs in HTML?
  8. Embed image in a element
  9. Make an image responsive – the simplest way [duplicate]
  10. How can I make all images of different height and width the same via CSS?
  11. CSS image resize issue
  12. Floating an image to the bottom right with text wrapping around
  13. CSS image resize percentage of itself?
  14. img tag displays wrong orientation
  15. How does one use the onerror attribute of an img element
  16. Image scaling causes poor quality in firefox/internet explorer but not chrome
  17. Center image element in parent div
  18. CSS: How can I set image size relative to parent height?
  19. How to change an image on click using CSS alone?
  20. How to make images stay within the rows of a css grid container?
  21. How to replace color of PNG image using CSS? [duplicate]
  22. How to strike through obliquely with css
  23. How can I resize an image to a percentage of itself with CSS?
  24. How to auto-resize an image while maintaining aspect ratio
  25. download webpage and dependencies, including css images [closed]
  26. CSS Border on PNG image with transparent parts
  27. Use the HTML tag as a background image instead of the CSS background-image property?
  28. How to center image in a div horizontally and vertically
  29. How to forcefully print background image in HTML?
  30. Setting the image `width: 0` hides it, while `width: 0%` makes it occupy the space, too

Leave a Comment