Using CSS Image Sprites

An image sprite is a collection of images placed onto a single image file. This allows for us to upload a single image to our site (instead of, say, 10) and use CSS wizardry to display different sections of the sprite according to our needs. Less images means fewer HTTP requests and thus better performance overall. It's not something we really worry about too much in class, but it's a very common optimization trick you'll use in real-world apps. Every second of page-load really does matter, after all.

Read (and personally bookmark) this CSS-Tricks lowdown on how to use sprites. As mentioned in the article, there are many different ways to implement them. For class we’ll use SpritePad; this simple web tool expedites the process of combining images into a single file, as well as generating the appropriate CSS for us all at once.