Heavy website images: where to begin optimising

A photograph prepared for print can end up unchanged in a small card. The visitor downloads more data than that space needs. But shrinking every image in the same way is not the answer either: a cover, diagram and product photograph serve different purposes.

List the significant files

Open the page and identify which images account for the most downloaded data. Compare file dimensions with their actual display size. Separately note the first large cover and images farther down the text: readers encounter them at different times.

Keep originals separate from optimised versions. You can then change dimensions without repeatedly compressing an already processed file. Check labels in diagrams and details that matter when choosing a product.

Prepare suitable variants

Different screens may need different sizes. The web.dev guide to image performance explains formats and ways to reduce loading costs. Choose after comparing quality at the actual display size, not merely the kilobyte count.

Specify image dimensions in the markup so the browser can reserve space. Apply lazy loading deliberately: the first-screen cover and an illustration at the end of an article should not necessarily wait for the same conditions.

Compare one page before and after

Repeat the test under equivalent conditions. Look beyond a tool’s final score to when the main content appears and whether elements shift. If an image becomes unreadable, restore its quality and find another way to reduce the data.