Guide

Optimise your website's images so it loads fast

Images are half the weight of an average website. Four decisions, no redesign, and the page drops 40% to 70%.

On an average website, images account for 50% to 70% of everything the browser downloads. If your page is slow, that is almost always where the problem lives, not in the code. The good news is that fixing it does not require being a developer: four well-made decisions handle most of it.

1. Serve the size that is actually displayed

The number one mistake is uploading the photo exactly as it came out of the camera. A 4032 px wide image shown in a 760 px column downloads five times more data than needed. Before uploading anything, check the real width of the slot the image goes into and resize to that width, or double it if you want it crisp on high-density screens.

References that work well with most templates:

• Full-width hero image: 1920 px.
• Image inside an article: 1280 px.
• Card or listing: 800 px.
• Thumbnail: 400 px.
• Avatar: 200 px.

2. Use WebP

At the same perceived quality, WebP weighs 25% to 35% less than JPG, and every browser in use today understands it. Converting a site's images to WebP is by far the best effort-to-result improvement available: you change no design, you touch no code, and the page loses a third of its weight.

If your content management system does not convert automatically, you can batch-convert to WebP before uploading.

3. Lazy-load what is not visible

Images below the first screenful do not need to download until the visitor reaches them. One attribute does it:

<img src="photo.webp" alt="…" loading="lazy" decoding="async">

With one important exception: the main image of the first screenful must NOT have loading="lazy". That is precisely the one you want to arrive as fast as possible, because it is usually what Google measures as Largest Contentful Paint. Give that one fetchpriority="high" instead.

4. Reserve the space so the page does not jump

If an image does not declare its dimensions, the browser does not know how much room to leave and the content jumps when loading finishes. That jump is measured (Cumulative Layout Shift) and it costs you. The fix is one line: always set width and height on the tag, using the file's real values. CSS can still scale the image; what matters is that the browser knows the aspect ratio from the very first moment.

The three metrics Google looks at

A workflow you can repeat

1. Gather every image you are about to upload in one folder.
2. Batch-resize to the width from the table above.
3. Convert them to WebP at quality 78–82.
4. Rename them with descriptive words and hyphens: blue-running-shoe.webp, not IMG_4821.webp. The filename is a real signal for image search.
5. Upload them and write an alt that describes the image for people who cannot see it. It is not keyword filler: it is accessibility, and it ranks as a side effect.

Steps 2 and 3 happen in a single pass in the compressor: pick a maximum size, WebP as the output format and a quality level, drop your thirty images and download the ZIP.

What to expect

On real sites, applying these four points typically leaves the page 40% to 70% lighter. A home page that weighed 4 MB drops to 1.2 MB, and the time until something appears halves on mobile connections. No redesign needed: it is pure file preparation.