How images load fast

How it works

A photo straight from the camera or a picture library is often several thousand pixels wide, while it may be shown at 800. The browser still loads the whole file and then scales it down. Every unnecessary pixel costs loading time.

bytereport looks at images from three angles:

• Size. An image over 200 KB gives a warning; if the largest is over 1 MB, an error.
• Format. If at least two larger images (from 30 KB) arrive as JPEG, PNG or GIF and make up more than half of the image data, you get a hint. WebP and AVIF are much smaller at the same quality and are shown by every current browser.
• Lazy loading. With loading="lazy" the browser only loads an image when it comes near the screen. If a page has eight or more images and none of them is lazy, you get a hint; if the very first image is lazy, a warning.

What matters

• The size it is shown at. With srcset you offer several sizes and the browser picks the right one for the screen.
• WebP or AVIF. With the picture element, browsers get the modern format and anything else the fallback.
• Never delay the first large image. It is often the largest element on the first screen and decides the LCP. Give it fetchpriority="high" instead.
• State width and height. Otherwise the content jumps when the image arrives, see CLS.

<img src="photo-800.webp"
     srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
     sizes="(max-width: 800px) 100vw, 800px"
     loading="lazy" width="800" height="600" alt="…">

<picture>
  <source srcset="photo.avif" type="image/avif">
  <img src="photo.jpg" width="800" height="600" alt="…">
</picture>

How to set it up

Many CMSs create several sizes on upload and write srcset and loading="lazy" into the HTML themselves. Conversion to WebP or AVIF is handled by an image plugin or a CDN that converts images automatically. Whoever uploads images should bring them to a sensible size first. Whether the first image loads lazily is usually decided by the theme; your agency can change that.