Pick the right image format in 3 checks

Pick the right image format in 3 checks
AVIF vs WebP vs JPEG isn't religion; it's a per-image decision by content + savings.

— Step 1: Photographic + large: AVIF (~50% smaller than JPEG, ~20% under WebP) — worth the slower encode.
— Step 2: Already small / simple graphics: WebP; AVIF overhead can lose at tiny sizes.
— Step 3: Serve with + AVIF/WebP/JPEG sources so old browsers still work.
— Step 4: Set width/height (CLS) and sizes for srcset (right candidate).
— Step 5: Verify the byte saving in the Network tab, per breakpoint.

Example: a 240KB JPEG hero -> 96KB AVIF, LCP load 520ms -> 210ms.

Takeaway: target hero images under 100KB at the displayed resolution.