Responsive Images

Status: Production Ready ✅ Last Updated: 2026-01-14 Standards: Web Performance Best Practices, Core Web Vitals

Quick Start

Basic Responsive Image

<img src="/images/hero-800.jpg" srcset=" /images/hero-400.jpg 400w, /images/hero-800.jpg 800w, /images/hero-1200.jpg 1200w, /images/hero-1600.jpg 1600w " sizes="(max-width: 640px) 100vw, (max-width: 1024px) 90vw, 1200px" alt="Hero image description" width="1200" height="675" loading="lazy" />

Hero Image (LCP)

<img src="/images/hero-1200.jpg" srcset=" /images/hero-800.jpg 800w, /images/hero-1200.jpg 1200w, /images/hero-1600.jpg 1600w " sizes="100vw" alt="Hero image" width="1600" height="900" loading="eager" fetchpriority="high" />

Configuration

Recommended Image Sizes

Use Case Widths to Generate Sizes Attribute

Full-width hero 800w, 1200w, 1600w, 2400w 100vw

Content width 400w, 800w, 1200w (max-width: 768px) 100vw, 800px

Grid cards (3-col) 300w, 600w, 900w (max-width: 768px) 100vw, 33vw

Sidebar thumbnail 150w, 300w 150px

Lazy Loading Rules

Image Position loading fetchpriority Why

Hero/LCP eager

high

Optimize LCP, prioritize download

Above fold (not LCP) eager

omit Load normally

Below fold lazy

omit Defer until near viewport

Off-screen carousel lazy

omit Defer until interaction

Common Patterns

Full-Width Responsive Image

<img src="/images/banner-1200.jpg" srcset=" /images/banner-600.jpg 600w, /images/banner-1200.jpg 1200w, /images/banner-1800.jpg 1800w, /images/banner-2400.jpg 2400w " sizes="100vw" alt="Full width banner" width="2400" height="800" loading="lazy" class="w-full h-auto" />

Grid Card Image (3 columns)

<img src="/images/card-600.jpg" srcset=" /images/card-300.jpg 300w, /images/card-600.jpg 600w, /images/card-900.jpg 900w " sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw" alt="Card image" width="900" height="600" loading="lazy" class="w-full h-auto" />

Fixed Aspect Ratio Container

<div class="aspect-[16/9] overflow-hidden"> <img src="/images/video-thumbnail-800.jpg" srcset=" /images/video-thumbnail-400.jpg 400w, /images/video-thumbnail-800.jpg 800w, /images/video-thumbnail-1200.jpg 1200w " sizes="(max-width: 768px) 100vw, 800px" alt="Video thumbnail" width="800" height="450" loading="lazy" class="w-full h-full object-cover" /> </div>

Modern Formats (WebP + AVIF)

<picture> <source srcset=" /images/hero-800.avif 800w, /images/hero-1200.avif 1200w, /images/hero-1600.avif 1600w " sizes="100vw" type="image/avif" /> <source srcset=" /images/hero-800.webp 800w, /images/hero-1200.webp 1200w, /images/hero-1600.webp 1600w " sizes="100vw" type="image/webp" /> <img src="/images/hero-1200.jpg" srcset=" /images/hero-800.jpg 800w, /images/hero-1200.jpg 1200w, /images/hero-1600.jpg 1600w " sizes="100vw" alt="Hero image" width="1600" height="900" loading="eager" fetchpriority="high" /> </picture>

Art Direction (Different Crops)

<picture> <source media="(max-width: 640px)" srcset=" /images/product-portrait-400.jpg 400w, /images/product-portrait-800.jpg 800w " sizes="100vw" /> <source media="(min-width: 641px)" srcset=" /images/product-landscape-800.jpg 800w, /images/product-landscape-1200.jpg 1200w, /images/product-landscape-1600.jpg 1600w " sizes="(max-width: 1024px) 90vw, 1200px" /> <img src="/images/product-landscape-1200.jpg" alt="Product image" width="1200" height="675" loading="lazy" /> </picture>

Error Prevention

Always Include Width and Height

Problem: Layout shift when images load (poor CLS score)

