Image delivery: AVIF and WebP with fallbacks, lazy loading and fetch priority

What it is

Three decisions at the <img> level that are independent of responsive sizing. Format: MDN's format guide describes AVIF and WebP as compressing better than JPEG and PNG, notes that their support is newer (WebP broad but not historical, AVIF narrower), and says to include a JPEG or PNG fallback via <picture>. In <picture>, each <source type="image/avif"> is skipped if the browser does not support that MIME type, and the final <img> is both the fallback and the element that carries alt, size and loading attributes. Loading: loading="lazy" defers the fetch until the image is within a browser-defined distance of the viewport; fetchpriority="high" or "low" hints where the image ranks against other images; decoding="async" lets the next paint proceed before the decode finishes.

Why it matters

Images are usually the heaviest bytes on a page and frequently the largest contentful paint. Wrong choices show directly in Web Vitals: a lazy-loaded hero delays LCP, missing dimensions on lazy images cause layout shift, and serving JPEG to a browser that accepts AVIF wastes bandwidth on every view.

How to apply

• Encode each image once per format at build time or in an image service, and keep the JPEG or PNG as the <img src>, so crawlers, older clients and copy-and-paste get a usable file.
• Order <source> elements from best to worst compression; the first supported type wins.
• On a server that can negotiate, use the Accept request header and add Vary: Accept, so caches do not hand AVIF to a browser that cannot render it. Keep <picture> for static hosting.
• Never lazy-load the LCP image or anything in the first viewport; give that image fetchpriority="high". Lazy-load images and iframes below the fold.
• Set width and height (or aspect-ratio) on every lazy image. MDN warns that unloaded images have a size of 0 and may never load if they do not intersect a visible area.
• Keep alt on the <img>; <source> elements add no accessible name.

Pitfalls

loading="lazy" sprinkled on every image, including the first viewport, produces a cascade of late requests. The lazy-loading distance is browser-defined and changes between versions; do not tune layout to it. fetchpriority is a hint, not an order. A <picture> whose <img> lacks srcset still serves one size to all screens; combine with the responsive-images article.