Images और pictures element

Basic responsive images

CSS की एक पंक्ति images को responsive बनाती है: img { max-width: 100%; height: auto; } — image अपने container में फिट होने के लिए scale होती है लेकिन कभी अपने natural size को exceed नहीं करती।

Resolution-aware images के लिए srcset

Screen density (1x, 2x) या viewport width के आधार पर अलग-अलग image sizes serve करें ताकि mobile पर bandwidth बचाई जा सके।

<!-- Serve appropriate size based on device -->
<img
  src="hero-600w.jpg"
  srcset="hero-400w.jpg 400w, hero-800w.jpg 800w, hero-1200w.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  alt="Hero image"
>

Picture element के साथ art direction

का उपयोग करके प्रत्येक breakpoint पर अलग-अलग crops या पूरी तरह अलग-अलग images दिखाएँ।

<picture>
  <!-- Mobile: tall portrait crop -->
  <source media="(max-width: 600px)" srcset="hero-portrait.jpg">
  <!-- Tablet: wider crop -->
  <source media="(max-width: 1200px)" srcset="hero-landscape.jpg">
  <!-- Desktop: full image -->
  <img src="hero-fullwidth.jpg" alt="Hero">
</picture>

Lazy loading और aspect ratio

Image loading को defer करने के लिए loading="lazy" का उपयोग करें। Images load होने से पहले space reserve करने के लिए CSS aspect-ratio property का उपयोग करें, layout shift से बचाता है।