CSS sprites are used in web design as a way to improve performance by combining numerous small images or icons into a larger image called a sprite sheet or tile set, and selecting which icon to show on the rendered page using Cascading Style Sheets.
CSS Sprites have been used for years in video games and are an excellent way to optimize your website. Instead of using 4, 5, 10, etc. images on a single web page, you can instead place all of these images into one image. In return, you just reduced the amount of http requests that have to be made by the browser. Some people say this is also good for SEO purposes.
Is there an easy way to create CSS Sprites?
Creating a CSS Sprite is actually very easy and is one of the simplest optimization techniques that you can use in your website. In this video, I will discuss how to create a CSS Sprite for your website using only Photoshop and your favorite code editor (I’m using Sublime Text 2). I will be implementing the pseudo class hover and active to create a simple rollover anchor link.
What are my alternatives?
There are a number of sprite generators on the web that do a great job of creating sprite sheets or spit out the pixel values that are need in the CSS. Spriteme and Sprite Cow are two great tools that are freely available on the web.
Additional Reading
- Chris Coyier discusses the ins and out of CSS Sprites
- Dave Shea breaks down the history of CSS Sprites