HTML image decoding: choose a paint hint without promising speed

When it earns its place

A long inspection record contains a photograph below the written finding. The photograph can load near the viewport and decode asynchronously, allowing text to appear while the bitmap is prepared. Its width and height reserve a predictable box so that late arrival does not push the report around. This is a measured choice, not a blanket rule for every image: a hero visual or a critical diagram may need a different priority strategy, and decoding does not determine when the bytes are downloaded.

<figure>
  <img src="/images/inspection-I-47-seal.webp" alt="Seal on parcel I-47 with a split along the upper edge" width="960" height="640" loading="lazy" decoding="async">
  <figcaption>Seal condition at intake, before dispatch.</figcaption>
</figure>

Browser boundary

The browser may honor or ignore the decoding preference. Async decode can allow non-image content to paint first; it does not reduce file size, repair an inaccurate alt text, or guarantee better Core Web Vitals.

Cost and maintenance

This hint adds almost no markup cost. The image itself dominates bytes and memory, so correct dimensions, compression, source selection, and placement matter more than the hint alone.

Common Mistakes

• Do not confuse decoding=async with loading=lazy.
• Do not lazy-load a critical first-screen image without measuring the result.
• Do not omit dimensions when the image size is known.

Connected lessons

• HTML image loading: distinguish a key image from below-fold media
• HTML srcset and sizes: let the browser choose an appropriately sized image
• HTML image alt text: describe function or information, not pixels alone