Images that load fast on a business site

Open a product page with ten photographs on a phone and you can often see the problem: the text arrives, then the images fill in one by one, the page jumps, and the part you wanted moves. Images are the usual cause of a slow business site, and fixing them is mostly a matter of discipline.

Why images matter

web.dev, Google’s web performance guide, says images make up the largest share of page weight and requests. It cites a typical page of around 2 MB where images account for nearly half. (Those figures date from 2022; the pattern still holds.) Making images smaller is the main way to show the finished picture sooner.

Five habits that help

1. Do not publish camera originals. A phone or camera photograph can be several times larger than any screen needs. Give your developer the originals, then expect smaller copies to be made for the page.

2. Let the screen choose the size. With srcset and sizes, the page offers the browser several sizes of the same image and says how much of the screen it will fill. The browser then picks the right one: a small file for a phone, a bigger one for a large or high-resolution screen. web.dev notes the browser also weighs things like what is already cached, so the choice is not guaranteed, but the principle is that no one downloads more than their screen can use.

3. Pick a sensible format. JPEG is the most common format for photographs. WebP and AVIF are newer formats that can make files smaller; web.dev describes them and the cases where PNG is the better choice. Your developer should convert, not you.

4. Reserve the space. Give every image its width and height, so the browser knows how much room to keep before it arrives. web.dev’s guidance on layout shift says to always include these on images and video. Without them, text jumps down when the picture loads, which is what the Cumulative Layout Shift measure counts.

5. Load what is below the screen later. Images that are far down the page can wait until the visitor scrolls near them (loading="lazy"). web.dev warns against doing this to the main image at the top, which should load as early as possible and can be marked as high priority.

Describing images

Every image that carries meaning needs a short text description, called alt text. For a product photograph, say what it shows, for example “Fibreglass tank with a lined interior, 5,000 litre”, not “image1.jpg” or a string of keywords. Purely decorative images should have empty alt text, so a screen reader skips them. Good descriptions help people who cannot see the image, and search engines read them too.

What to give your developer

Original photographs at the best quality you have, one per product or subject.
A logo as a vector file if you have one (SVG, or the file the designer made), not a screenshot.
Permission to publish: pictures of other people or other companies’ property need it.
A short list of what each important photograph shows.

A real example

The portfolio screenshots on this site are published as WebP files in several widths, with their dimensions set, and the browser chooses the right one for the screen. For the same reasons, the two live catalogue websites listed on the Work page are worth opening on your phone before you hire anyone: if images there load cleanly, you will see how they were handled.