Image optimisation

Example

A toy shop uploads its photos exactly as they arrive from the photographer: 4,000 pixels wide and about 2.5 MB each. A category page shows 24 products, so a phone downloads 24 × 2.5 = 60 MB to display cards 180 pixels wide. The same photos, scaled to the size they are shown at and saved as WebP, weigh about 40 KB each: 24 × 40 KB ≈ 1 MB. On a 10 Mbit/s mobile connection, that is the difference between roughly 48 seconds of downloading and under one. On screen, the page looks exactly the same.

Why it matters for a business

Heavy images are the most common reason a mobile site is slow, and the usual cause of a poor LCP, because the main photo is normally the largest element on the page. Getting images right is a large part of mobile optimisation. The fix leaves the design alone and often buys more speed per hour of work than anything else. It has to become routine, though: if every new product goes up at full size, the problem is back within a year. So the site itself should resize and convert every image at upload, whoever uploads it.

Image optimisation is not photo retouching. Retouching changes how a picture looks — the background, the colour, the blemishes; optimisation changes how much it weighs, with no visible difference.

How to improve it

• Each image exists in several sizes, and the browser picks the one that fits the screen (the srcset and sizes attributes).
• WebP or AVIF, with a JPEG fallback where one is still needed.
• Compression set so the difference cannot be seen on screen.
• A set width and height, so the page does not jump as images arrive.
• Lazy loading for images below the first screen, never for the main one.
• Processing on upload, so the result does not depend on who adds the product.

Images are the first thing we look at in website speed optimisation.