image optimization: size, format, deliver, verify

web · 2026-10-13 · 7 min

image guides list formats; owners need a workflow. 73% of mobile LCP elements are images (web almanac via web.dev) — this page is the highest-ROI performance work in small business web. the pipeline rivals describe but never order: size, format, compress, deliver, verify.

step 1: size to the slot (the giant's share)

4000px uploads for 800px slots are the classic sin — measure display size (devtools, responsive breakpoints), export at 1x + 2x for retina (never beyond). responsive images (srcset/sizes — the browser picks; wordpress does this automatically when fed sane uploads). crop with intent (hero crops ≠ gallery crops — art direction beats auto-squash). most sites halve image weight here alone, free.

step 2: format + compress

photos: WebP (or AVIF where supported — web.dev: both beat JPEG/PNG generally), fallback JPEG. graphics/logos: SVG (infinite sharpness, tiny weight) or PNG when transparency + compatibility demand. compress ~80% quality (invisible difference, visible bytes). strip metadata (EXIF GPS bloat — privacy bonus). tools: squoosh (free, visual), CMS plugins (bulk, automated), build pipelines (ongoing). verify visually at 100% — artifacts on faces/products cost more than bytes save.

step 3: deliver smart, verify

lazy-load below fold (hero NEVER lazy — LCP's commonest self-inflicted wound). preload/priority the hero (discoverable in HTML, fetchpriority where supported). CDN for images (nearby servers, format negotiation). dimensions set (width/height attributes kill CLS). before/after: pagespeed LCP + total weight recorded (undocumented optimization didn't happen). the system around it: speed sequence. wordpress specifics: wordpress slow.

FAQ

WebP vs AVIF?

AVIF compresses better, encodes slower, supports narrower — WebP the safe default today, AVIF for hero-grade savings with fallbacks. either beats legacy JPEG/PNG by miles.

how small should images be?

hero under ~200KB, content images under ~100KB, thumbnails under ~30KB — budgets, not laws. weight follows slot size; measure yours.

pipeline (inventory to verify)

| step | rule | |---|---|---| | size | resize to slot (e.g. 1600px hero, 800px card) | | format | AVIF/WebP with fallback; photo vs logo vs transparency | | deliver | srcset + sizes, picture fallback, width/height set | | lazy | below-fold only — never lazy-load LCP hero | | verify | retest LCP before/after (bytes + ms) |

73 pct of mobile LCPs are images (web almanac via web.dev). biggest win first: speed up. lab vs field: pagespeed.