Our blog homepage was loading 18-20 MB of images—11 PNG files at 1.4-2.0 MB each. On mobile connections, pages took 60-90 seconds to load. We needed a 90%+ file size reduction without sacrificing quality.

WebP format with responsive images solved this. By serving WebP to modern browsers and appropriately-sized images to different devices, we reduced our homepage from 20 MB to 1.5 MB—a 92% reduction.

The Implementation

The core change was replacing simple <img> tags with <picture> elements that serve multiple formats and sizes:

// Before: Single large PNG for all devices
${post.imageUrl ? `<img src="${escapeHtml(post.imageUrl)}" 
     alt="${escapeHtml(post.title)}" 
     class="post-image">` : ''}

// After: Responsive WebP with PNG fallback
${post.imageUrl ? `<picture>
    <source 
        srcset="${escapeHtml(post.imageUrl.replace('.png', '-800.webp'))} 800w,
                ${escapeHtml(post.imageUrl.replace('.png', '-1200.webp'))} 1200w"
        type="image/webp"
        sizes="(max-width: 768px) 100vw, 600px">
    <source 
        srcset="${escapeHtml(post.imageUrl.replace('.png', '-1200.png'))} 1200w"
        type="image/png"
        sizes="(max-width: 768px) 100vw, 600px">
    <img src="${escapeHtml(post.imageUrl.replace('.png', '-1200.png'))}" 
         alt="${escapeHtml(post.title)}" 
         class="post-image"
         loading="lazy">
</picture>` : ''}

This code tells browsers: try WebP first (modern browsers), pick the right size for the device (800px for mobile, 1200px for desktop), and fall back to PNG for older browsers.

Results

Before optimization:

• Homepage: 18-20 MB
• Load time on 3G: 60-90 seconds
• Load time on 4G: 15-20 seconds

After optimization:

• Homepage: 1.5 MB (92% reduction)
• Load time on 3G: 3-5 seconds
• Load time on 4G: 1-2 seconds

Individual image sizes dropped from 1.4-2.0 MB to 40-120 KB depending on device. Mobile users get 800px images (around 50 KB), desktop users get 1200px images (around 100 KB), and everyone gets WebP unless their browser doesn't support it.

Browser Support

WebP works in Chrome, Firefox, Safari 14+, and Edge—covering 95%+ of users. The remaining 5% get the PNG fallback automatically. The <picture> element handles this gracefully with no JavaScript required.