This article has been revised and re-written several times since its very first publication in 2007, to keep the information current. The most recent revision was done by Flip Stewart in January 2015.<\/em> <\/p>\n
Spoiler alert: they aren’t fairies that write your stylesheets for you. I wish.<\/strong> In short: CSS Sprites are a means of combining multiple images into a single image file for use on a website, to help with performance.<\/p>\n
Sprite may seem like a bit of a misnomer considering that you’re creating a large image as opposed to working with many small ones, but the history of sprites<\/a>, dating back to 1975, should help clear things up.<\/p>\n
It may seem counterintuitive to cram smaller images into a larger image. Wouldn’t larger images take longer to load?<\/p>\n
Let’s look at some numbers on an actual example:<\/p>\n\n\n\n\n\n\n\n
Image<\/th>\n | File Size<\/th>\n | Dimensions<\/th>\n<\/tr>\n<\/thead>\n |
---|---|---|
canada.png<\/td>\n | 1.95KB<\/td>\n | 256 x 128<\/td>\n<\/tr>\n |
usa.png<\/td>\n | 3.74KB<\/td>\n | 256 x 135<\/td>\n<\/tr>\n |
mexico.png<\/td>\n | 8.69KB<\/td>\n | 256 x 147<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n That adds up to a total of 14.38KB to load the three images. Putting the three images into a single file weighs in at 16.1KB. The sprite ends up being 1.72KB larger than the three separate images.<\/strong> This isn’t a big difference, but there needs to be a good reason to accept this larger file… and there is!<\/strong><\/p>\n While the total image size (sometimes) goes up with sprites, several images are loaded with a single HTTP request<\/strong>. Browsers limit the number of concurrent requests a site can make and HTTP requests require a bit of handshaking<\/a>.<\/p>\n Thus, sprites are important for the same reasons<\/a> that minifying and concatinating CSS and JavaScript are important.<\/p>\n How do you use CSS Sprites?<\/h3>\n |