CSS Sprites

CSS Sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.

This technique can be very effective for improving site performance, particularly in situations where many small images, such as menu icons, are used. The Yahoo!, Google and YouTube home pages, for example, employ the technique for exactly this.

Tools

• CSS Sprite Generator: http://spritegen.website-performance.org/
• SpriteMachine: http://spritemachine.com/

Resources

• W3schools on CSS Image Sprites: http://www.w3schools.com/css/css_image_sprites.asp

Tutorials

• CSS Sprites Tutorial: http://learnwebcode.com/css-sprites-tutorial/
• CSS Sprites in Under 10 Minutes: http://addyosmani.com/blog/css-sprites-in-under-10-minutes/
• The Mystery Of CSS Sprites - Techniques, Tools And Tutorials: http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
• CSS Sprites - What They Are, Why They’re Cool, and How To Use Them: http://css-tricks.com/158-css-sprites/
• How Yahoo.com and AOL.com Improve Web Performance (with CSS Sprites): http://www.websiteoptimization.com/speed/tweak/css-sprites/
• CSS Sprites - Image Slicing’s Kiss of Death: http://www.alistapart.com/articles/sprites/
• What are CSS Sprites and What Are They Used for?: https://itinterviewguide.com/css-sprites/

External Links

• Styling the Button Element with CSS Sliding Doors - now with Image Sprites and IE 8 Support: http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/
• MouseOver Images Using CSS Sprites: http://www.dave-woods.co.uk/index.php/mouseover-images-using-css-sprites/
• The Mystery Of CSS Sprites -- Techniques, Tools And Tutorials: http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
• CSS Sprites - Image Slicing’s Kiss of Death: http://alistapart.com/article/sprites
• CSS Tricks - CSS Sprites: http://css-tricks.com/css-sprites/
• CSS Sprites vs. Data URIs - Which is Faster on Mobile?: http://www.mobify.com/blog/css-sprites-vs-data-uris-which-is-faster-on-mobile/ (winner is good ol' CSS Sprites; recommended to keep Image Data-URIs to 3-5 occurrences of commonly used images less than 15kb)
• Response Times - The 3 Important Limits: http://www.nngroup.com/articles/response-times-3-important-limits/
• CSS Sprites - Useful Technique, or Potential Nuisance?: http://coding.smashingmagazine.com/2010/03/26/css-sprites-useful-technique-or-potential-nuisance/
• CSS Sprites Revisited (with LESS & SASS): http://coding.smashingmagazine.com/2012/04/11/css-sprites-revisited/
• How Yahoo.com and AOL.com Improve Web Performance with CSS Sprites: http://www.websiteoptimization.com/speed/tweak/css-sprites/
• Combine images into CSS Sprites: http://www.feedthebot.com/pagespeed/combine-images-css-sprites.html
• To Sprite Or Not To Sprite: http://web.archive.org/web/20120112000605/http://blog.vlad1.com/2009/06/22/to-sprite-or-not-to-sprite/

See Also

CSS | Image | Optimization