Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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.

share|improve this question
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. –  DisgruntledGoat Feb 13 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 Feb 13 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. –  DisgruntledGoat Feb 13 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.

share|improve this answer
    
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 Feb 13 at 12:04
    
I have updated my post to answer your comment questions. –  Zistoloen Feb 13 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 –  Liam Sorsby Feb 13 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 Feb 13 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 –  Liam Sorsby Feb 13 at 16:18

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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