Image Delivery
Images are often the largest payload — good delivery improves performance and accessibility together.
01 — Purpose
Images dominate page weight
Good image delivery improves performance and accessibility — users download only what they need.
Unoptimised hero photos and retina PNGs are still the fastest way to blow budgets. Delivery covers format, size, dimensions, loading strategy, and alt text together.
See the images pattern for markup, alt, and review checklist detail.
02 — Principles
Right bytes for the viewport
Serve appropriate dimensions and formats — not the largest file in the CMS.
-
responsive images —
srcsetandsizesfor art direction and density - modern formats (AVIF, WebP) with fallbacks where needed
- compression appropriate to content — lossy for photos, careful for UI
03 — Practice
Delivery checklist
Stable, fast, accessible — together.
- width and height (or aspect-ratio) on every content image — prevents CLS
- lazy-load below-the-fold images — not LCP hero assets
- decode async where it helps main thread — measure on target devices
-
meaningful
alt— decorative images use empty alt, not missing alt - CDN caching and sensible cache headers for static assets
<img
src="/images/hero-800.webp"
srcset="/images/hero-400.webp 400w, /images/hero-800.webp 800w"
sizes="(min-width: 48rem) 800px, 100vw"
width="800"
height="450"
alt="Team reviewing frontend standards on a projector screen"
fetchpriority="high"
/>04 — Avoid
Image delivery failures
Oversized assets hurt everyone — especially on mobile networks.
- 4000px-wide heroes displayed at 600px CSS width
- lazy-loading the LCP image — delays largest paint
- layout shift when images load without reserved space
- loading every gallery thumbnail at full resolution upfront
05 — Close
Fast images help everyone
Less data, stable layout, usable alt text — one discipline, three wins.
Run image audits on templates with real content — not placeholder 20KB SVGs. Pair with Core Web Vitals and the performance review checklist.