Image optimisation for websites: formats, sizes and srcset for sharp, fast images
Images are usually the heaviest part of a page, so image optimisation for websites has the biggest payoff of any speed work. The essentials: never ship a photo larger than it's displayed, use a modern format such as WebP or AVIF with sensible compression, give the browser several sizes with srcset, lazy-load what's below the fold, and load the hero image first.
Formats
| Format | Best for | Notes |
|---|---|---|
| JPEG | Photographs | Universal support; good quality around 70 to 80 on most encoders' scales |
| PNG | Screenshots, flat graphics needing exact pixels or transparency | Lossless and large for photos; don't use it for photographs |
| WebP | Photos and graphics, with or without transparency | Typically smaller than JPEG at similar quality; supported by all current major browsers |
| AVIF | Photos, especially large ones | Often smaller again than WebP; slower to encode; supported by current major browsers |
| SVG | Logos, icons, simple illustrations | Vector, sharp at any size; can contain scripts, so only use files you trust |
| GIF | Very little now | Short animations are far smaller as video |
On WebP versus AVIF: AVIF usually produces smaller files for photographs at similar visual quality, while WebP encodes faster and is supported by more tools. If your tooling can produce both, serve AVIF with a WebP or JPEG fallback using the picture element. If it can produce only one, WebP is a safe default.
Sizes: the step most sites skip
A photo straight off a phone is often 4000px or more wide and several megabytes. Displayed in a 600px card, most of those pixels are wasted. Resize to about twice the largest size at which the image is displayed, to stay sharp on high-density screens, and no more. A hero shown full width rarely needs more than 2000px to 2400px; a card image rarely more than 1200px.
srcset and sizes
Responsive images let the browser choose. srcset lists the same image at several widths, such as photo-640.webp 640w, photo-1280.webp 1280w, photo-1920.webp 1920w. sizes tells the browser how wide the image will be shown at different screen widths, such as (max-width: 860px) 100vw, 50vw. The browser combines them with the screen's pixel density and downloads one file. Get sizes roughly right: if it's wrong, phones download desktop images.
Loading
- Lazy-load below the fold.
loading="lazy"on images further down the page defers them until the visitor scrolls near. - Never lazy-load the hero. The largest image in the first screen is often what Largest Contentful Paint measures. Load it eagerly and consider
fetchpriority="high". - Reserve the space.
widthandheightattributes, or CSSaspect-ratio, stop the layout shifting as images arrive. See image aspect ratios for websites. - Decode off the main path.
decoding="async"lets the browser decode images without holding up other work. - Use video for motion. A short MP4 or WebM loop is usually a fraction of an equivalent GIF.
A workflow for a small site
- Choose the photos, then crop each to the site's ratios.
- Resize: around 2400px on the long edge for full-width images, 1200px for cards and halves, 600px for thumbnails.
- Export as WebP (or JPEG) at moderate quality, comparing at 100% zoom; most people can't see the difference between quality 75 and 90, but the file size can halve.
- Strip location and camera data from photos you publish.
- Write alt text for each as you go, rather than at the end; see how to write alt text.
- Test the page on a phone over a mobile connection, not only on office Wi-Fi.
Images in Anticode
Photos and videos you add to an Anticode build are checked by their first bytes, so the type comes from what the file actually is rather than its name, and stored under your account. Anticode stores the upload as it is: it doesn't resize, compress or convert it, so the steps above are worth doing before you upload. Export as WebP, JPEG or PNG: AVIF and SVG files aren't accepted as uploads. The curated photo library that design-engine pages can use is served responsively, with several widths in srcset, a sizes hint, lazy loading below the hero and a high fetch priority on the hero itself.
Questions people ask
What is the best image format for websites?
For photos, WebP is a safe default and AVIF is often smaller still. JPEG remains fine where tools are limited. Use SVG for logos and icons.
How big should website images be?
In pixels, about twice the size they're displayed at. In kilobytes, a card photo can often be well under 200KB and a full-width hero a few hundred.
Should I lazy-load every image?
No. Lazy-load images below the first screen, but load the hero and anything visible on arrival straight away.