PageSpeed: Combine images using CSS sprites


Combining images into as few files as possible using CSS sprites reduces the number of round-trips and delays in downloading other resources, reduces request overhead, and can reduce the total number of bytes downloaded by a web page.

How does your site score on this recommendation?

Details from Google

Similar to JavaScript and CSS, downloading multiple images incurs additional round trips. A site that contains many images can combine them into fewer output files to reduce latency.



PageSpeed recommends:

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.

Minimize the amount of "empty space" in the sprited image

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.

Sprite images with similar color palettes

Spriting images with more than 256 colors can cause the resulting sprite to use the PNG true color type instead of the palette type, which can increase the size of the resulting sprite. To generate optimal sprites, combine images that share the same 256 color palette. If there is some flexibility in the colors in your images, consider reducing the resulting sprite's color palette to 256 colors.

Read More