Images and page load

Why images dominate

A photograph from a modern phone is several thousand pixels wide and several megabytes in size. Displayed in a column eight hundred pixels across, the browser downloads all of it and throws most of it away, on every single visit.

Multiply that by a gallery and you have a page that takes many seconds to become usable on a mobile connection. Our page on page speed covers why those seconds cost visitors before anything is read.

Nothing else on a typical small business page is close. Scripts and fonts matter and they are usually measured in tens of kilobytes, while an unoptimized photograph is measured in megabytes.

Resize before anything else

Save each image at roughly the largest size it will actually be shown, and no larger. If a photograph appears in a column eight hundred pixels wide, sixteen hundred is generous headroom for high-density screens and four thousand is waste.

This single step frequently removes eighty or ninety per cent of the file with no visible difference, which makes it the highest-return action available on most sites.

Do it once, when the image is added. Resizing a whole library later is a tedious job that gets postponed, whereas resizing one photograph at upload is thirty seconds.

Then compress

Compression removes detail the eye does not notice. At sensible settings a photograph loses a further half its size while looking identical on a screen, and the difference is invisible outside a side-by-side comparison at full zoom.

Most website tools compress automatically now. Check yours does by looking at what a page actually downloads rather than assuming, because several popular platforms serve the original untouched.

Avoid compressing an already compressed file repeatedly. Each pass degrades it further, and a photograph saved and resaved several times acquires visible artifacts around edges.

The order that recovers the most

The list below is ordered by how much each step typically returns on a small business site. Doing the first two covers most of it; the rest are worth having and are not where the weight is.

• Resize to the displayed dimensions
• Compress at a sensible quality setting
• Serve a modern format where the platform supports it
• Load images below the first screen only when needed
• Set width and height on every image
• Remove images that show nothing
• Stop any autoplaying video

Set dimensions so nothing jumps

An image with no stated size makes the browser reflow the page when it arrives, so text a visitor was reading moves under them. It is one of the most irritating things a page can do.

Stating width and height lets the browser reserve the space before the file has loaded. Our page on layout shift covers why that is measured and what it costs.

This costs nothing in file size and fixes a fault visitors notice immediately, which makes it the cheapest item on the list above.

Load what is visible first

Images further down a page do not need to arrive before somebody has scrolled to them. Deferring them means the first screen is usable much sooner, which is the part that decides whether a visitor stays.

Do not defer the main image at the top. Delaying the one thing a visitor sees immediately makes the page feel slower rather than faster, which is the common mistake when this is applied indiscriminately.

Most platforms handle this automatically. Check that yours is doing it, and check that it is not doing it to the first image.

Measure your own pages

Open your heaviest page on a phone, on mobile data, and time how long until you can read something. That number is what your visitors experience and it is frequently several times what a desktop test suggests.

Then look at what the page actually downloaded and which files were largest. The answer is almost always an image, and usually one nobody remembers adding.

Our page on site performance covers the wider picture. Images are where the effort pays first and by a wide margin.