<img Decoding="async" Class="alignleft" Src="ht... Apr 2026

: It allows text and other non-image content to appear sooner, rather than waiting for large images to be fully processed. The Trade-off: LCP and "Popping"

: Moving the decoding process to a background thread keeps the main thread free, ensuring a smoother user experience and reducing "jank" while scrolling. <img decoding="async" class="alignleft" src="ht...

249: Decoding async, tree rings, and flexbox gap - CSS-Tricks : It allows text and other non-image content

While async decoding is generally a best practice for secondary images, it can occasionally backfire for critical "above-the-fold" content: : Because the browser might paint the rest

: For the Largest Contentful Paint (LCP) image—usually the main hero image—using decoding="async" can actually delay its appearance, potentially hurting your Core Web Vitals scores.

: Because the browser might paint the rest of the page before the image is ready, the image may "pop in" suddenly after the surrounding text is already visible.

The attribute decoding="async" in an tag is a performance-focused hint that tells the browser to decode image data off the main thread. This prevents the CPU-intensive process of converting a compressed file (like a JPEG) into raw pixels from blocking the rendering of other critical content, such as text or interactive elements. Why decoding="async" Matters