Responsive Images
Status: Production Ready ✅ Last Updated: 2026-01-14 Standards: Web Performance Best Practices, Core Web Vitals
Quick Start
Basic Responsive Image
Hero Image (LCP)
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
Grid Card Image (3 columns)
Fixed Aspect Ratio Container
Modern Formats (WebP + AVIF)
Art Direction (Different Crops)
Error Prevention Always Include Width and Height
Problem: Layout shift when images load (poor CLS score)
Source: Web.dev - Optimize CLS
Don't Lazy Load LCP Images
Problem: Delayed LCP, poor Core Web Vitals score
Source: Web.dev - Optimize LCP
Use Width Descriptors (w), Not Density (x)
Problem: Browser can't choose optimal image for viewport
Exception: Density descriptors are appropriate for fixed-size images like logos.
Always Include Alt Text
Problem: Fails accessibility, SEO, and screen readers
Aspect Ratio with object-fit
Problem: Image stretches or squashes when container size differs from image dimensions
Quick Reference Sizes Attribute Patterns
sizes="100vw"
sizes="(max-width: 768px) 100vw, 800px"
sizes="300px"
sizes="(max-width: 768px) 100vw, 50vw"
sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
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
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