Website images: formats, sizes and lazy loading

Images slow websites down more than anything else, and they are the easiest thing to fix: serve WebP or AVIF, sized for the specific screen, with width and height set, and lazy-load everything below the fold. The main above-the-fold image, by contrast, should load as early as possible — the LCP metric depends on it.

Here are the formats, responsive sizes, lazy loading and how to automate it all so editors never have to think about pixels.

Why do images slow a site down?

Images slow a site down because they usually make up most of a page's weight: a camera photo weighs megabytes but is shown as a thumbnail on a phone. The browser downloads unnecessary data, the main image appears late and the layout jumps if dimensions are missing.

Typical problems:

• camera or design originals served without compression or resizing;
• outdated formats that weigh several times more than modern ones;
• one large image for every screen, from phones to wide monitors;
• lazy-loading the main above-the-fold image;
• missing width and height, causing layout shifts.

We covered how all this affects speed scores in Core Web Vitals.

Which image format should you choose?

For photos choose AVIF or WebP, for icons and logos SVG, and keep JPEG and PNG as fallbacks for rare old browsers. Modern formats weigh noticeably less at the same visual quality.

Format	What it suits	Notes
AVIF	Photos, banners	The most compact; slower to encode
WebP	Photos and graphics with transparency	A good balance of size and encoding speed
SVG	Logos, icons, diagrams	Vector, crisp on any screen
JPEG	Fallback for photos	Heavier, supported everywhere
PNG	Fallback for graphics with transparency	Heavy for photos

Photo: Unsplash

How do you serve images at the right size?

Serve the right size with the srcset and sizes attributes: the browser picks the appropriate version by screen width and pixel density. For that, each image is cut into several sizes in advance or on the fly.

<picture>
  <source type="image/avif" srcset="/img/hero-800.avif 800w, /img/hero-1600.avif 1600w" sizes="100vw">
  <img
    src="/img/hero-1600.webp"
    srcset="/img/hero-800.webp 800w, /img/hero-1600.webp 1600w"
    sizes="100vw"
    width="1600" height="900"
    alt="The team discussing a project"
    fetchpriority="high">
</picture>

Markup rules

1. Always set width and height — the browser reserves space and the layout does not jump.
2. Give the main above-the-fold image high fetch priority and no lazy loading.
3. Give every other image loading="lazy" so it loads when the user scrolls to it.
4. Fill in alt for meaningful images — it matters for accessibility and search.

How do you automate image processing?

Automate processing so editors upload images as they are and the system compresses them, converts them to modern formats and cuts the sizes. There are two main approaches: processing on upload and an image CDN that transforms on the fly.

Options:

• on upload — a background job creates the needed sizes and formats and saves them to storage;
• on the fly — a CDN or image service takes parameters in the URL (width, format, quality) and caches the result;
• at build time — the framework optimises images that live in the site's code during the build.

We covered storing and serving files in file uploads and storage.

How do you check that your images are in good shape?

Check images in the browser's developer tools and in Lighthouse: they show which images are heaviest, which load earlier than needed and which lack dimensions. Test on a slow network and a phone, not on your work computer.

What to check:

• the weight of all images on key pages and the heaviest ones;
• formats: no photos as PNG and no uncompressed originals;
• that the main image is not lazy-loaded;
• that every image has dimensions and meaningful ones have alt;
• that phones receive smaller versions, not originals.

In short

• Images are the main source of excess page weight and the easiest place to speed things up.
• Photos go in AVIF or WebP; icons and logos in SVG.
• Serve several sizes via srcset and sizes and always set width and height.
• The main above-the-fold image gets high priority; the rest load lazily.
• Automate compression and resizing on upload or through an image CDN.