Opens in a new tab

How to optimise website images without losing useful detail

Published: 22 February 2019
Topic: Website Performance

Image optimisation is about sending an appropriately sized, visually acceptable file for the space where it appears. Uploading a huge original and making it look small with styling does not necessarily reduce what the visitor downloads.

Choose dimensions for the actual layout

A thumbnail, a product photograph and a full-width banner have different requirements. Keep a high-quality original separately, then prepare website versions at sensible dimensions. For screenshots, check that text remains readable at the intended display size.

Compare formats rather than assuming

WebP and AVIF can produce smaller photographic images than older formats, but the best choice depends on the picture, export settings and acceptable quality. Compare the resulting files visually and by size. JPEG remains useful for photographs, while PNG can be appropriate when its specific lossless or transparency characteristics are needed.

Avoid converting the same compressed image repeatedly. Export from the best original you have, and inspect gradients, faces, logos and fine text for visible damage.

Let the browser choose a suitable version

WordPress can generate multiple image sizes. Use attachment-based images in your layout so responsive image information can be supplied, and check that the rendered page is actually using it. An image’s file extension alone does not tell you whether the page is efficient.

Load images at the right time

Images further down a long page can usually be lazy-loaded. The main image visible immediately on arrival needs different treatment: delaying it can make the page feel slower. Reserve the image’s space in the layout to reduce movement while it loads.

Check the result

Review the page on desktop and mobile, inspect the downloaded image sizes and confirm that important detail survives. Useful alternative text describes the image’s purpose; it should not be a list of SEO keywords.

4161 final
Back to Growth Hub