Responsive images and performance

In plain English

Images are usually the heaviest part of a page, so how you load them matters. Width and height attributes reserve space before the image arrives, which prevents layout shift, the jump that happens when content moves. A srcset lists the same image at several sizes and sizes tells the browser how wide it will render, so it picks the smallest file that still looks sharp. loading="lazy" waits to fetch an image until it is near the screen, and modern formats like WebP and AVIF are much smaller than older ones. Do not lazy-load the image people see first, because it is needed immediately.

Step by step

1. 1Decide how much space the image will occupy in your layout.
2. 2Add width and height so the page reserves that space.
3. 3Export the image at two or three sizes and list them in srcset.
4. 4Add sizes so the browser knows how wide the image renders.
5. 5Add loading="lazy" to images that sit below the first screen.

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800"
  height="450"
  alt="Sunrise over the hills"
  loading="lazy"
  decoding="async"
>

Common mistakes

• Leaving off width and height and watching the page jump as images load.
• Serving one huge image to every device instead of using srcset.
• Lazy-loading the main image at the top of the page and delaying what people see first.
• Skipping WebP or AVIF and shipping files several times larger than needed.