Images

What we check

We load the home page in a real browser and look at every image:

• Format: how much data is in old formats such as JPEG, PNG or GIF? From 500 KB there is a warning.
• Size: if an image is more than three times as wide as displayed and larger than 100 KB, it is much larger than necessary.
• Lazy loading: do at least three images further down the page load straight away, instead of only when scrolling? Lazy loading by JavaScript, where a placeholder stands in first, counts as lazy, and images embedded directly in the HTML (data: URI) load nothing. And the other way round: does an image that is visible when the page opens carry loading="lazy"? That delays it needlessly and is a warning.
• Width and height: are the size details missing in the HTML for at least three images?

In the report you also see the number of images and their total data volume.

Why it matters

On most websites images make up the largest part of the data volume, often more than 70 %. A single unprocessed smartphone photo of 4 MB can lengthen the loading time on a smartphone by seconds.

• Old formats are 30 to 50 % larger than modern ones such as WebP or AVIF, at the same quality.
• Images that are too large are loaded completely and then shrunk by the browser. The data was transferred for nothing.
• Without lazy loading the browser loads all images straight away, including those at the very bottom that many visitors never see. This delays what is supposed to be visible at the top.
• Lazy loading in the wrong place does harm: a visible image with loading="lazy" waits until the browser has calculated the layout instead of loading at once. If this hits the large header image, the Core Web Vitals value LCP gets worse directly. Many WordPress themes and page builders set the attribute on all images across the board.
• Without width and height the browser does not know how much space to reserve. The text jumps down as soon as the image appears.

How to fix it

Prepare images before uploading

1. Reduce images to the width needed, for screen-wide images about 1600 to 2000 pixels, for images in a column correspondingly less.
2. Save them as WebP or AVIF, or as JPEG with quality 75 to 85.
3. Free tools such as squoosh.app do both in the browser.

WordPress

Image plugins such as ShortPixel, Imagify, EWWW Image Optimizer or Converter for Media convert existing and new images to WebP automatically and shrink them. Since version 5.5 WordPress sets lazy loading and image sizes itself, provided the theme plays along. With page builders such as Elementor you find the option in the performance settings.

Wix, Jimdo, Squarespace

The builders optimise images on upload and deliver them in modern formats. Still, do not upload huge originals, and do without galleries with dozens of images on the home page.

Own code

<img src="team.webp" width="800" height="533" loading="lazy" alt="Our team in the workshop">

Set loading="lazy" only for images below the first screen. The large header image at the top should load immediately, ideally with fetchpriority="high". In WordPress you exclude the header image through the "Skip lazy loading" option of the image plugin, or you set loading="eager" in the block editor under "Advanced".

How to check it yourself

Open the developer tools (F12), "Network" tab, filter by "Img" and reload the page. Sort by size: everything above 300 KB deserves a second look.

Frequently asked questions

Does image quality suffer with WebP?

Not visibly. At the same quality WebP and AVIF achieve much smaller files than JPEG. At a quality level of 75 to 85 most people see no difference.

How large may an image be at most?

As a rule of thumb: a large header image under 200 KB, normal content images under 100 KB. In width, 1600 to 2000 pixels are usually enough for a screen-wide image.