Image optimisation

Images are usually the heaviest part of a page. The main techniques are modern formats (WebP and AVIF files are typically much smaller than JPEG or PNG at similar quality), resizing to the displayed size with srcset and sizes so phones never download desktop-sized images, sensible compression, lazy loading for images below the fold with loading='lazy', and SVG for logos and icons.

Setting width and height, or an aspect ratio, reserves space and prevents layout shift. The main hero image is often the page's LCP element, so it should load early rather than lazily, often with fetchpriority='high'. Much of this can be automated: next/image in Next.js, Astro's image component, image CDNs such as Cloudinary, imgix or Cloudflare Images, and libraries such as sharp in a build step.