Image optimisation: how to keep your site fast
Images make a site look good, but they are also the most common reason a page loads slowly. A single unoptimised photo can weigh more than the entire rest of the page. The good news is that a few simple habits keep a site both attractive and fast, without giving up any visible quality.
Why images slow a site down
Every image has to be downloaded to the visitor's device. The larger the file, the longer the page takes to load, especially on a mobile connection.
A common mistake is uploading a photo straight from the camera at 4000 pixels wide and several megabytes, when it is only displayed at 800 pixels on screen.
Slow loading hurts in two directions: visitors leave before the page appears, and Google lowers your position because speed is a ranking factor.
Images also drive the Core Web Vitals metric LCP, which measures how quickly the largest element on the page appears, often a big hero image.
Choose the right format
The format decides how much a file weighs at the same quality. Outdated formats are needlessly heavy.
- WebP is today's default choice: the same quality as JPEG but a file 25-35% smaller. Every modern browser supports it.
- AVIF goes further and produces an even smaller file, which is especially useful for large photos.
- PNG should be kept for elements that need transparency and for logos, not for photos, where it is very heavy.
- SVG is best for icons and simple graphics because it is a vector and stays sharp at any size.
Size and dimensions
Never upload an image larger than it is displayed. If an element is 600 pixels wide, a 3000 pixel file adds nothing but extra weight.
Use responsive images, where the browser picks the right size for the screen. That way a phone gets a small version and a desktop a larger one.
Compress the file before uploading. Tools like Squoosh or TinyPNG cut the size several times over with no visible quality loss.
Set a sensible target: most content images should stay under 200 KB and hero images under 400 KB.
Loading and layout stability
Lazy loading means images below the fold are only loaded once the user scrolls to them. This speeds up the first paint noticeably.
Give every image a width and height or an aspect ratio. Otherwise the layout jumps while loading, which harms the CLS metric and annoys the user.
Do not lazy-load the first-screen hero image, because it needs to appear immediately. Lazy loading belongs to the images further down.
Add a meaningful alt text to every image. It helps accessibility, gives Google context and brings traffic from image search.
A simple workflow to follow
Good image management needs no expensive software, just a consistent habit with every image.
- Reduce the dimensions to the displayed size.
- Convert to WebP or AVIF format.
- Compress the file and check the weight is reasonable.
- Add alt text plus width and height.
If the site runs on WordPress, an image optimisation plugin automates much of this, but you are still responsible for the original being in the right dimensions.
FAQ
Which image format is best for a website?+
For photos the best choice today is WebP, which gives the same quality as JPEG in a much smaller file, and AVIF is smaller still. Keep PNG for elements that need transparency and SVG for icons. The main thing is to avoid a heavy unoptimised JPEG or PNG used as a photo.
How large can an image file be?+
A good rule is to keep content images under 200 KB and large hero images under 400 KB. Far more important than the exact number is that the image is not loaded larger than its displayed size and is compressed before upload. That keeps the page fast on mobile too.
What is lazy loading and should I use it?+
Lazy loading only loads images below the fold once the user scrolls to them, which speeds up the first paint of the page. It is worth using on all content images, but not on the first-screen hero image, which must appear at once. Most modern platforms enable it by default.