Optimize Images

PageSpeed Service was turned off on August 3rd, 2015. Please see Turndown Information for PageSpeed Service.

Objective

Reduce payload size of image resources by re-compressing images optimally, removing unnecessary headers and minimizing reflows.

PageSpeed rule

This rewriter implements the PageSpeed rule for minimizing payload size.

Description

The Optimize Images rewriter re-scales, re-compresses, optimizes huffman tables for JPEG images, strips metadata, color profile information. This reduces the number of bytes downloaded, often substantially. When no size gains are realized, the rewriter leaves the original image unaltered. Image rewriting is particularly useful on image-heavy pages that have not been optimized offline. As a result of rewriting, the visual quality of images should not degrade in any perceptible way.

The compelete list of options that are supported under this rewriter are as follows:

Convert JPEG to WebP (Lossy Optimization)

When this options is selected, PSS converts JPEG images to WebP and serves those WebP images to modern browsers that support the image format. Optimized JPEG images will continue to be served to older browsers.

Convert PNG & GIF to JPEG (Lossy Optimization)

When this option is selected, PSS converts PNG and GIF images to JPEG images without any visual degradation of the image quality.

Re-compress JPEG (Lossy Optimization)

When this option is selected, PSS will re-compress the JPEG images with the specified quality. This also strips of unnecessary image metadata like thumbnails.

Add Image dimensions (Lossless Optimization)

When this options is selected, PSS inserts width= and height= attributes into <img> tags that lack them and sets them to the image width and height. This will help in reducing the number of reflows that happens when a web page is loaded thereby improving the user experience.

Progressive JPEG (Lossless Optimization)

When this option in selected, PSS converts JPEG images to progressive JPEG images, which helps in reducing the numbers of bytes served on the wire and improving the user experience by loading images incrementally.

Re-compress PNG (Lossless Optimization)

When this option is selected, PSS will re-compress PNG images by removing optional PNG segments like iTXt, hIST, etc. and applying various PNG optimization techniques like stripping alpha channel if the image is not transparent, reducing the bit depths, converting true color images to indexed images if there are less than 256 colors, etc.

Remove meta data (Lossless Optimization)

When this option is selected, PSS will remove EXIF related information from the image files.

Remove color profile (Lossless Optimization)

When this option is selected, PSS will remove color profile information from the image files

Resize on Server (Lossy Optimization)

Images are often resized in the browser because of specified size attributes that are smaller than the original image size. When this rewriter option is selected, PSS will reduce the size of each image on the server to the appropriate value before serving. This lowers page latency in two ways. First, fewer bytes are downloaded by the browser because the image size is smaller. And second, the browser has to do less processing because it need not resize the image before rendering.

Resize using rendered dimensions on Server (Lossy optimization)

When this rewriter option is selected, PSS will reduce the size of each image to the dimensions of the rendered image in a browser. If the same image appears more than once on the page and with different rendered dimensions, it resizes the image to the biggest of its rendered dimensions. Similar to ImageResize, this rewriter will lower the page latency by reducing the bytes downloaded by the browser and reducing the processing on the browser.

Operation

The Optimize Images is applied on images referenced in <img> tags and if Minify CSS is enabled, then images referenced from background-image, background, list-style-image and list-style CSS properties will also be optimized. This rewriter is applied on all images served from the PageSpeed Service (either CNAME’d or proxied).

Example

The effect of this rewriter on an example page can be observed by comparing the size of the downloaded image before and after rewriting.

Limitations

Limitations mentioned for the Proxy Images rewriter are also applicable to this rewriter.