CODEWITHSUNDEEP
csscss-sprites
Jamie
Jamie

Reputation: 333

Picture sprites in css

I've read a lot about the benefits of using sprites in css for icons and logos, but this seems to be largely used for lossless formats such as gif and png. I'm wondering if the benefits are still there with jpegs and images? I want to build a header from a number of smaller pictures that may be displayed in different orders. Will combining them into a single jpg still have the speed benefits of the normal use cases for sprites?

Upvotes: 1

Views: 59

Answers (3)

Paul Roub
Paul Roub

Reputation: 36438

You can reap the same benefits in terms of reduced round-trips, etc. but:

  1. The level of compression is likely to suffer; JPEG is tuned to reduce the size of single images, and does poorly with abrupt transitions (as in a collage, which your meta-image would basically be)

  2. For the same reason, it's possible that the edges of your sprite images will be less sharp than they are now, as they're being lossily compressed (and so slightly combined) along with adjacent image data.

Upvotes: 1

RobertPlant
RobertPlant

Reputation: 21

The main benefit of using the sprites for multiple images is that it provides a smaller amount of header information being sent. Therefore having larger pictures inside of the sprite would have less of an overall impact on the whole project, there would be a small increase but the adaptability of the system is reduced using sprites. If the picture is going to be changed at any point i would keep it outside of the sprite.

Upvotes: 2

TIPS
TIPS

Reputation: 31

It might depending how big those jpegs are. Usually images are combined to reduce http calls back to the server. If they are small in size then combine them, if not then leave them separate and call which ever ones you need.

Upvotes: 2

Related Questions