Responsive Images: picture, srcset और Lazy Loading

srcset और sizes

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

<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 करता है।

<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 न करें।

त्वरित जाँच

त्वरित जाँच: कौन-सा attribute offscreen images का loading टालता है?

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