Serve the right image size with srcset

My hero image looks the same whether someone opens the site on a phone or a monitor, and it's huge either way.

Beginner to intermediateRead 6 minDoing: an hour7 steps

▶ Start

What you'll have at the end

An img tag with a srcset and sizes list that lets phones download a smaller file

Before you start

You need

A page whose image container already has real breakpoints in its CSS, full width below a cutoff, a capped width above it, one full-resolution image file currently loaded through a single image tag, and a batch image-resizing tool installed.

Not covered

Choosing between JPEG, WebP, and AVIF, or serving an entirely different crop per breakpoint with the picture element.

Leans on

7 steps

Where to go next

Picking breakpoints your content needs instead of a device preset

If the single cutoff this recipe's sizes value assumes isn't where your own content actually needs to switch, use this to pick that cutoff from your content instead of a device preset.

Checked 20 Aug 2026

Part of the Responsive Web Design cookbook