Optimizing website images: WebP, AVIF and lazy loading

In most of the sites we analyze, images are the number one cause of slowness: they weigh more than everything else on the page combined. The good news is that optimizing your website's images is the performance intervention with the best ratio between effort and result: modern formats like WebP and AVIF, correct sizes and lazy loading are enough to transform loading times.

Why images weigh so much

The problem almost always starts upstream: photos uploaded to the CMS straight out of the camera or the smartphone, at resolutions enormous compared to the space they will occupy on the page, in formats designed for print rather than the web. The browser downloads everything, including the pixels it will never display.

The consequences aren't just aesthetic. The user experience metrics Google uses to evaluate pages are directly affected by images: the largest element in the initial viewport is often a photo, and until it arrives the page looks empty. On mobile, with variable connections, the difference between a well-kept site and a neglected one comes down precisely to the kilobytes of the images.

WebP and AVIF: which to choose

WebP and AVIF are the two modern formats that replace JPEG and PNG for web use. In short:

• WebP is the reliable compromise: it compresses better than JPEG at the same perceived quality, supports transparency like PNG and is handled by all current browsers;
• AVIF generally compresses even better, especially at medium-low quality levels, and is now widely supported; encoding is slower, which only matters if you generate many images on the fly.

The strategy we usually adopt: AVIF where the workflow produces it without friction, WebP as the main or fallback format, and the original JPEG or PNG as a further fallback. In HTML this is done with the picture element, which lets the browser pick the best format it can read; on the most common CMSs there are plugins and services that convert and serve the modern formats automatically, without touching the media library.

A warning: the modern format is no substitute for compression. A badly exported image stays heavy even in AVIF. Set the quality to the minimum the eye accepts: for secondary photos you can go quite low before noticing differences.

Before the format: the right dimensions

The biggest gain, even before the format, comes from serving images at the right size for the screen viewing them. A phone doesn't need the image prepared for a desktop monitor.

The tools are standard: the srcset and sizes attributes let you declare multiple versions of the same image, and the browser picks the appropriate one. Modern CMSs generate the variants on upload by themselves; you do have to verify that the theme actually uses them, because it's common to find themes that load the original regardless.

Two habits that prevent problems:

• upload to the CMS images already resized to a reasonable maximum for your layout, not the original camera files;
• always specify width and height (or the aspect ratio) in the HTML, so the page doesn't jump around while loading.

Lazy loading done right

Lazy loading defers the loading of off-screen images until the user scrolls near them. Today it's a native browser feature: the loading attribute set to lazy is enough, no extra libraries.

The mistake to avoid is applying it across the board: the main image at the top of the page should never be lazy-loaded, because it's the first thing the user needs to see and delaying it worsens exactly the metric you want to improve. The rule is simple: images visible on opening load immediately, everything else can wait.

A CDN completes the picture, serving files from the node closest to the visitor, and a cache policy with long expirations for static resources: an image downloaded once shouldn't be requested again on every visit.

How to verify the results

Optimizing without measuring is guessing. The checking loop we run on every project:

1. test the main pages (home, a category page, a product page or an article) with the performance analysis tools freely available online, before and after the interventions;
2. look at the total image weight per page and how many requests fire on first load;
3. check in the report which images are flagged as oversized or in outdated formats;
4. repeat the test on mobile, which is where problems show up first.

On the websites and eCommerce stores we build, this pipeline is set up from the start: automatic conversion to modern formats, responsive variants generated by the CMS and selective lazy loading. The result is that the client uploads the photos and the system does the rest, without depending on the discipline of whoever publishes.

Is your site loading slowly because of images?

If your site's pages take too long to open, chances are much of the problem can be fixed quickly. We build and optimize websites and eCommerce stores with automated image pipelines. Book a free call: we'll analyze your pages and tell you how much speed there is to gain.