CSS Sprites

HTML & CSS
1

Using googles page speed to work on my site and one of the “medium priority” items is to Combine images into CSS sprites.

Page Speed is showing me 7 images to combine into one sprite. I have done this using an online sprite generator.

Looking at the generated file it is 12kb, but adding up the 7 files seperate it is 7kb, is this normal? I understand that it is downloading one file compared to 7 but now it is almost double the size.

Guess I am just wondering if this is correct and what you think of sprites in general.

Thanks.
Ryan.

2

Sprites are great, but it might be better to use a program like Photoshop or Fireworks to create it, as you might get a better file size that way.

3

Thanks I will give that shot. Any guidelines when creating sprites in photoshop? Save for web using png?

Also am i wasting time on such a small amount of speed/mb, worrying about 12kb of images?

Thanks again.

4

I usually check each option to see which produces the smallest file size / best quality, as it seems to vary.

am i wasting time on such a small amount of speed/mb, worrying about 12kb of images?

Probably. But then, every bit can count—especially if you have a much visited site. If you can halve the size of images, it must be worth it eventually.