Sprite Images

Configuration

The 'Sprite Images' filter requires the 'Rewrite CSS' filter; these filters are enabled by specifying:

Apache:

ModPagespeedEnableFilters rewrite_css,sprite_images

Nginx:

pagespeed EnableFilters rewrite_css,sprite_images;

in the configuration file.

Description

The 'Sprite Images' filter detects GIF and PNG images used as backgrounds in CSS. It attempts to combine all such images referenced from a CSS file into a single large image. The individual CSS backgrounds are then rewritten to point to the single large image, with background positioning declarations so that the page appears as it was before. This process is called CSS Spriting. This filter is intended to avoid the cumbersome process of managing the sprited image and corresponding declarations rather than as a general-purpose optimizer.

Benefits

CSS Spriting can benefit page speed in several ways. First, if many small images are combined into one large image, the browser will require fewer server connections, which can increase parallelism. Second, bytes are saved from the overhead of each individual request (both the HTTP headers and the image headers); depending on how well the large PNG compresses, this can end up saving a substantial amount of bandwidth. Finally, in some browsers it is faster to decode one large image than several small ones.

Example

For example, if the HTML document looks like this:

<html>
  <head>
    <title>Sprite Images</title>
      <style type="text/css">
        #bg_Cuppa {
            background-image:url('images/Cuppa.png');
            background-repeat:no-repeat;
            width:65px;
            height:70px;
        }
        #bg_BikeCrashIcn {
            width:100px;
            height:100px;
            background:transparent url('images/BikeCrashIcn.png') 0 0 no-repeat
        }
      <style type="text/css">
  </head>
  <body>
    <div id="bg_Cuppa"></div>
    <div id="bg_BikeCrashIcn"></div>
  </body>
</html>

Then sprite_images will rewrite the css into something like this:

        #bg_Cuppa{
            background-image:url(images/Cuppa.png+BikeCrashIcn.png.pagespeed.is.Y-XqNDe-in.png);
            background-repeat:no-repeat;
            width:65px;
            height:70px;
            background-position:0px 0px
        }
        #bg_BikeCrashIcn{
            width:100px;
            height:100px;
            background:transparent url(images/Cuppa.png+BikeCrashIcn.png.pagespeed.is.Y-XqNDe-in.png) 0px -70px no-repeat;
        }

You can see the filter in action at www.modpagespeed.com.

Limitations

The Sprite Images filter is still experimental, and currently has a number of limitations:

Only PNG and GIF images are supported; JPG will come in a future release.
Only CSS backgrounds are supported; <img> tags will come in a future release.
A background image can't be safely sprited if the HTML element is larger than the background image (since this would allow the combined image's extra pixels to show around the edges). Accordingly, the CSS must have explicit width and height in the same declaration as the background URL, and the width and height must be smaller than or equal to those of the image.
The CSS must not include any background-position declarations without background-url declarations. Such a naked background-position declaration could apply to any background-image, and since we don't know which one, it isn't safe to do any spriting.
The Sprite Images filter currently arranges images in a vertical strip, which might not be the most efficient arrangement. More advanced layouts will come in a future release.

Risks

Automatically spriting images is low risk. However, there are some potential problems to be aware of:

Browser caching effectiveness could be degraded. If the pages on your site have a high (but not complete) overlap of background images, a visitor browsing your site will normally have many of these images cached much of the time. After turning on the Sprite Images filter, the user may have to download a new (slightly different) sprite for each different page. Expect improvement on this front in a future release.

Your server load could increase. The image processing required to combine many small images into one large one could have a memory or CPU impact on your server. PageSpeed is designed to minimize this impact, but you should keep an eye on it after turning on any image processing filter.

Your server could be exposed to a new attack vector if you host user-submitted images. Processing hostile images on the server could be insecure. We recommend that user-submitted images be filtered before spriting.

Your CSS file could get bigger since the URL of the combined image is longer than the URL of each individual image. However, if your CSS is served compressed (and it definitely ought to be!), this should not make much difference, since the extra bytes will be highly compressible.

Your pages could take more memory to display on the client, since the decompressed bitmap of the large image will have more pixels than the sum of the small images. This could negatively impact the experience on memory-constrained mobile devices.