How to fix “Improve image delivery” in PageSpeed Insights

1. 01Open the affected page in PageSpeed Insights or Lighthouse. Select the mobile or desktop report you want to improve, then expand “Improve image delivery” and note the flagged image URL and suggested change.
2. 02Find that image on the page. In browser developer tools, compare the downloaded image with its displayed dimensions, allowing for screen density. Check the selected source, not just the original in your media library.
3. 03If the delivered image has too many pixels, correct the responsive sizes or theme settings first. If the dimensions fit, compare compression or a supported alternative format.
4. 04Prepare a copy with the needed dimensions in an image editor. Use the Bitinz image compressor for suitable files, and inspect text, edges, transparency and gradients before replacing anything.
5. 05Publish the replacement or template change. Check that the page requests the new image rather than an older cached version, then repeat the report with the same device setting.

Chrome estimates savings from the image's download size and an efficient bytes-to-pixel ratio for its format. Images with estimated savings below 4 KiB are not flagged. This is a reporting threshold, not a recommended maximum image size.

Lighthouse 13 replaced the older image audits with this insight; Lighthouse 12 had already made insights the default report view. A format warning, excess dimensions and heavy animation can need different fixes. For the broader publishing workflow, follow how to compress images for a website.

• WordPress: check the image size selected in the block or theme and the actual srcset and sizes markup. WordPress generates responsive image candidates, but a custom template or inaccurate layout description can still deliver an unsuitable size. Fixing only the original file may leave existing generated copies in use.
• Shopify: storefront images are already optimized through Shopify's CDN, including format selection. Shopify says manual compression before upload is unnecessary. For a warning, inspect the theme's requested image width and responsive markup instead of repeatedly degrading the source. A theme developer can check image_url and image_tag.
• Next.js: use the Image component's responsive settings and give sizes a value that matches the actual layout, especially with fill. Without a suitable value, a narrow image can be treated as viewport-wide and a larger candidate downloaded. Changing quality alone does not correct that layout mismatch.

Keep an editable original. For independently served images, compare the prepared file's real size and appearance; JPG, PNG and WebP compared helps you choose. Bitinz does not resize images. WebP conversion can produce a larger file, so keep the version that actually suits the page.

For a recurring publishing workflow, the developer API can process suitable files with an account and monthly quota. It does not repair a theme's markup or responsive layout. Check the delivered page again after automation is connected.

• The flagged URL matches the image and version you changed.
• The browser selects a suitable source across screen sizes.
• Compression preserves useful detail, transparency and smooth gradients.
• The main visible image is not delayed by an inappropriate lazy-loading setting.
• The new report uses the same device setting; actual page appearance and loading are checked too.