How to optimize images for faster pages

Images are usually the heaviest part of a web page. Optimising them is often the quickest way to make a site faster.

Why it matters

Large images slow down Largest Contentful Paint, one of Google’s Core Web Vitals, and use up visitors’ mobile data.

Images without width and height make the page jump as they load (Cumulative Layout Shift). Images that load before they are needed delay the content people see first.

How to fix it

1. Resize images to the largest size they are actually displayed at, and compress them. Aim for under 200 KB for most images.
2. Serve modern formats: WebP or AVIF are typically 25–50% smaller than JPEG or PNG at the same quality.
3. Use srcset and sizes so phones download smaller versions than desktops.
4. Add loading="lazy" to images below the fold, but not to the main image at the top of the page.
5. Set width and height attributes (or a CSS aspect-ratio) on every image so the browser reserves space.
6. Fix or remove images that fail to load.

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