Last update: December 29, 2011
It’s often discussed whether or not slicing images makes them load faster on the web. In the past images slicing was used to benefit from human perception that makes it seem like the page is loading faster when small pieces are displayed in sequence. In reality load time is increased due to the additional simultaneous requests to the web server. The total file size of sliced images is reduced if each slice is compressed to optimal settings.
Today, the contrary of slicing is done. Separate graphics are grouped in one large image collection. It’s far easier on the server to serve a single large image than many small ones and it’s faster for a web browser to load such an image.
Problems related to css sprites are :
- No encapsulation: If you want to change one image, you have to change the sprite
- Don’t degrade: If the browser don’t support CSS, you are in trouble
- Memory footprint: When sprites get loaded into the browser, they are stored uncompressed and can take up a huge memory
- read/maintain/modify your CSS. It can be difficult to remember the exact pixel offsets within the sprite
Here is a list with links to useful webpages about related topics :
- Sparklines
- Using images, by MDN
- CSS Sprites: What They Are, Why They’re Cool, and How To Use Them, by Chris Coyier
- To Sprite Or Not To Sprite, by Vladimir Vukićević
- SmartSprites, by Stanislaw Osinski
- CSS image sprites, by w3schools.com
- CSS Sprite Generator, by Project Fondue
- 19 Awesome CSS Image Sprites Tutorials & List of CSS Sprite Generators, by Sreejesh Suresh
- Spritebox, by Gilbert Sinnott
- CSS for Mobile Browsers : CSS Sprites, by Programming4Us
- Sprite Cow, by theTeam