CSS — Responsive Images

Why one image isn't enough

A phone on mobile data shouldn't download a 4000px desktop photo. Responsive images send appropriately sized files per device — same subject, different weights.

srcset + sizes — resolution switching

<img
    src="lake-800.jpg"
    srcset="lake-400.jpg 400w,
            lake-800.jpg 800w,
            lake-1600.jpg 1600w"
    sizes="(max-width: 600px) 100vw, 50vw"
    alt="Mountain lake at dawn">

Decoding it:

• srcset — menu of files, each labeled with its real width in pixels (w)
• sizes — your prediction of rendered width: "full viewport under 600px wide, else half"
• Browser picks the smallest sufficient file (considering its DPR)

Result: a small phone grabs lake-400 (~40KB); a retina laptop grabs lake-1600. Same <img>, zero JavaScript.

The x-descriptor alternative

srcset="logo.png 1x, logo@2x.png 2x"

Simpler but only handles pixel-density, not layout size — fine for logos.

Generating the variants

Any workflow producing multiple widths works:

ImageMagick: magick lake.jpg -resize 800x lake-800.jpg
Build tools: sharp / next/image / responsive-images plugins
CDNs:        ?w=800 params (Cloudinary/imgix) generate on the fly

<picture> — art direction

When crops should DIFFER per screen (not just scale):

<picture>
    <source media="(max-width: 600px)"
            srcset="hero-mobile.jpg">
    <source media="(max-width: 1200px)"
            srcset="hero-tablet.jpg">
    <img src="hero-wide.jpg" alt="City skyline">
</picture>

(Phones get the vertical crop; desktops get panoramic.) Unlike srcset's suggestions, media conditions are commands.

Modern formats via picture

<picture>
    <source type="image/avif" srcset="photo.avif">
    <source type="image/webp" srcset="photo.webp">
    <img src="photo.jpg" alt="">      <!-- universal fallback -->
</picture>

Browser takes the first format it understands; AVIF/WebP typically cut file size 30–60%.

CSS-side responsiveness recap

img { max-width: 100%; height: auto; }   /* never overflow */

.hero {
    background-image: url("hero-mobile.jpg");
}
@media (min-width: 768px) {
    .hero { background-image: url("hero-wide.jpg"); }
}   /* background-image switching = art direction for decorative images */

Decision guide

Situation	Tool
Same photo, many widths	srcset + sizes
Different crops per device	<picture> + media
Format optimization	<picture> + type
Decorative backgrounds	CSS + media queries
Just need no overflow	max-width rule alone

Mini Practice

1. Export one photo at 400/800/1600; wire full srcset+sizes.
2. DevTools Network tab: resize viewport and confirm different files load.
3. Art-direct a hero: portrait crop mobile vs panorama desktop.
4. Add webp source with jpg fallback to any existing img.
5. Audit a page: find images wider than their display size.

Next: responsive video →