Understanding INP: How Large Images Degrade Interaction to Next Paint

In March 2024, Google officially replaced First Input Delay (FID) with Interaction to Next Paint (INP) as a Core Web Vital. While FID measured only the delay before the browser could start processing the very first interaction, INP measures the latency of all interactions throughout the user's entire visit, reporting the worst-performing one.

When developers think of optimizing INP, they immediately look at JavaScript: reducing long tasks, splitting bundles, and optimizing event listeners. However, unoptimized images are one of the most common, yet least discussed, culprits behind poor INP scores.

Here is a deep dive into how heavy image assets degrade interaction responsiveness and how you can optimize your image loading pipeline to keep your INP under the 200ms "Good" threshold.

---

1. The Interaction Pipeline and the Main Thread

To understand how images affect INP, we need to look at the three phases of an input interaction:

[ Input Delay ] ---> [ Processing Time ] ---> [ Presentation Delay ]

1. Input Delay: The time between the user interacting (e.g., clicking a button) and when the event handler begins to run.
2. Processing Time: The duration of the event handler's JavaScript execution.
3. Presentation Delay: The time between the event handler completing and the browser actually rendering the next frame (Next Paint) on screen.

Heavy images heavily impact both Input Delay and Presentation Delay.

---

2. How Images Degrade Your INP Score

There are three primary mechanisms through which large, unoptimized images block interactions:

A. Image Decoding Blocks the Main Thread

Images are shipped over the wire in compressed formats (JPEG, WebP, AVIF). Before the browser can render them, the CPU must decompress and decode the raw binary into a bitmap in memory.

By default, image decoding runs on the main thread. If a user clicks a button or types in an input while the browser is busy decoding a massive 4K JPEG, the event listener is queued, causing high Input Delay.

B. High Presentation Delay via Layout & Style Recalculation

If your images lack explicit width and height attributes, the browser does not know their aspect ratio before they load. When the image finally downloads:

1. The browser must recalculate the document layout (Reflow).
2. It re-evaluates CSS styles (Style Recalculation).
3. It paints the updated pixels (Repaint).

If a user interacts during this reflow storm, the browser cannot render the frame update of the interaction, resulting in a high Presentation Delay.

C. GPU Memory Swapping Latency

Large bitmaps consume massive amounts of memory. A single 4000x3000 image occupies: $$\text{Memory} = 4000 \times 3000 \times 4\text{ bytes (RGBA)} \approx 48\text{ MB of RAM}$$

When a webpage loads multiple large images, the device's GPU and system RAM become saturated. The operating system is forced to swap memory in and out of the GPU cache, causing frame drops and micro-stutters during scrolling or clicking animations.

---

3. Comparing the Impact of Image Formats on INP

Different image formats put varying levels of stress on the browser's decoding engine.

Format	Decoding CPU Overhead	Main-Thread Blocking Potential	Mitigation Strategy
JPEG	Low	Low (but payload size is large)	Compress aggressively
WebP	Medium	Moderate	Use decoding="async"
AVIF	High	High (demanding algorithm)	Keep dimensions small; lazy load

While AVIF yields incredibly small file sizes, its decompression algorithm is computationally heavier than WebP or JPEG. For lower-end mobile devices, decoding a large AVIF can block the CPU for up to 150ms.

---

4. How to Measure Image-Induced INP Issues

To identify if images are hurting your responsiveness, utilize Chrome DevTools:

1. Open the Performance Panel and record an interaction.
2. Look for long tasks (marked with red flags).
3. Inspect the flame chart for Image Decode events.
4. Utilize the Long Animation Frames (LoAF) API to query long-running paint tasks in production:

const observer = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) {
      console.log('Long frame detected:', entry);
    }
  }
});
observer.observe({ type: 'long-animation-frame', buffered: true });

---

5. Summary Checklist to Protect Your INP

To prevent images from degrading your interaction performance:

• Always Use decoding="async": This instructs the browser to decode the image off the main thread, avoiding frame-rate drops.
• Specify Image Dimensions: Set width and height (or use CSS aspect-ratio) to prevent layout shifts.
• Defer Offscreen Images: Use loading="lazy" so the browser doesn't spend CPU cycles decoding images the user can't see yet.
• Resize at the Edge: Never serve a 3000px wide image for a 300px wide thumbnail.