Image Optimization Checklist
Use this as a one-page checklist when you are fixing LCP and reducing page weight.
Checklist
| Step | Action | Validate |
|---|---|---|
| 1 | Identify LCP image (PSI/Lighthouse) | Confirm which image is the LCP element |
| 2 | Convert to WebP/AVIF where appropriate | Bytes drop without visible artifacts |
| 3 | Resize to rendered dimensions | Mobile doesn't download desktop sizes |
| 4 | Ensure responsive delivery | srcset/sizes present and correct |
| 5 | Reserve space for all images | width/height or aspect-ratio prevents CLS |
| 6 | Lazy-load below-the-fold | LCP image is excluded from lazy load |
| 7 | Choose one optimizer | No double WebP/AVIF generation or markup rewrites |
| 8 | Re-test | LCP improves and CLS does not regress |
Format Guidance
| Format | Use For |
|---|---|
| AVIF | Best compression for photos (when supported) |
| WebP | Default next-gen format for photos |
| JPEG | Fallback for photos |
| PNG | Transparency and UI graphics (when needed) |
| SVG | Logos and icons |
Quick Targets (Rule of Thumb)
- LCP/hero image: keep it small and responsive (often < ~200KB depending on design)
- Thumbnails: keep them small and correctly sized
- Avoid serving images wider than the viewport
Validation Tools
- PageSpeed Insights / Lighthouse: confirm LCP image is not lazy-loaded
- DevTools Network: confirm correct image sizes on mobile
- DevTools Rendering: confirm no layout shift regions