The most expensive image on the internet is on your homepage

Across the audits we ran last year, one finding appeared more often than any other, on more kinds of business, in more countries, than anything else we check for. It was not a subtle configuration problem. It was a picture.

A photograph, usually of the premises or the product, exported straight out of a camera or a design tool at full resolution, uploaded to the homepage, and displayed at about a fifth of its actual size. Three, four, sometimes eleven megabytes. Downloaded in full by every single visitor, on every single visit, including the ones on a phone with two bars of signal outside your shop.

Why it survives every redesign

Because it looks perfect. That is the whole reason.

Nobody who works on the site ever sees the problem. You look at your homepage on a good laptop over office wifi, with the image already cached from the last time you looked, and it appears instantly. The person who built it saw the same thing. The designer who signed it off saw the same thing. Every redesign since has faithfully carried the enormous file across to the new template, because nothing about it looks broken.

The people who experience it are the ones who left before it loaded, and they do not fill in the contact form to tell you about it.

What it actually costs

Largest Contentful Paint is the measurement that matters here: how long until the biggest thing on the screen has finished drawing. On most of the sites we audit, that biggest thing is the hero image, and it is single-handedly responsible for the majority of the delay.

A representative case from February: a 3.4 MB PNG, 3840 pixels wide, displayed in a slot 720 pixels wide. Mobile LCP measured 4.9 seconds at the 75th percentile. After conversion to AVIF at 1440 pixels, the same page measured 2.8 seconds. No other change. No redesign, no new host, no framework migration.

Two point one seconds, recovered in about half an hour of work.

The fix, in order

• Resize before you optimise. Serving a 3840 pixel image into a 720 pixel slot is the actual error. Compression settings are a rounding error next to it. Export at roughly twice the display width to stay sharp on high density screens, and stop there.
• Use a modern format. AVIF first, WebP as the fallback, JPEG underneath that. On a photograph this typically removes another half to two thirds of what remains.
• Set width and height attributes. Without them the browser has no idea how much room to leave, so the page visibly jumps as the image arrives. That jump is measured too, as Cumulative Layout Shift, and it is the thing that makes people misclick.
• Do not lazy-load the hero. Lazy loading is for images below the fold. Applying it to the first thing on the page delays the exact element you are being measured on. We see this backwards more often than you would expect.

If you are on a platform

Shopify, Squarespace, Wix and WordPress with a decent image plugin will all do the format conversion and the resizing for you — but only from the file you gave them, and only up to the dimensions you asked for. Uploading an 11 MB original and inserting it at full width defeats all of it. The platform is not going to decide on your behalf that you meant something smaller.

How to check yours in two minutes

Open your homepage on a phone, on mobile data, with the site's cache cleared. Not on wifi. Not on the laptop. That is the test, and it is the only one your customers ever run.

If you want the number rather than the feeling, any audit that reports Largest Contentful Paint will tell you which element is responsible. On roughly a third of the sites we look at, the answer is one image, and the work is measured in minutes.