Serve the right size image to every screen with srcset

Our hero image loads fine on desktop but it's the same huge file on a phone that barely has room to display it.

IntermediateRead 5 minDoing: 30 to 45 minutes for one hero image, more if your site has several6 steps

▶ Start

What you'll have at the end

A hero image that ships a small file to phones and a large one to desktop screens using srcset and sizes

Before you start

You need

A hero photo already sized for your widest layout, saved as one ordinary image file, sitting at the top of a page as the very first thing a visitor sees.

Not covered

Serving a different crop or subject on narrow screens than on wide ones, and converting the file to a newer image format.

Leans on

HTML5 Cheat SheetCarries the srcset, sizes, fetchpriority, and width and height rows this recipe's markup is built from.
Web Performance Cheat SheetBacks the loading priority and layout shift rows that explain why a hero image needs different treatment than an ordinary content image.

6 steps

Checked 25 Aug 2026

Part of the HTML5 cookbook