PageSpeed: Improve Image Delivery

Pages where the download time of images can be reduced, improving the perceived load time of the page and Largest Contentful Paint (LCP).

This audit is a consolidation of four previously separate audits in Lighthouse – ‘Efficiently Encode Images’, ‘Properly Size Images’, ‘Serve Images in Next-Gen Formats’ and ‘Use Video Formats for Animated Content’.

How to Analyse in the SEO Spider

To populate this filter the PageSpeed Insights API must be connected via ‘Config > API Access > PSI’.

View URLs with this issue in the ‘PageSpeed’ tab and filter and use the lower ‘Lighthouse Details’ tab to click on the issue on the left-hand side, and see details of the images on the right-hand side including the ‘reason’ they were flagged.

Bulk export the pages and images via ‘Reports > PageSpeed > Improve Image Delivery’.

What Triggers This Issue

The insight will highlight images that have unnecessarily large download sizes.

The estimated byte savings are calculated by comparing the download size of the image to an efficient bytes/pixel ratio for the image format and flag them if they can save over 4 KiB.

How To Fix

Optimise images using compression to reduce file size and so that the page loads faster.

Use responsive images to reduce the image download size.

Consider encoding JPEG and PNG images into new formats such as WebP which allow for greater compression to enable them to load faster and consume less data.

Consider using MPEG4/WebM videos for animations and PNG/WebP for static images instead of GIF to save network bytes.