📸 Responsive Images

Serve the right image size for every device

📚 Theory: Why Responsive Images Matter

The Problem

A typical desktop image might be 2000px wide (1-2MB). On a mobile phone (320px wide), that image is 6 times larger than needed. The user downloads 2MB they don't need, wasting data and slowing down the page.

Real Numbers

Mobile user (320px): Needs a 400px image (~50KB)
Tablet user (768px): Needs a 800px image (~150KB)
Desktop user (1920px): Needs a 1920px image (~500KB)

Without responsive images: Every user downloads 500KB+. Mobile users waste 10x more data than needed.

Core Web Vitals Impact

Google's Core Web Vitals measure Largest Contentful Paint (LCP) — how long it takes for the main image to load. Serving oversized images directly hurts your LCP score and SEO ranking.

❌ Problem: Same image for everyone

This image is the same size on mobile and desktop. Mobile users download a large image they don't need.

📏 Image: 1000x600 pixels — loads same size on all devices

✅ Solution 1: srcset + sizes

The browser automatically chooses the best image based on screen width. Resize your browser to see it switch!

          <img src="fallback.jpg" srcset=" image-400.jpg 400w, image-800.jpg
          800w, image-1200.jpg 1200w " sizes=" (max-width: 480px) 400px,
          (max-width: 768px) 800px, 1200px " > /* How it works: - srcset
          tells browser what images are available - sizes tells browser how wide
          the image will be at each breakpoint - Browser chooses the best match
          */
        

✅ Solution 2: <picture> Element (Art Direction)

Different crops/compositions for different screen sizes. On mobile, you might want a portrait crop; on desktop, landscape.

          <picture> <source media="(max-width: 480px)"
          srcset="image-portrait.jpg"> <source media="(max-width: 768px)"
          srcset="image-tablet.jpg"> <img src="image-desktop.jpg"
          alt="description"> </picture> /* Use when you need DIFFERENT
          crops for different screens */
        

✅ Solution 3: Responsive Background Images

For CSS background images, use media queries to swap images.

🌄 Responsive Background

          /* Mobile (default) */ .bg-demo { background-image:
          url('image-400.jpg'); } /* Tablet */ @media (min-width: 768px) {
          .bg-demo { background-image: url('image-800.jpg'); } } /* Desktop */
          @media (min-width: 1024px) { .bg-demo { background-image:
          url('image-1200.jpg'); } }
        

✅ Modern: image-set() for Backgrounds

Similar to srcset, but for CSS background images.

          /* Modern syntax (supported in all modern browsers) */ .hero {
          background-image: image-set( url('image-400.jpg') 1x,
          url('image-800.jpg') 2x, url('image-1200.jpg') 3x ); }
        

📊 When to Use Each Solution

srcset + sizes: Same image, different sizes (most common)
<picture> element: Different crops/compositions (art direction)
Media queries + background-image: CSS backgrounds
image-set(): Modern CSS backgrounds

Performance Best Practices

Add loading="lazy" to images below the fold
Always include width and height attributes (prevents layout shift)
Serve images in modern formats: WebP, AVIF
Use a CDN that automatically optimizes images

⚡ Quick Reference Card

/* srcset syntax */ srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w" /* sizes syntax */ sizes="(max-width: 480px) 400px, (max-width: 768px) 800px, 1200px" /* picture element */

/* image-set() */ background-image: image-set(url('img-1x.jpg') 1x, url('img-2x.jpg') 2x);