This rule triggers when PageSpeed Insights detects that the images on the page can be optimized to reduce their filesize without significantly impacting their visual quality.
Images often account for most of the downloaded bytes on a page. As a result, optimizing images can often yield some of the largest byte savings and performance improvements: the fewer bytes the browser has to download, the less competition there is for the client’s bandwidth and the faster the browser can download and render content on the screen.
Finding the optimal format and optimization strategy for your image assets requires careful analysis across many dimensions: type of data being encoded, image format capabilities, quality settings, resolution, and more. In addition, you need to consider whether some images are best served in a vector format, if the desired effects can be achieved via CSS, and how to deliver appropriately scaled assets for each type of device.
Optimizations for all types of images
- Follow the best practices for serving responsive images
- Follow the image optimization checklist for individual images
Optimizations for GIF, PNG, and JPEG images
GIF, PNG, and JPEG formats make 96% of the entire Internet’s image traffic. Because of their popularity, PageSpeed Insights provides specific optimization recommendations. For your convenience, you can download the optimized images directly from PageSpeed Insights (which is using image optimization library from modpagespeed.com).
You can also use tools such as the convert binary made by ImageMagick which can apply similar optimizations – see example instructions below.
If you use third party tools, please be aware that the transformation might make your images larger, if yours were already very well optimized. If that happens, please use your originals.
GIF and PNG are lossless formats, in that the compression process does not make any visual modification to the images. For still images, PNG achieves better compression ratio with better visual quality. For animated images, consider using video element instead of a GIF, to achieve better compression.
- Always convert GIF to PNG unless the original is animated or tiny (less than a few hundred bytes).
- For both GIF and PNG, remove alpha channel if all of the pixels are opaque.