HTML image loading: distinguish a key image from below-fold media

Use it for a real task

A receipt detail page shows a small primary mark at the top and an archival scan farther down. The mark is loaded eagerly and marked high priority only if measurement confirms it matters to first paint. The scan can wait until the reader approaches it. Both declare intrinsic dimensions, so the page can allocate space before bytes arrive.

<main>
  <h1>Receipt R-47</h1>
  <img src="/media/receipt-mark-47.webp" alt="Approved receipt mark" width="320" height="180" loading="eager" fetchpriority="high">
  <section aria-labelledby="scan-heading">
    <h2 id="scan-heading">Archived scan</h2>
    <img src="/media/receipt-scan-47.webp" alt="Scanned receipt R-47" width="960" height="1280" loading="lazy" decoding="async">
  </section>
</main>

What the markup guarantees

The files and alternatives must exist. Lazy loading is a browser hint, not a guarantee that a request will never start early. A first-screen image should not be lazy merely because most other images are.

Cost and limits

The bytes and decode work dominate cost. Measure whether high priority improves the target page; competing high-priority requests can delay styles or other key content.

Common Mistakes

• Do not set high priority on every image.
• Do not lazy-load a key first-screen image by habit.
• Do not omit dimensions when they are known.

Connected lessons

• HTML image alt text: describe function or information, not pixels alone
• HTML srcset and sizes: let the browser choose an appropriately sized image
• HTML resource hints: preload only a known critical asset

Related: HTML image decoding: choose a paint hint without promising speed.

Continue with HTML modulepreload: fetch a known module before its import is discovered.