CSS sprites are cool
As someone who doesn’t really keep up with what’s going on in the world of web design (as in HTML, CSS etc), I was pleasantly surprised when I ran into an article on CSS sprites. The term sprite will be familiar to those of you who have encountered any kind of graphics programming on old hardware such as Commodore 64 and Amiga. A sprite, according to Wikipedia, is a two-dimensional/three-dimensional image or animation that is integrated into a larger scene.
How does this apply to web design? Well, some clever web designer figured out that you can composite a number of smaller images into one large image and then use CSS to display a particular part of that image. The advantage is that the browser only needs to request one image from the web server even though there appears to be many on the page. This leads to fewer HTTP requests and all-round improved performance. Additionally, it decreases any kind of lag that might be introduced when switching images.
Using CSS sprites is easy. Just combine a number of images into one and use the offset parameters of the CSS background property to define which part of the image you want to display. I use CSS sprites for the icons in the main navigation of this blog. The composite image is called nav_sprites.png. As you can see, the first sprite in the image is the blog icon (the plus sign). In CSS, I’ve defined this as:
background: url(img/nav_sprites.png) 0 0 no-repeat;
The hover style for that link is defined as:
background: url(img/nav_sprites.png) 0 -28px no-repeat;
In other words, the same image, but the image for the hover style is offset by -28 pixels from the top of nav.png. The next image is offset -56 pixels and so and and so forth. It should be worth mentioning that in addition to setting the offset, you might also need to set a width or height for the element in question to prevent stuff from the adjacent sprites to be displayed.
In my case, I placed all sprites in one “column”, but there’s nothing stopping you from adding multiple columns to the master image. In that case, you need to use the horizontal offset parameter as well (0 in my case).
Personally, I love these kinds of tweaks. CSS sprites are really easy to implement and even though the performance gains might not be huge, I’m a big fan of anything that streamlines the operation of computers and technology in general. There’s been some discussion on where to draw the line when it comes to CSS sprites. One could, in theory, include all images that are used on a website in one big composite image, but I think that’s taking it too far. If the browser needs to download a huge image before it can display any graphics at all on the page, the user experience will suffer. I think a good practice is to group images together. In other words, one composite image for icons, one for general UI elements, one for borders/corners etc. And don’t forget, this only applies to images that you display with the CSS background property, not the <img /> tag.
Edit: I forgot something. If you’re a bit lazy and you already have a large number of images that you want to combine into one master image, there are a couple of generators online that will do the job for you. I’ve tried CSS Sprites Generator and it worked great. There’s also this one which appears to have more features, but I have yet to test it myself.