3

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.

Zistoloen
  • 10,056
  • 6
  • 36
  • 59
Siyah
  • 406
  • 3
  • 10

1 Answers1

2

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.

riseagainst
  • 2,232
  • 3
  • 21
  • 36
Zistoloen
  • 10,056
  • 6
  • 36
  • 59