The decoding="async" Attribute: What It Actually Does and When to Use It

When optimizing images for the web, developers spend most of their time adjusting sizes, switching formats, and configuring lazy loading. But even after serving a highly compressed WebP/AVIF file, you might still experience input delay or micro-stutters during page loading.

This occurs because of a hidden bottle-neck: Image Decoding.

To give developers control over this process, HTML5 introduced the decoding attribute. In this guide, we dive into how browsers decode image files and when you should explicitly use decoding="async" versus decoding="sync".

---

1. How Browsers Process Images

When the browser parses an HTML document and hits an <img> tag, it goes through a multi-stage pipeline to display the image:

[ Download Compressed Binary ] ---> [ Decode/Decompress to Bitmap ] ---> [ Rasterize & Paint ]

1. Download: The compressed binary payload (e.g., .webp or .jpg) is downloaded over the network.
2. Decode: The CPU takes the compressed binary format and decompresses it into a raw, pixel-by-pixel bitmap in memory (RGBA format). This is a heavy mathematical operation.
3. Rasterize & Paint: The browser engine draws the bitmap onto the viewport, pushing pixels to the screen.

---

2. Demystifying the decoding Attribute

The decoding attribute accepts three values:

<img src="photo.jpg" decoding="sync | async | auto" />

decoding="sync" (Synchronous)

The browser prioritizes rendering the image immediately. It halts other rendering and main-thread operations to decode the image.

• Result: The image is painted in the very first frame possible, but if the decoding takes a long time, the browser blocks user inputs (like scrolling or clicks) and drops frames.

decoding="async" (Asynchronous)

The browser downloads the image and handles the CPU decoding step off the main thread, using background worker threads.

• Result: The main thread remains responsive. Event handlers run immediately, and scrolling is smooth. Once the decoding completes, the browser schedules a paint step to display the image.

decoding="auto" (Default)

The browser decides what is best for the user based on screen size, performance metrics, and device capabilities. Usually, it defaults to synchronous decoding for small, simple images and async for larger ones.

---

3. The Trade-off: LCP vs. INP

When choosing between sync and async, you must balance two Core Web Vitals: Largest Contentful Paint (LCP) and Interaction to Next Paint (INP).

Scenario	Recommended Decoding	Rationale
Above-the-Fold (LCP) Image	decoding="sync" (or omit)	You want the hero image to render as fast as possible. Using async can delay the presentation of the hero image while the browser processes it off-thread, hurting your LCP score.
Below-the-Fold Image	decoding="async"	You do not want offscreen images blocking interactions as the user scrolls down the page.
Dynamic Galleries & Feeds	decoding="async"	For pages that load images dynamically (like infinite scroll grids), using async prevents micro-stutters.
Client-side Modals / Overlays	decoding="async"	Heavy detail images loaded inside modal overlays should decode off-thread to avoid locking up the page open transition animation.

---

4. Modern Code Patterns

In modern web development, frameworks like Next.js automatically manage this attribute. For example, Next.js's <Image /> component sets decoding="async" by default for all non-priority images.

If you are writing vanilla HTML/CSS:

<!-- For critical, above-the-fold hero images -->
<img src="/hero.jpg" alt="Hero banner" width="1200" height="600" priority />

<!-- For secondary images and content inside cards -->
<img
  src="/card-photo.webp"
  alt="Card detail"
  width="400"
  height="300"
  loading="lazy"
  decoding="async"
/>

---

5. Summary Checklist

To implement correct image decoding:

• Use decoding="async" for every image that is not the primary visual element above the fold.
• Combine decoding="async" with loading="lazy" to defer both the download and the decode until the image is near the viewport.
• Avoid using decoding="async" on your LCP hero banner to prevent visual delays.