Responsive Images: Serve the Right Size Every Time

Mobile users download 3MB hero images when they only need 300KB. Here's how to fix that.

---

The Problem

You have a 1920px hero image. On a mobile phone:

• Screen width: 390px
• Image displayed at: 390px
• Image downloaded: 1920px
• Wasted bandwidth: 75%

This happens on every page load. Multiply by thousands of users.

---

The Solution: Responsive Images

Serve the right size for each device.

Mobile (390px) → 400px image
Tablet (768px) → 800px image
Desktop (1920px) → 1920px image

---

The srcset Attribute

<img 
  src="hero-800.jpg"
  srcset="
    hero-400.jpg 400w,
    hero-800.jpg 800w,
    hero-1200.jpg 1200w,
    hero-1920.jpg 1920w
  "
  sizes="(max-width: 600px) 400px,
         (max-width: 1200px) 800px,
         1200px"
  alt="Hero image"
>

How it works:

1. Browser sees srcset with width descriptors (400w, 800w)
2. Browser knows its viewport width
3. Browser calculates which image to download
4. Browser downloads only that image

---

Image Widths to Generate

Standard Sizes

Breakpoint	Image Width
Mobile	400px
Tablet	800px
Desktop	1200px
Large	1600px
XL	1920px

---

Generate Responsive Images

Python Script

from PIL import Image
from pathlib import Path

def generate_responsive(input_path, output_dir, widths=[400, 800, 1200, 1600, 1920]):
    img = Image.open(input_path)
    output_path = Path(output_dir)
    output_path.mkdir(exist_ok=True)

    filename = Path(input_path).stem

    for width in widths:
        if img.width >= width:
            ratio = width / img.width
            height = int(img.height * ratio)

            resized = img.resize((width, height), Image.Resampling.LANCZOS)

            if resized.mode == 'RGBA':
                resized = resized.convert('RGB')

            output = output_path / f"{filename}_{width}.webp"
            resized.save(output, 'WEBP', quality=85)

            print(f"✓ {filename}_{width}.webp ({width}x{height})")

generate_responsive('hero.jpg', './responsive', widths=[400, 800, 1200, 1600, 1920])

---

HTML Patterns

Hero Image

<img 
  src="hero-1200.jpg"
  srcset="
    hero-400.jpg 400w,
    hero-800.jpg 800w,
    hero-1200.jpg 1200w,
    hero-1920.jpg 1920w
  "
  sizes="100vw"
  alt="Hero image"
>

---

CDN Approach

Many CDNs handle responsive images automatically:

Cloudflare Polish

1. Enable Polish in Cloudflare dashboard
2. Images auto-convert to WebP
3. Auto-resize based on device

---

The Impact

Before responsive images:

• Mobile: Download 1920px image for 390px display
• Bandwidth: 3MB per page load
• Load time: 8 seconds on 3G

After responsive images:

• Mobile: Download 400px image
• Bandwidth: 50KB per page load
• Load time: 0.5 seconds on 3G

Result: 98% bandwidth reduction, 94% faster load time

---

Summary

1. Generate multiple sizes: 400, 800, 1200, 1600, 1920px
2. Use srcset: Browser picks the right size
3. Use sizes: Tell browser image dimensions
4. Use WebP: Smaller than JPEG
5. Consider CDN: Automatic optimization

---

Implemented responsive images on 100+ sites. Questions? Leave a comment.