Lesson 23 / 25

Image optimization for mobile

Compress, resize, and serve modern formats (WebP) to reduce mobile bandwidth without sacrificing quality.

Image size and format

A 4000x3000px image at 2MB is overkill for mobile. Compress to ~~600x450px (~~100-200KB) for mobile, ~1200x900px for desktop. Use WebP (20-30% smaller) with PNG/JPEG fallback. Lazy load images below the fold.

Responsive image with WebP

Serve modern format with fallback, and multiple sizes for different viewports.

<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 is 20-30% smaller. AVIF is even smaller but less supported.

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