Thread: Reducing Images file size for web

What would the format be for CSS sprites that contain photos and graphics - or should you not combine?

Originally Posted by Jacob

For a start, you should not combine content images into a sprite -- especially images that change frequently. These images should live in your HTML, not your CSS, and should usually have alt text (e.g. <img alt="A young couple arguing in bed" ... >).

Most photos are content images, so make sure you're not spriting the wrong things. Only sprite decorative images. Typically, these are images that make up your interface. The classic example used to be rounded corners, but nowadays we use CSS3 for that.

When spriting, you need to maintain a reasonable level of image quality. Attempting to combine photos and graphics is probably a bad idea, because (typically) photos should be JPGs and graphics should be PNGs. You also need to pay attention to the colour palette: ideally, you would sprite graphics into PNG-8 (128 colours). If you have too many different colours in your graphics, then combining them into PNG-8 will reduce the quality. In this case, you might need to choose between using one truecolour PNG (larger file size) or two 8-bit PNGs. Similarly, avoid spriting alpha-transparent PNGs together with non-transparent PNGs: you may dramatically increase the file size and could even create some slowdown in browser rendering.

Remember that CSS3 can now replace a great deal of the graphics we used to sprite. This is the easiest and best-performing solution by far.

[FONT=FontinSansRegular]To conclude, the format you choose depends on the image and the situation - there is no magic, catch all, format.[/FONT]

With this and what has already been mentioned in mind, what format would one use for a file that contained both photo and graphic such as a banner?

Thanks

You wouldn't mix them. Photos tend to be used once. Logos, banners, what have you are more likely to be used several times, so would benefit (possibly) from being composited and cached.

If you have something specific, show it to us.