Responsive Images: picture, srcset & Lazy Loading

srcset and sizes

srcset lists image files by width and sizes tells the browser how wide the image will display, so it downloads the smallest suitable file.

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Mountain lake at sunrise" width="800" height="533" loading="lazy">

picture and formats

<picture> offers different formats or crops, falling back to the <img> inside.

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Team at work" width="1200" height="600">
</picture>

Always set width and height so the browser reserves space and avoids layout shift. Do not lazy-load the main above-the-fold image.

Quick check

Quick check: Which attribute defers loading of offscreen images?

• loading="lazy"
• decoding="sync"
• rel="preload"
• async