# Responsive Images: picture, srcset & Lazy Loading — HTML Fundamentals: Structure, Forms and Accessibility

Source: https://www.geekswithgeeks.com/en/html/html-responsive-images

> Serve the right image size and format with srcset, sizes and picture, and defer offscreen images with loading=lazy.

## 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.

```html
<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.

```html
<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

**Quiz:** Which attribute defers loading of offscreen images?

- [x] loading="lazy"
- [ ] decoding="sync"
- [ ] rel="preload"
- [ ] async

*Answer:* loading="lazy". Native lazy loading waits until the image is near the viewport.