Combine Images using CSS Sprites

CSS Sprites

If you have multiple images in an area or are using png images, they can be combined in CSS to lower request times.

Sprite Images that are loaded together

Combine images that are loaded on the same page and that are always loaded together. For instance, a set of icons that are loaded on every page should be sprited. Dynamic images that change with each pageview, such as profile pictures or other images that change frequently, may not be good candidates for spriting.

Sprite GIF and PNG images first

GIF and PNG images use lossless compression and can thus be sprited without reducing the quality of the resulting sprited image.

Sprite small images first

Each request incurs a fixed amount of request overhead. The time it takes a browser to download small images can be dominated by the request overhead. By combining small images, you can reduce this overhead from one request per image to one request for the entire sprite.

Sprite cacheable images

Spriting images with long caching lifetimes means that the image will not have to be re-fetched once it’s cached by the browser.

Using a spriting service

Spriting services such as SpriteMe can make it easier to build CSS sprites.

Minimize the amount of “empty space”

In order to display an image, the browser must decompress and decode the image. The size of the decoded representation of the image is proportional to the number of pixels in the image. Thus, while empty space in a sprited image may not significantly impact the size of the image file, a sprite with undisplayed pixels increases the memory usage of your page, which can cause the browser to become less responsive.