Image Slicing and CSS Sprites

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 :