1 00:00:01,200 --> 00:00:04,112 One photograph, three screens. 2 00:00:04,137 --> 00:00:15,235 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. 3 00:00:15,445 --> 00:00:19,751 Each one needs a different image file for the best results. 4 00:00:19,962 --> 00:00:27,274 The problem is, the best choice for one might be wasted pixels and time for another. 5 00:00:27,474 --> 00:00:32,209 You'd think the browser could just measure the space and fetch the right size. 6 00:00:32,350 --> 00:00:33,451 It can't. 7 00:00:33,662 --> 00:00:44,039 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. 8 00:00:44,180 --> 00:00:48,486 At that moment, it doesn't know the dimensions of the picture. 9 00:00:48,686 --> 00:00:54,826 So we tell it two things: what files exist, and how wide the picture will be. 10 00:00:55,130 --> 00:00:59,946 Then the browser, which knows the screen, makes the choice. 11 00:01:00,646 --> 00:01:01,875 Here's the tag. 12 00:01:02,016 --> 00:01:04,870 The srcset attribute is a menu. 13 00:01:05,174 --> 00:01:13,160 Each entry is a file and its real width in pixels, written with a w for width. 14 00:01:13,360 --> 00:01:22,878 Four versions of the same photograph: four hundred eighty, eight hundred, twelve hundred and sixteen hundred pixels wide. 15 00:01:23,089 --> 00:01:26,663 The browser will take exactly one. 16 00:01:26,863 --> 00:01:31,877 The src is still there, for any browser that doesn't support the newer attribute. 17 00:01:31,960 --> 00:01:39,748 And the width and height still give the shape, so the space is saved before any file arrives. 18 00:01:40,448 --> 00:01:47,575 The sizes attribute answers the question the browser can't: how wide the picture will be on the page. 19 00:01:47,775 --> 00:01:50,583 It reads like a small media query. 20 00:01:50,794 --> 00:02:02,053 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. 21 00:02:02,136 --> 00:02:04,445 Otherwise, the full width. 22 00:02:04,656 --> 00:02:08,880 The browser takes the first condition that matches. 23 00:02:09,080 --> 00:02:11,690 Those numbers come from your layout. 24 00:02:11,774 --> 00:02:14,918 You've designed it, so you already know them. 25 00:02:15,129 --> 00:02:24,009 The sizes attribute just provides the browser the information early so it can optimize download and layout. 26 00:02:24,709 --> 00:02:26,611 Now watch the browser choose. 27 00:02:26,694 --> 00:02:30,514 First the phone: three hundred ninety pixels wide. 28 00:02:30,514 --> 00:02:36,166 That's under forty rem, so the picture fills the width: three hundred ninety. 29 00:02:36,307 --> 00:02:40,996 But this phone has three device pixels for every CSS pixel. 30 00:02:41,393 --> 00:02:45,988 Three ninety times three is eleven seventy pixels needed. 31 00:02:46,385 --> 00:02:50,319 The smallest file that covers it is the twelve hundred. 32 00:02:50,518 --> 00:02:56,414 The tablet: seven hundred wide, so sixty percent, four hundred twenty. 33 00:02:56,555 --> 00:02:59,758 At double density, eight forty pixels. 34 00:02:59,841 --> 00:03:02,382 Again, the twelve hundred. 35 00:03:02,582 --> 00:03:06,237 The desktop monitor: twelve eighty wide. 36 00:03:06,541 --> 00:03:14,004 Sixty percent is seven sixty-eight, and at one pixel per pixel, that's all it needs. 37 00:03:14,029 --> 00:03:18,346 The eight hundred covers it, at thirty-four thousand bytes. 38 00:03:18,546 --> 00:03:25,673 Same tag, three screens, and the desktop downloaded less than half what the phone did. 39 00:03:25,884 --> 00:03:28,064 Now take the sizes away. 40 00:03:28,205 --> 00:03:41,416 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. 41 00:03:41,616 --> 00:03:42,822 One more thing. 42 00:03:42,963 --> 00:03:45,353 The browser has the last word. 43 00:03:45,436 --> 00:03:52,713 It may keep a bigger image it already has in its cache, or choose a smaller one on a slow connection. 44 00:03:52,854 --> 00:03:54,443 Your markup offers. 45 00:03:54,468 --> 00:03:56,545 The browser decides. 46 00:03:56,745 --> 00:04:03,396 Notice that the last step is always the same: the smallest file that covers the pixels needed. 47 00:04:03,606 --> 00:04:08,144 So offer enough widths that something is always close. 48 00:04:08,844 --> 00:04:14,786 Sometimes a picture is always the same size, like a logo or a profile photo. 49 00:04:14,986 --> 00:04:22,797 Then there's a simpler menu: one file per screen density, marked 1x, 2x, 3x. 50 00:04:22,927 --> 00:04:27,581 The browser matches its own density, and needs no sizes at all. 51 00:04:27,780 --> 00:04:31,180 Just don't mix the two kinds in one list. 52 00:04:31,484 --> 00:04:35,975 Widths, with sizes, for pictures that stretch with the layout. 53 00:04:36,279 --> 00:04:39,736 Densities, for pictures that don't. 54 00:04:40,437 --> 00:04:44,139 Everything so far picks a different size of the same picture. 55 00:04:44,442 --> 00:04:47,192 Sometimes you need a different picture. 56 00:04:47,392 --> 00:04:52,580 On a narrow phone, the whole lake shrinks until the mountain is a speck. 57 00:04:52,884 --> 00:04:56,794 Better to send a closer crop, square, on the peak. 58 00:04:56,877 --> 00:05:02,263 The choice depends on context, and it has a name: art direction. 59 00:05:02,404 --> 00:05:05,758 To pull it off, we need the picture element. 60 00:05:05,957 --> 00:05:09,972 Inside picture, each source is a choice to consider. 61 00:05:10,183 --> 00:05:15,626 The browser reads them in order, takes the first one that fits, and stops reading. 62 00:05:16,023 --> 00:05:27,573 For art direction, the test is a media condition: below thirty-six rem, the square crop of the peak; otherwise, the whole scene. 63 00:05:27,773 --> 00:05:34,215 A source can ask a different question too: not which picture, but which file format. 64 00:05:34,344 --> 00:05:43,154 Give each source a type, AVIF first, then WebP, and the browser takes the first format it can decode. 65 00:05:43,179 --> 00:05:45,580 Same picture, smaller file. 66 00:05:45,791 --> 00:05:54,404 Our lake at eight hundred wide is twenty-two thousand bytes as AVIF, against thirty-four as JPEG. 67 00:05:54,605 --> 00:06:01,441 Real pages often need both: a crop for each screen, and each crop in each format. 68 00:06:01,815 --> 00:06:04,147 Ask the media question first. 69 00:06:04,264 --> 00:06:10,416 Think of it as two decisions: which picture, then which file. 70 00:06:10,615 --> 00:06:13,539 Media conditions aren't only about width. 71 00:06:13,564 --> 00:06:19,135 A source can match dark mode, and swap a light chart for a dark one. 72 00:06:19,335 --> 00:06:22,421 And the img inside is never optional. 73 00:06:22,563 --> 00:06:31,431 It draws whatever the sources chose, and it carries the alt text, the width and height, and the loading hints. 74 00:06:32,131 --> 00:06:33,778 One new shortcut. 75 00:06:34,070 --> 00:06:41,080 A lazy image isn't fetched until you scroll near it, and by then the page has been laid out. 76 00:06:41,222 --> 00:06:48,894 So for lazy images, you can write sizes="auto", and the browser measures the slot itself. 77 00:06:49,198 --> 00:06:52,075 It works in most browsers already. 78 00:06:52,775 --> 00:06:53,783 Try it. 79 00:06:53,866 --> 00:07:00,389 Open the Which Source demo on the Images in HTML page, and resize the window. 80 00:07:00,600 --> 00:07:06,728 Watch the viewport, the density, the slot and the chosen file change. 81 00:07:06,928 --> 00:07:16,052 Better still, try it on your phone and your laptop and compare, or on as many kinds of devices as you can find. 82 00:07:16,252 --> 00:07:19,652 It might seem like a lot of work, but don't skip it. 83 00:07:19,735 --> 00:07:26,537 Set it up properly, and every user gets the smallest picture that still looks right.