# Which Image Did the Browser Pick? — narration script Runtime 7:31. Timecodes are when each chapter starts; the film's animation is keyed to these cue times, so a recorded voice-over should keep each line near its timecode. ## 0:00 · Why the browser needs help - `0:01` One photograph, three screens. A narrow phone with high pixel density, a wide display on a desktop monitor with standard pixel density, and a tablet that's somewhere in-between. Each one needs a different image file for the best results. The problem is, the best choice for one might be wasted pixels and time for another. - `0:27` You'd think the browser could just measure the space and fetch the right size. It can't. To be fast, it starts fetching images the moment it reads the HTML tag, before the CSS has arrived and long before the page is laid out. At that moment, it doesn't know the dimensions of the picture. - `0:48` So we tell it two things: what files exist, and how wide the picture will be. Then the browser, which knows the screen, makes the choice. ## 1:00 · Providing different image candidates - `1:00` Here's the tag. The srcset attribute is a menu. Each entry is a file and its real width in pixels, written with a w for width. - `1:13` Four versions of the same photograph: four hundred eighty, eight hundred, twelve hundred and sixteen hundred pixels wide. The browser will take exactly one. - `1:26` The src is still there, for any browser that doesn't support the newer attribute. And the width and height still give the shape, so the space is saved before any file arrives. ## 1:39 · How wide will it be? - `1:40` The sizes attribute answers the question the browser can't: how wide the picture will be on the page. - `1:47` It reads like a small media query. If the window is at least forty rem wide, about six hundred forty pixels at the default text size of sixteen pixels, the picture takes sixty percent of it. Otherwise, the full width. The browser takes the first condition that matches. - `2:09` Those numbers come from your layout. You've designed it, so you already know them. The sizes attribute just provides the browser the information early so it can optimize download and layout. ## 2:24 · Three screens, three downloads - `2:24` Now watch the browser choose. First the phone: three hundred ninety pixels wide. That's under forty rem, so the picture fills the width: three hundred ninety. But this phone has three device pixels for every CSS pixel. Three ninety times three is eleven seventy pixels needed. The smallest file that covers it is the twelve hundred. - `2:50` The tablet: seven hundred wide, so sixty percent, four hundred twenty. At double density, eight forty pixels. Again, the twelve hundred. - `3:02` The desktop monitor: twelve eighty wide. Sixty percent is seven sixty-eight, and at one pixel per pixel, that's all it needs. The eight hundred covers it, at thirty-four thousand bytes. - `3:18` Same tag, three screens, and the desktop downloaded less than half what the phone did. Now take the sizes away. The browser assumes the picture fills the whole window, needs twelve eighty pixels, and fetches the sixteen hundred: a hundred nineteen thousand bytes, three and a half times what it needed. - `3:41` One more thing. The browser has the last word. It may keep a bigger image it already has in its cache, or choose a smaller one on a slow connection. Your markup offers. The browser decides. - `3:56` Notice that the last step is always the same: the smallest file that covers the pixels needed. So offer enough widths that something is always close. ## 4:08 · When the size is fixed - `4:08` Sometimes a picture is always the same size, like a logo or a profile photo. Then there's a simpler menu: one file per screen density, marked 1x, 2x, 3x. The browser matches its own density, and needs no sizes at all. - `4:27` Just don't mix the two kinds in one list. Widths, with sizes, for pictures that stretch with the layout. Densities, for pictures that don't. ## 4:39 · When the picture itself must change - `4:40` Everything so far picks a different size of the same picture. Sometimes you need a different picture. - `4:47` On a narrow phone, the whole lake shrinks until the mountain is a speck. Better to send a closer crop, square, on the peak. The choice depends on context, and it has a name: art direction. To pull it off, we need the picture element. - `5:05` Inside picture, each source is a choice to consider. The browser reads them in order, takes the first one that fits, and stops reading. For art direction, the test is a media condition: below thirty-six rem, the square crop of the peak; otherwise, the whole scene. - `5:27` A source can ask a different question too: not which picture, but which file format. Give each source a type, AVIF first, then WebP, and the browser takes the first format it can decode. Same picture, smaller file. Our lake at eight hundred wide is twenty-two thousand bytes as AVIF, against thirty-four as JPEG. - `5:54` Real pages often need both: a crop for each screen, and each crop in each format. Ask the media question first. Think of it as two decisions: which picture, then which file. - `6:10` Media conditions aren't only about width. A source can match dark mode, and swap a light chart for a dark one. - `6:19` And the img inside is never optional. It draws whatever the sources chose, and it carries the alt text, the width and height, and the loading hints. ## 6:31 · Letting the browser measure - `6:32` One new shortcut. A lazy image isn't fetched until you scroll near it, and by then the page has been laid out. So for lazy images, you can write sizes="auto", and the browser measures the slot itself. It works in most browsers already. ## 6:52 · Watch it choose - `6:52` Try it. Open the Which Source demo on the Images in HTML page, and resize the window. Watch the viewport, the density, the slot and the chosen file change. - `7:06` Better still, try it on your phone and your laptop and compare, or on as many kinds of devices as you can find. - `7:16` It might seem like a lot of work, but don't skip it. Set it up properly, and every user gets the smallest picture that still looks right.