# Image optimization for mobile — Responsive & Mobile-First Design

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

> 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.

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

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