Speed Up Your Website by Optimising Images: A Practical Guide

Images are usually the heaviest part of a page. Steps ordered by impact to speed up your site and improve its Google ranking.

Page speed is a stated Google ranking factor, and mobile visitors leave if loading takes a few seconds. Images often make up more than half a page's weight — so they are the fastest route to a quicker site.

Steps ordered by impact

1) Don't serve images larger than they display

A 4000px-wide image shown in an 800px slot makes visitors download 25× the data needed. Resize to the real maximum width — usually 1920 for full-width images and 1200 for article images.

2) Use WebP

25–35% smaller than JPG at near-identical quality, supported by every modern browser.

3) Quality 75–82

The visual difference between 100 and 80 is imperceptible, while size drops sharply. Try 65 for large background images.

4) Lazy loading

Add loading="lazy" to every image below the first screen. It loads only as the visitor approaches. One attribute, big effect.

5) Declare dimensions in the markup

Write width and height on every image. This prevents the page from jumping while loading — a metric Google measures (CLS).

6) Don't lazy-load the hero image

The large image at the top must not be lazy — delaying it slows LCP, which Google relies on.

How to measure

Open Google's PageSpeed Insights and paste your page URL. Focus on:

• LCP — time to render the largest element. Target: under 2.5 seconds.
• CLS — layout stability. Target: under 0.1.
• The "Properly size images" and "Serve images in next-gen formats" sections — they name exactly which images need work.

A quick workflow for an existing site

1. Collect your site's images into one folder.
2. Drop the whole folder into the converter: WebP, quality 80, max width 1920.
3. Download the ZIP and replace the images, updating extensions in your code.
4. Re-measure in PageSpeed and compare.