SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru bronze trophy
    Join Date
    Dec 2003
    Location
    Poland
    Posts
    930
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)

    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.

  2. #2
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,314
    Mentioned
    19 Post(s)
    Tagged
    1 Thread(s)
    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.
    "First make it work. Then make it better."

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    461 Post(s)
    Tagged
    8 Thread(s)
    If you are using the images for hover effects, definitely go for the sprite, as it removes all delay (at least on the first hover).

  4. #4
    SitePoint Guru bronze trophy
    Join Date
    Dec 2003
    Location
    Poland
    Posts
    930
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    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.

    The images are not meant for rollover effects.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,515
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •