How to optimise images for a faster website.

Why image optimisation matters

On most websites, images make up more of the page weight than anything else. The biggest image, usually the hero banner or a product photo, is very often the element Google measures for Largest Contentful Paint (LCP), the loading part of Core Web Vitals. Slow images mean a slow-feeling site and a worse Core Web Vitals score.

Which image format should I use?

• AVIF: usually the smallest files for photos. Supported by all major current browsers, though slower to create.
• WebP: slightly larger than AVIF but still much smaller than JPEG, with near-universal browser support. The safe default.
• JPEG: the fallback for photos when you can't use the formats above.
• PNG: only for screenshots or graphics that need transparency and sharp edges. Never for photos.
• SVG: for logos, icons and simple illustrations. Tiny files that stay sharp at any size.

The best approach is to serve AVIF where it's supported, with WebP or JPEG as a fallback. Many image CDNs and website platforms do this for you automatically. By hand, it looks like this:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Plumber fixing a boiler"
       width="1600" height="900" fetchpriority="high">
</picture>

What size should website images be?

Never upload a 5,000-pixel photo straight from a camera or phone to show it 800 pixels wide. Resize images to roughly the largest size they're displayed at, or about twice that for sharp results on high-resolution screens.

• Full-width hero images: around 1,600 to 2,000 pixels wide.
• Content and blog images: around 1,200 pixels wide.
• Thumbnails and cards: the displayed size, times two.

Use srcset and sizes so phones download a smaller version than desktops. As a rule of thumb, aim for most images to be well under 200 KB.

How to compress images

Compression removes data you can't see. A quality setting around 70 to 80 usually looks identical to the original at a fraction of the size. Good options include free tools like Squoosh, an image compression plugin for your CMS, or an image CDN that compresses and converts on the fly.

Lazy loading: what it is and when to use it

Lazy loading tells the browser to wait before downloading images until the visitor scrolls near them. Add loading="lazy" to images below the fold and the first view of the page loads faster. See how to add lazy loading.

How to speed up your LCP image

1. Add fetchpriority="high" to the main above-the-fold image, and only that one image.
2. Make sure it isn't lazy-loaded.
3. If it's a CSS background image, preload it with a link rel="preload" tag, because the browser finds background images late.
4. Serve it from your own domain or a fast CDN, at the right size and in a modern format.

Stop images making the page jump

Always set width and height on images, or give their container a CSS aspect-ratio. The browser then reserves the right space before the image arrives, so text doesn't jump down the page. That jumping is what Cumulative Layout Shift (CLS) measures.

Image SEO basics

• Use descriptive file names, such as boiler-repair-leeds.webp rather than IMG_2041.jpg.
• Write alt text that describes the image for people who can't see it. See how to write alt text.
• Put images near related text, so search engines understand the context.

Want to see which of your images are slowing you down? Run a free scan and Pagelyt lists your page weight, LCP and missing lazy loading.

Frequently asked questions

Written by Sudharma at Pagelyt.