Image & Media Optimization — Cheat Sheet

FE Lead prep · ref 06

The frame & the four disciplines

Images = LCP element on ~85% desktop / ~76% mobile pages + the heaviest bytes. On a hotel site, images ARE the page.

1. Right format (AVIF→WebP→JPEG) · 2. Right size (srcset/sizes) · 3. Right loading (lazy below / prioritize LCP) · 4. Reserve space (width/height).

Format — AVIF/WebP

WebP ≈ 25–35% < JPEG · AVIF ≈ 50% < JPEG.
<picture> = format fallback; browser takes first supported <source type>, <img> = floor.
SVG icons/line-art · PNG lossless transparency.

<picture>
 <source type="image/avif" srcset="h.avif">
 <source type="image/webp" srcset="h.webp">
 <img src="h.jpg" width=800 height=600 alt>
</picture>

Size — srcset / sizes

srcset w-descriptors = menu: file + its real px width (800w=800px wide). Same image, many sizes.
sizes = rendered slot width so browser picks before layout (preload scanner needs it).
Math: needed = slot(sizes) × DPR → smallest file ≥ that. (33vw slot on a big laptop → tiny file; small phone @ DPR3 → big file.)
<picture media> = art direction = browser uses first matching media = different crop per breakpoint.
Decide: srcset = browser picks size; picture-media = you pick a different image.
srcset works on BOTH <img> and <source>. Plain <img srcset sizes> is enough for resolution — only use <picture> for format (source type) or crop (source media).
Attr roles: srcset/sizes/type/media → on <source>; alt/width/height/loading/fetchpriority/decoding → only on <img> (the required fallback). Browser uses first <source> matching type+media.
CDN twist: image CDN negotiates format via Accept header → format axis gone, back to plain <img>.

<img srcset="h-400 400w, h-800 800w,
  h-1600 1600w"
 sizes="(max-width:600px) 100vw, 33vw"
 width=800 height=600 alt>

Loading — opposite moves for two images

Image	Do	Why
Below fold	`loading="lazy"` + `decoding="async"`	save bytes, free network
LCP (hero/1st)	`fetchpriority="high"`, never lazy (opt. `preload`)	it's the metric — Google test cut LCP 2.6→1.9s

Network-aware (adaptive) loading

Save-Data: on header → CDN returns lighter image, same URL. No JS, explicit intent → preferred. Must Vary: Save-Data (cache).
navigator.connection: saveData, effectiveType (slow-2g…4g), downlink, rtt → smaller srcset / skip hero video. Chromium-only + estimate → enhancement, not a gate.
@media (prefers-reduced-data) → skip CSS bg images (decorative). Limited support.
React: react-adaptive-hooks (useSaveData/useNetworkStatus).

CLS — reserve the box

Always width+height → browser derives aspect-ratio, reserves space before load.
CSS-sized → set aspect-ratio; responsive → img{height:auto} + attrs.

At scale (the Lead move)

Image CDN (Cloudinary / imgix / Cloudflare Images / Akamai) — one upload → format/size/quality/crop per request, edge-cached, content negotiation.
Framework <Image> (next/image) → srcset, lazy, dims, blur baked in → correct by default.
LQIP / blur / dominant-color placeholder for perceived speed.
CI budget + lint banning dimensionless/oversized <img> so it can't regress across teams.

Lead one-liners (memorize)

Frame “On a hotel site the images are the page — LCP element and heaviest bytes. Image strategy is the main perf lever, not a detail.”

Loading “Lazy below the fold, but the LCP image gets fetchpriority=high and is never lazy — a blanket lazy rule catching the hero is the most common own-goal.”

CLS “Every image ships with width/height so the box is reserved before the bytes land — that's most of CLS gone.”

Scale “At our scale it's a pipeline: an image CDN deriving format/size per request + an <Image> component + a CI image budget — not hand-authored <picture>.”

Adaptive “For data-sensitive markets I serve lighter images to Save-Data users at the CDN — explicit intent, works everywhere. navigator.connection is Chromium-only and a guess, so it's enhancement, never a gate; and I Vary: Save-Data.”

Sources: MDN — fix image LCP · web.dev — fetchpriority · web.dev — responsive images · web.dev — image CDNs · HTTP Archive — Media

Don't fail the interview

1. Images = LCP element ~80% of pages + heaviest bytes → the #1 lever on a photo site.

2. NEVER lazy-load the LCP image. Blanket lazy rule catching the hero = LCP own-goal. Eager+fetchpriority=high above, lazy below.

3. Wrong sizes wastes everything — must match real rendered width or browser picks too-big a file.

4. srcset = resolution switching (same image); different crop needs <picture media> (art direction). Don't reach for <picture> when a plain <img srcset> suffices — only for format or crop.

5. Always width/height — dimensionless images shoving content = #1 image CLS.

6. Don't AVIF-everything — SVG icons, PNG lossless transparency; match format to content.

7. At scale = pipeline, not per-PR nagging: CDN + <Image> component + CI budget.

8. Network-aware = lead with Save-Data header at CDN (explicit, works everywhere; Vary: Save-Data). navigator.connection is Chromium-only + a guess → enhancement, never the gate.