Guide · Building & launching
Image optimisation for faster websites
Images are usually the heaviest part of a web page and the most common reason it loads slowly. A single photo uploaded straight from a phone or camera can weigh more than the rest of the page combined. Image optimisation keeps quality where visitors can see it and removes weight they cannot — and much of it can be automated so editors do not have to think about it.
[ 01 ]
In short
In short
- 01
Serve modern formats such as WebP or AVIF, with fallbacks where needed.
- 02
Resize images to the size they are displayed at, and serve smaller versions to smaller screens.
- 03
Compress to a quality level where the difference is not visible.
- 04
Lazy-load images below the first screen, but never the main image at the top.
- 05
Always specify dimensions or aspect ratio to prevent layout shifts.
[ 02 ]
Guide
Formats
- WebP — supported by all modern browsers; typically much smaller than JPEG at similar quality.
- AVIF — often smaller still, with broad support in modern browsers; encoding is slower.
- JPEG — universal fallback for photos.
- PNG — for images needing lossless quality or transparency; often much heavier than needed for photos.
- SVG — for logos, icons and simple graphics; scales perfectly and is usually tiny.
A common approach is to generate WebP or AVIF automatically and let the browser choose via the <picture> element or content negotiation.
Size and responsive images
An image displayed 800 pixels wide does not need to be 4000 pixels wide. Generate several sizes of each image and let the browser pick the right one for the screen using srcset and sizes. Phones then download small versions, while large screens get sharp ones.
Compression
Compression levels can often be reduced considerably before any difference is visible. Test on real screens: product photos where detail matters may need higher quality than decorative backgrounds.
Lazy loading
Images further down the page can load only when the visitor scrolls near them, using the browser's native loading="lazy" attribute. Do not lazy-load the main image in the first screen — it delays the Largest Contentful Paint. See Core Web Vitals for business owners.
Dimensions and layout stability
Set width and height attributes or a CSS aspect ratio for every image, so the browser reserves space before the image loads. Without it, text jumps down as images appear, causing mis-taps.
Alt text
Alternative text describes the image for screen readers and search engines. Write it for meaningful images — product photos, diagrams, team photos — describing what is shown. Decorative images should have empty alt text so screen readers skip them. Alt text should be in the page's language. See alt text.
Delivery
- Serve images through a CDN with long cache lifetimes. See CDN.
- Use an image service or build step that generates formats and sizes automatically.
- Avoid loading images from slow third-party hosts.
Workflow for editors
Editors should not have to resize images by hand. A good setup:
- accepts large uploads and generates optimised versions automatically;
- warns about extremely large files;
- asks for alt text when an image is added;
- crops consistently for product images or thumbnails.
E-commerce
Product catalogs with hundreds of images benefit most. Consistent dimensions, automatic optimisation, zoom images loaded only on request, and thumbnails sized for the grid make a noticeable difference to speed and conversion. See product page checklist.
[ 03 ]
FAQ
Frequently asked questions
Will optimisation make our photos look worse?
Not if done well. The goal is to remove data the eye cannot see. Check results on real devices and adjust quality for important images.
Should we use a CDN for images?
For most sites, yes. A CDN delivers images from locations near the visitor and handles traffic peaks.
Do image file names matter for SEO?
Descriptive file names help a little for image search and organisation. Alt text and the surrounding content matter more.