IMAGES ARE WEIGHING DOWN YOUR SITE: FORMATS, SIZES AND LAZY LOADING, EXPLAINED

When I measure a slow site, images generally account for 60 to 80 percent of the page weight. Good news: it's also the item that gets fixed fastest, often without touching anything else.

The problem in one example

A product photo from a recent camera: 4,000 pixels wide, 3.8 MB. It is displayed in a 300-pixel thumbnail on mobile. The phone downloads the 3.8 MB, decodes it, then throws 99 percent away. Multiply by the twenty thumbnails on the page: 76 MB for a page that should weigh 2. On a store site I took over, the image grids weighed 56 MB; they weigh 2.2 MB today, with an identical rendering.

1. The right size

An image must be delivered at the size it is displayed, at most twice as wide for high-density screens. The browser knows how to pick the right version if offered several (srcset attribute): 480 pixels for a phone, 960 for a tablet, 1600 for a large screen. WordPress generates these sizes automatically on upload; the theme still has to use them, which is not always the case.

2. The right format

JPEG remains fine for photos, PNG is only for images with transparency or screenshots. WebP is 25 to 35 percent lighter than JPEG at equal quality and works everywhere since 2020. AVIF goes further still, 40 to 50 percent, but generates more slowly. For a standard site: WebP everywhere, AVIF on large hero images if your tool allows it. Quality 80 is invisible to the eye; beyond that, you pay weight for nothing.

3. Lazy loading

A product page with forty images only needs the first four on load. The others load as the visitor scrolls. It's an attribute (loading="lazy") that WordPress has added on its own since 2020, except on images inserted by certain page builders or carousels. Beware of the opposite: never lazy-load the hero image, the one that counts for LCP.

4. The hero image

This is the one Google times. It must be served first, at the right size, in WebP, with the preload attribute, and never lazy-loaded. On mobile, we often serve a portrait crop rather than the wide version scaled down: half the pixels, and a framing that shows what matters.

5. Declared dimensions

An image without declared width and height makes the layout jump when it arrives: the text moves down, the button shifts. That's Google's CLS signal, and the most annoying behaviour for a visitor who was about to click. Two attributes to add, and nothing moves any more.

6. Videos

A 30 MB hero video played on a loop ruins everything else. Properly compressed, it weighs 3 to 5 MB in 1080p; on mobile, a 480p version is enough and loads lazily; the first-frame image appears instantly in its place. An embedded YouTube video loads a 500 KB player even if nobody clicks: a thumbnail that only loads the player on click solves the problem.

How to know where you stand

The total page weight and the number of images are in the free audit, in thirty seconds. Above 3 MB for a homepage, there is work to do; above 10, it is the top priority. Reprocessing a media library of a thousand images is done by script in a day, not by hand. It is the first action of the Slow website service.

Frequently asked questions