CODEWITHSUNDEEP
cssperformancecss-sprites
zsalzbank
zsalzbank

Reputation: 9857

Size of CSS Sprite Base Image

Does it matter how long and wide an image is when using CSS sprites? I noticed the SO sprite image is one long image, with all the sprites on top of each other.

SO image

Would having the sprites grouped together increase performance?

Upvotes: 3

Views: 1641

Answers (3)

Shekhar_Pro
Shekhar_Pro

Reputation: 18420

Yes in few cases it would, because collectively many different images have a larger size than a single large images. Also the there will be no need for sending request for each image, all the required images will be available in a single sprite image. Then later your css will cut and use the required areas.

The difference will be noticed in low bandwidth connections where with multiple images each will be rendered with a little time gap, where as in a sprite based css, each will show almost simultaniously

Upvotes: 0

Emmett
Emmett

Reputation: 14327

Due to png's filter/compression algorithm, large swaths of uniformly-colored pixels barely contribute to the file size.

The minor file-size cost of arranging your sprite vertically (like Stack Overflow), as opposed to squeezing your icons into a perfect square, is probably well worth the benefits of having cleaner CSS and a more maintainable sprite.

Upvotes: 4

Samuel
Samuel

Reputation: 17171

It would increase performance if you could reduce the image size. I doubt it would increase performance by much because reducing the image size will not reduce the amount of requests which is the whole reason for using sprites. That said, someone using dial-up might notice a difference.

Upvotes: 1

Related Questions