# Responsive Images: picture, srcset और Lazy Loading — HTML Fundamentals: Structure, Forms और Accessibility

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

> srcset, sizes और picture से सही image size व format परोसें, और loading=lazy से offscreen images टालें।

## srcset और sizes

`srcset` image files को width के अनुसार सूचीबद्ध करता है और `sizes` बताता है कि image कितनी चौड़ी दिखेगी, ताकि browser सबसे छोटी उपयुक्त file download करे।

```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 और formats

`<picture>` अलग formats या crops देता है और अंदर के `<img>` पर fallback करता है।

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

हमेशा `width` और `height` सेट करें ताकि browser जगह आरक्षित करे और layout shift से बचे। मुख्य above-the-fold image को lazy-load न करें।

त्वरित जाँच

**Quiz:** कौन-सा attribute offscreen images का loading टालता है?

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

*Answer:* loading="lazy". Native lazy loading image के viewport के पास आने तक रुकता है।