INP-Centric Image Optimization (2025 Guide)

Quick summary

• INP is now a stable ranking + UX signal.
• Image decode + layout shifts + long tasks around interaction windows elevate INP.
• Strategy: shrink critical bytes + stagger non-critical decode.

1. How images influence INP

(Decode → raster → composite; main-thread scheduling & task queues.)

2. Anti-patterns hurting INP

• Heavy simultaneous hero + gallery decodes.
• Late dimension discovery (layout shifts).
• Over-sized DPR sets (3–4× waste) delaying decode completion.
• GIF / APNG used where MP4/WEBM smaller & faster.

3. Measurement signals

• Long tasks >50ms near first input (PerformanceObserver / DevTools).
• LCP vs first interaction delta.
• Bytes of images decoded before first input.

4. Tactical levers

• Right-size hero & limit to ≤180KB (target <150KB when feasible).
• Restrict DPR: 1x + 2x only for photographic assets.
• Use fetchpriority="high" on final LCP image only.
• Lightweight placeholder (dominant color / ultra-small blur <1KB).
• Defer gallery decode via loading="lazy" + post-idle hydration.

5. Sequence

1. Baseline RUM (INP p75, LCP p75).
2. Inventory hero/galleries.
3. Re-encode / dimension trim.
4. Adjust priority + placeholders.
5. Re-measure.

6. Example optimized <picture>

<picture>
  <source type="image/avif" srcset="hero-960.avif 960w, hero-1440.avif 1440w" sizes="(max-width: 900px) 95vw, 1440px" />
  <source type="image/webp" srcset="hero-960.webp 960w, hero-1440.webp 1440w" sizes="(max-width: 900px) 95vw, 1440px" />
  <img src="hero-960.jpg" alt="Product example" width="1440" height="720" loading="lazy" decoding="async" />
</picture>

7. Checklist

• Hero <180KB
• No oversizing >2×
• Placeholder minimal
• Gallery lazy
• DPR limited
• Single high-priority image
• INP p75 improvement confirmed

8. Next steps

Add before/after INP case table + decode timing instrumentation notes.