Mobile Image Optimization Checklist (2025)

Mobile now dominates impressions; image discipline directly lowers bounce and improves Core Web Vitals.

Key metrics

• LCP ≤2.5s (largest hero/product)
• CLS ~0 (reserve space with width/height)
• INP <200ms (avoid main‑thread decode spikes)

Checklist

1. Serve AVIF + WebP fallback for hero if AVIF saves ≥8%.
2. Provide responsive widths (480, 768, 1024, 1440) with sizes tuned to layout.
3. Cap DPR variants at 2x; avoid 3x unless iconographic.
4. Use fetchpriority="high" on single above‑the‑fold LCP image.
5. Lazy load non-critical images (native loading="lazy").
6. Preload critical hero only; do not preload gallery variants.
7. Strip EXIF.
8. Ensure color space sRGB; avoid Display P3 fallback mismatches.

Format strategy

• JPEG only as build-time intermediate.
• AVIF for photographic + gradients.
• WebP for broad fallback.
• PNG for alpha / UI.
• SVG for logos & flat illustrations.

Monitoring

Measure real user LCP & weight by route. Image CDNs can hide regressions—log emitted srcset selection frequency.

Pitfalls

• Oversized hero (serving 2000px to 360px viewport).
• Too many DPR variants.
• Missing explicit dimensions causing layout shift.
• Inlining huge data URIs.

Summary

A constrained, metrics‑first pipeline compounds: lighter bytes, faster LCP, better retention. Automate checks into CI where possible.