Optimising Images for Your Website — the Underestimated Bottleneck

When a website loads slowly, it's usually not the server and not the code. It's the images. And almost always one single mistake.

The mistake that happens everywhere

A photo comes out of the camera or from the photographer at 4000 pixels wide and gets uploaded exactly like that. It's then displayed in an area 600 pixels wide. The browser still downloads all 4000 pixels and scales them down. The visitor waits for pixels they will never see.

What actually helps

• Save at the size you need. If an image is displayed at most 800 pixels wide, roughly 1600 pixels is enough to stay sharp on high resolution displays too. Anything beyond that is wasted.
• Use a modern format. WebP delivers considerably smaller files than JPEG at the same quality. The difference is often more than half.
• Compress before uploading. Almost nobody sees a difference between quality 100 and 80, but the file shrinks substantially.
• Lazy loading for everything below the fold. Images that only appear on scroll don't need to load during the first render.
• Specify width and height in the code. Otherwise the layout jumps as images arrive, and that's exactly what Google penalises.

The side effect for search

Every image needs alt text describing what's shown. That's first a question of accessibility, but it simultaneously helps image search — a channel most small businesses leave completely unused.

If you'd like to know how much of your load time goes to images, we're happy to measure it for you, no obligation.