# Images और pictures element — उत्तरदायी और मोबाइल-प्रथम डिज़ाइन

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

> max-width: 100% के साथ images को responsive बनाएँ, device-aware image loading के लिए srcset का उपयोग करें, और art direction के लिए <picture> element का leverage करें।

## 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 बचाई जा सके।

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

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

```html
<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 से बचाता है।