Modern images for fast websites: WebP, AVIF, srcset and lazy loading without the usual mistakes

When a website loads slowly, images are usually to blame. A camera photo uploaded as it came, a banner exported as PNG or a gallery that downloads forty photos at once can weigh more than the rest of the page combined. And the main image is often the element the browser uses to judge how fast the page feels.

This article is about performance: how heavy your images are, when they load and how to stop the page jumping around while they do. It is not the same as image SEO (alt text, file names), which is a separate topic.

WebP and AVIF versus JPEG and PNG

JPEG works well for photos and PNG for graphics with transparency, but both are heavier than the modern alternatives. WebP compresses better than JPEG and PNG and supports transparency. AVIF usually compresses even further, although it takes longer to generate. Current browsers support both.

For logos, icons and simple illustrations, use SVG: it weighs very little and looks sharp at any size. If you need to cover older browsers, the picture element lets you offer AVIF or WebP with a JPEG fallback. And do not overdo the compression: quality that is too low shows in gradients and edges, and the extra saving rarely pays off.

Correct dimensions and srcset

The most common mistake is serving a 4000-pixel-wide image for a slot that takes up 600 on screen. The browser downloads all of it and shrinks it when displaying. The simple rule: work out the maximum width it will appear at and, for high-density screens, double it. Resize before you upload.

Because the same image appears smaller on a phone than on a desktop, srcset lets you offer several versions (say 400, 800 and 1200 pixels wide) and let the browser pick what it needs. It goes together with sizes, which tells the browser how wide the image will be at each screen size. Without sizes, the browser assumes the image fills the full width and often picks a version larger than necessary.

Lazy loading

Lazy loading means not downloading an image until the visitor is about to see it while scrolling. Today it is switched on with a native attribute, loading="lazy", with no extra libraries. It is very useful for images far from the top of the page: galleries, long product listings, lower sections.

The classic mistake is applying it to everything. The main image (the banner or header, the first thing people see) must not be lazy-loaded: if you defer it, the browser leaves it for later exactly when it is most urgent. That image should load as early as possible, and it often helps to mark it with fetchpriority="high". The same goes for any image visible without scrolling.

width and height: stop the page from jumping

If an image does not declare its dimensions, the browser does not know how much space to reserve until it has downloaded. When it arrives, it pushes the text down and the content jumps. That is what the CLS (cumulative layout shift) metric measures, one of the Core Web Vitals, and it is very annoying: you tap a button and it moves right then.

The fix is to add width and height attributes with the image's real dimensions. With them, the browser works out the aspect ratio and reserves the space before downloading. If your CSS makes the image fluid (max-width: 100% and height: auto), it will still scale properly on any screen.

How to check it

Open your browser's developer tools, go to the Network tab and filter by images: you will see the type, the transferred size and when each one is requested. From a terminal, curl -I on an image URL shows its content-type and content-length. PageSpeed Insights or Lighthouse flag oversized images and improvable formats, and tell you which element is the main one for loading. If it appears there with loading="lazy", you know what to fix.

Frequently asked questions