# Mobile के लिए image optimization — उत्तरदायी और मोबाइल-प्रथम डिज़ाइन

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

> Quality को sacrifice किए बिना mobile bandwidth को reduce करने के लिए compress, resize, और modern formats (WebP) को serve करें।

## Image size और format

Mobile के लिए 4000x3000px image 2MB पर overkill है। Mobile के लिए ~600x450px (~100-200KB) compress करें, desktop के लिए ~1200x900px करें। WebP (20-30% छोटा) PNG/JPEG fallback के साथ use करें। Below the fold images को lazy load करें।

## WebP के साथ responsive image

Modern format को fallback के साथ serve करें, और अलग-अलग viewports के लिए multiple sizes।

```html
<picture>
  <!-- WebP modern format -->
  <source srcset="image-600w.webp 600w, image-1200w.webp 1200w" type="image/webp">
  <!-- Fallback to JPEG -->
  <source srcset="image-600w.jpg 600w, image-1200w.jpg 1200w">
  <img src="image-1200w.jpg" alt="Responsive image" loading="lazy">
</picture>
```

## Modern image formats

WebP 20-30% छोटा है। AVIF और भी छोटा है लेकिन कम supported है।

```html
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Image">
</picture>
```