PageSpeed Image Optimization

Image Optimization

PageSpeed offers a variety of filters to optimize images for the web. All of these can be enabled individually, or all at once using 'pagespeed rewrite_images'. PageSpeed will back down when it detects that optimizations did not result in an image reduction.

Check out our PageSpeed image optimization documentation here.

Nice read: Delivering Optimized Images on the Web by Joshua Marantz from Google.

Optimizing images with PageSpeed

Image optimization: automatically classify candidates for lossy or lossless recompression

Blurring text and sharp lines is one symptom of jpeg compression noise, which is why graphics containing logo's and texts are usually good candidates for the png format instead. As of PageSpeed lossless images (png, gif) that are considered for optimization will be automatically categorized into buckets that should either be recompressed via lossy or lossless optimization. An advanced algorithm determines the image's sensitivity to compression noise. This means that you'll have to worry less about enabling certain filters degrading the visual experience on your website, and can save you a lot of manual work if there are lots of graphics on your pages that you would have to classify yourself otherwise.

Mobile image optimizations (User-Agent specific)

For mobile user-agents, PageSpeed is able to separately tune and recompres images to lossy or lossless formats - or even WebP if supported. It is also possible to separately tune image recompression quality for small screen devices. For mobile user agents, IISpeed is able to first send low-res placeholders of images down the wire to speed up the initial view. After the page completes loading, a higher res version will be downloaded and displayed.


PageSpeed is able to resize images to match the width and height specified in html.


Part of the content prioritization options, with image lazyloading only images that are above the fold will be downloaded and rendered. Images that are below the fold, will be deferred and loaded by javascript inserted by IISpeed when they scroll into view. When combined with other content prioritization filters, like "prioritize critical css" and "defer javascript" , this can result in a very snappy web experience.


The recompression feature will perform a few passes using different compression settings to figure out the smallest possible size for the configured image quality settings.


The recompression feature can also be configured to convert png to jpeg. Both jpeg and png can be configured for automatic conversion to webp. WebP will only be served to browsers that support it, and offers an additional 30 to 35 percent reduction in image size at the same quality as jpeg.


By enabling 'convert_jpeg_to_progressive', recompression will trancode jpeg images that are not already progressive and larger then 10kb to progressive. Progressive jpegs allow better compression opportunities, as increase the speed at which browsers can show the user an initial image, resulting in a speedier experience.

Stripping metadata

Often, images still contain lots of metadata like icc profiles, previews, and copyrights. PageSpeed can automatically detect and remove these.


Small images can be inlined, to reduce the amount of requests needed to render the page. The threshold for this can be configured. Part of the content prioritization filters. When optimizing above the fold content for a page, it makes sense to inline images above the fold and defer loading of images bewlow the fold.

Inserting image dimensions

To help the browser render the page, PageSpeed can insert the original image dimensions into image tags. With the dimension inserted, the browser knows the area that the image will take, preventing page reflows.

PageSpeed Automatic Image Optimizations

  1. Optimize Images
  2. Lazyload images
  3. Convert jpeg to progressive
  4. Convert gif and png to jpeg
  5. Convert jpeg to WebP
  6. Convert to WEBP lossless
  7. Insert image dimensions
  8. Inline images
  9. Recompress images
  10. Recompress jpeg
  11. Recompress png
  12. Recompress webp
  13. Convert gif to png
  14. Strip color profiles
  15. Strip image meta data
  16. Reduce JPEG subsampling
  17. Resize images
  18. Inline preview images
  19. Resize mobile images

Share View Comments
Some content on this website represents a modified version of the official Google PageSpeed documentation