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.
Last edited by Mike Hopley; 27 Feb 2012 at @ 08.49.