I have an interesting problem, I guess...

First of all, I want to use sprites, to reduce the HTTP request on my site. That is because I know it's better for SEO and it makes the site faster, most of the time.

The interesting thing, though, is that my sprite is bigger in size in comparison with if I use four separate background images. The sprite: 20kb vs. 10 kb if I use 4 separate images.

20 kb vs. 10kb = 1 request vs. 4 request.

What weighs more?

P.S.: the background images are used because I want to distinguish the posted forum; so not essential, but I found it necessary.

P.S. 2: I know it's better to use <img> tags with the alt attribute, but I haven no choice in this one, because it's conditional.

  • 1
    Do you have an example site, or can you show me the example images you are combining? I don't think the combination should be larger. Commented Feb 13, 2014 at 13:42
  • Because of security, I can't give you a link but I can ensure you that the sprite is bigger than separate images, which is weird, I admit. Anyhow, I've got my answer, I guess, thank you.
    – Siyah
    Commented Feb 13, 2014 at 15:45
  • Might be worth looking into image optimisation tools like PNGcrush or ImageOptim. And make sure you're saving in the correct format, i.e. don't save photos in PNG format. Commented Feb 13, 2014 at 16:11

1 Answer 1


Nowadays, with the Internet connections we have, 20 kb is a tiny size and thus next to nothing to load. That's why I advise you to use the sprites image instead of 4 HTTP requests. Moreover, you get sprites to display images faster.

However, a difference of 10 kb is necessarily in favor of sprites image but if you have a bigger difference, like 400 kb, a good way to know the best option is to load the page with your two test cases and see in which case your page loads faster (because the faster your site is loading, the better it is for SEO). The console of Safari, Chrome or Firebug for Firefox can help you with this.

Otherwise, think about sprites as an option that should be only used for icons, pictos, etc. (decorative elements). <img> tags with alt attribute are used differently; a submit button or a photo for instance. Don't forget that alt attributes for icons, pictos, etc. are irrelevant.

  • So it's not an problem if it takes more time to load the page? I know the size is small, but what if it was 600KB vs. 200KB, for example?
    – Siyah
    Commented Feb 13, 2014 at 12:04
  • I have updated my post to answer your comment questions.
    – Zistoloen
    Commented Feb 13, 2014 at 12:13
  • 2
    Also note that you can make parallel http requests by opening persistant connections on http 1.0 (should be automatically enabled on http 1.1). This way instead of downloading a website one at a time you can download multiple resources using multiple http connections Commented Feb 13, 2014 at 12:21
  • Thanks, but I found your answer confusing. You state that 10 kb is in favor of the sprite: why? Because it has less request? That would be logical, but what weigs more? I mean, I have less requests with a sprite, but the page load time is more... what is more important?
    – Siyah
    Commented Feb 13, 2014 at 15:46
  • @Siyah Well this depends entirely on your target audience. If you are targeting mobile devices 10kb can make all the difference. However, Correctly configured with gzip and optimizing your images can reduce the size of these images down to a very small amount. So more on the topic, 10kb is better in any means however i was just stating that 4 images at smaller amounts will more then likely download slower if persistant connections are not enabled. But this depends on target auidence and your setup Commented Feb 13, 2014 at 16:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.