Start with the displayed size
An image thousands of pixels wide may be unnecessary for a small thumbnail. Export variants suited to their display size and use the browser’s responsive image features. Check sharpness on high-density screens without always serving the heaviest version.
Compare quality and file size
Modern formats can reduce transferred data, but no setting suits every image. Compare appearance and file size after export. Choose suitable formats for illustrations, photographs and elements that need transparency.
Do not delay the main image
Lazy loading suits images further down the page. Applied indiscriminately to the main image, it can delay LCP. Identify that image in the report and make sure the browser can discover it early.
Reserve space before loading
Width and height attributes, or an aspect ratio in styles, reserve space. The page can then stay stable while files arrive. Check the result at several widths and on a slowed connection.
PUT IT INTO PRACTICE
Check one file at a time
- Find an image named in the diagnostic.
- Note its displayed dimensions and transferred size.
- Produce a suitable variant in your staging environment.
- Reserve its space in the layout.
- Check sharpness and repeat the same audit.
Do not replace every image at once without checking appearance. Excessive compression may damage a product photo or make embedded text unreadable. Compare variants across several screens. The best file meets the visual need with a reasonable size.
Sources and scope
This guide suggests a working method. No numerical improvement is guaranteed. To check definitions and explore the audits: official documentation.