<!-- ❌ WRONG - causes layout shift --> <img src="/image.jpg" alt="Image" loading="lazy" />

<!-- ✅ CORRECT - browser reserves space --> <img src="/image.jpg" alt="Image" width="800" height="600" loading="lazy" />

Source: Web.dev - Optimize CLS

Don't Lazy Load LCP Images

Problem: Delayed LCP, poor Core Web Vitals score

<!-- ❌ WRONG - delays LCP --> <img src="/hero.jpg" alt="Hero" loading="lazy" />

<!-- ✅ CORRECT - prioritizes LCP --> <img src="/hero.jpg" alt="Hero" loading="eager" fetchpriority="high" />

Source: Web.dev - Optimize LCP

Use Width Descriptors (w), Not Density (x)

Problem: Browser can't choose optimal image for viewport

<!-- ❌ WRONG - only considers DPR --> <img src="/image.jpg" srcset="/image.jpg 1x, /image@2x.jpg 2x" alt="Image" />

<!-- ✅ CORRECT - considers viewport + DPR --> <img src="/image-800.jpg" srcset=" /image-400.jpg 400w, /image-800.jpg 800w, /image-1200.jpg 1200w " sizes="(max-width: 768px) 100vw, 800px" alt="Image" width="800" height="600" />

Exception: Density descriptors are appropriate for fixed-size images like logos.

Always Include Alt Text

Problem: Fails accessibility, SEO, and screen readers

<!-- ❌ WRONG --> <img src="/product.jpg" />

<!-- ✅ CORRECT - descriptive alt text --> <img src="/product.jpg" alt="Red leather messenger bag with brass buckles" />

<!-- ✅ CORRECT - decorative images use empty alt --> <img src="/decorative-line.svg" alt="" role="presentation" />

Aspect Ratio with object-fit

Problem: Image stretches or squashes when container size differs from image dimensions

<!-- ❌ WRONG - image distorts --> <div class="w-full h-64"> <img src="/image.jpg" alt="Image" class="w-full h-full" /> </div>

<!-- ✅ CORRECT - maintains aspect ratio --> <div class="w-full h-64"> <img src="/image.jpg" alt="Image" class="w-full h-full object-cover" /> </div>

Quick Reference

Sizes Attribute Patterns

<!-- Full width --> sizes="100vw"

<!-- Content width (max 800px) --> sizes="(max-width: 768px) 100vw, 800px"

<!-- Sidebar (fixed 300px) --> sizes="300px"

<!-- 2-column grid --> sizes="(max-width: 768px) 100vw, 50vw"

<!-- 3-column grid --> sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"

<!-- Responsive with max-width --> sizes="(max-width: 640px) 100vw, (max-width: 1024px) 90vw, 1200px"

Common Aspect Ratios

Ratio CSS Use Case

16:9 aspect-[16/9]

Video thumbnails, hero images

4:3 aspect-[4/3]

Standard photos

3:2 aspect-[3/2]

DSLR photos

1:1 aspect-square

Profile pictures, Instagram-style

21:9 aspect-[21/9]

Ultrawide banners

object-fit Values

Value Behavior Use Case

cover

Fill container, crop edges Card images, backgrounds

contain

Fit inside, preserve all content Logos, product photos

fill

Stretch to fill Avoid unless necessary

scale-down

Smaller of contain or original size Mixed content sizes

Format Comparison

Format Quality File Size Browser Support Use Case

JPEG Good Medium 100% Photos, complex images

PNG Lossless Large 100% Logos, transparency

WebP Excellent Small 97%+ Modern browsers, photos

AVIF Excellent Smallest 90%+ Cutting-edge, fallback required

Recommended Strategy: AVIF → WebP → JPEG fallback using <picture>

Resources

• Web.dev: Responsive Images

• MDN: Responsive Images

• Web.dev: Serve Images in Modern Formats

• Web.dev: Optimize Cumulative Layout Shift

• Cloudflare Images Documentation

Token Efficiency: ~70% savings by preventing trial-and-error with srcset/sizes syntax Errors Prevented: 6 common responsive image issues documented above