CSS Sprite Sheets

Using CSS sprites, instead of a collection of smaller individual images, will improve your web pages’ performance and keep things more organized. Let’s take a look at some best practices and some helpful tools for your sprite-making workflow. The name sprite might remind you of gaming sprites; retro console games and even browser-based games these days and in CSS terms the role sprites play is more or less the same. A sprite is one large file containing multiple images for your website, saving loading time and web space.

The essential point of using CSS Sprite Sheets is that the server only has to send one image file containing all your images, not a host of individual ones – and through CSS you can display any little segment from that file as a background to an element. Some would have it that using individual images can ‘fool’ the eye into thinking the page is loading faster; images popping up as they load might appear to be good progress. This is a false benefit however, a genuinely faster loading page is always preferable. Combining your images into a single file will not only significantly lower the number of HTTP Requests, but will also decrease the total file size of the images.