Fast image loading isn't one trick — it's a set of habits applied consistently. Here are the practices that keep a website quick as it scales.
Right-size every image
An image should never be much larger than the space it fills. Export at the exact display dimensions (accounting for high-density screens, roughly 2× for retina). This is the highest-impact habit and the one most often skipped.
Serve modern formats with fallbacks
Use WebP or AVIF as your primary format. The HTML <picture>
element lets you offer a modern format first and a JPG/PNG fallback for anything that
can't handle it, so you get the savings without breaking compatibility.
Make images responsive
With srcset and sizes, the browser downloads the most
appropriate resolution for each device. A phone should never download a desktop-sized
hero image.
Lazy-load what's off-screen
Add loading="lazy" to images below the fold. The browser defers them
until the user scrolls near, cutting initial load dramatically on long pages.
Cache aggressively
Images rarely change, so set long cache lifetimes and use a CDN. Returning visitors then load images from cache instantly, and the CDN serves everyone from a nearby edge.
Build a repeatable workflow
Standardise on: resize → convert to WebP → compress to ~80 → strip metadata → descriptive file name. When every image passes through the same routine, performance stops being something you fix later and becomes something you never break.