पाठ 23 / 25

Mobile के लिए 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।

<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 है।

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