1 00:00:00,590 --> 00:00:03,560 As we've learned, the source set attribute set lists, 2 00:00:03,560 --> 00:00:07,420 the various image resources available to the browser. 3 00:00:07,420 --> 00:00:11,790 Optionally, we can also include the sizes attribute. 4 00:00:11,790 --> 00:00:13,780 Now this is a little bit confusing, 5 00:00:13,780 --> 00:00:17,360 so if you don't understand at first, don't worry. 6 00:00:17,360 --> 00:00:21,700 I'm going to explain it a few different ways, and provide a code example. 7 00:00:23,380 --> 00:00:26,290 The sizes attribute takes one or 8 00:00:26,290 --> 00:00:32,050 more CSS media conditions, and ends with a length unit. 9 00:00:32,050 --> 00:00:37,130 This tells the browser how much space the image, should take up in the layout. 10 00:00:37,130 --> 00:00:42,090 This doesn't actually set the width of the image, we do that in our CSS. 11 00:00:42,090 --> 00:00:47,300 Rather, similar to the length value we gave in the source set attribute, 12 00:00:47,300 --> 00:00:51,360 it provides the browser with either an exact number or 13 00:00:51,360 --> 00:00:55,370 a rough guess on the size of the image in the layout. 14 00:00:55,370 --> 00:00:59,000 This helps the browser figure out, which source image to fetch. 15 00:01:00,240 --> 00:01:05,000 So, what's the difference between the length values in the source set attribute, 16 00:01:05,000 --> 00:01:09,150 versus the media conditions and length values in sizes? 17 00:01:10,180 --> 00:01:11,720 In the source set attribute, 18 00:01:11,720 --> 00:01:16,360 we're telling the browser the native width of the image in pixels, 19 00:01:16,360 --> 00:01:21,370 just like the width we might see in an image editing program like Photoshop. 20 00:01:21,370 --> 00:01:23,430 In the sizes attribute, 21 00:01:23,430 --> 00:01:28,270 we're telling the browser how much space that image will take up in the layout? 22 00:01:28,270 --> 00:01:32,240 Because, remember images can be resized by the browser. 23 00:01:32,240 --> 00:01:35,400 For instance a 2X image at 1,000 pixels, 24 00:01:35,400 --> 00:01:40,710 will actually take up the equivalent of 500 pixels in the layout. 25 00:01:40,710 --> 00:01:42,350 This is a subtle difference, 26 00:01:42,350 --> 00:01:46,260 so let's take a look at an example that makes this more clear. 27 00:01:48,180 --> 00:01:53,590 So, let's say that we wanted our banner image to only 28 00:01:53,590 --> 00:02:00,030 take up half the layout, so maybe we could leave room for a title over here. 29 00:02:00,030 --> 00:02:05,790 Or something like an advertisement over here, and have a half width banner image. 30 00:02:05,790 --> 00:02:12,350 To do that we'll change the banner image class to max width 50%. 31 00:02:12,350 --> 00:02:16,560 So, let me jump into my work space here. 32 00:02:16,560 --> 00:02:22,492 And there's our banner image with the class banner image, 33 00:02:22,492 --> 00:02:24,440 and, let's go to our CSS. 34 00:02:24,440 --> 00:02:27,770 So we'll go to main.css, and 35 00:02:29,560 --> 00:02:36,090 if I scroll down here, to where it says profile layout, 36 00:02:36,090 --> 00:02:39,230 we have this banner image class and right now it says min-width 100%. 37 00:02:39,230 --> 00:02:44,930 Let's change that to max-width 50%. 38 00:02:44,930 --> 00:02:50,970 So, I'll Save that out. 39 00:02:50,970 --> 00:02:53,540 And lets go back, and refresh the page. 40 00:02:54,640 --> 00:02:58,170 And now, the image is taking up half the width. 41 00:02:58,170 --> 00:03:01,130 Now, the image that has been chosen by Chrome, 42 00:03:01,130 --> 00:03:04,860 is a source where the subject is too far away. 43 00:03:04,860 --> 00:03:07,420 And the cropping doesn't fill quiet right. 44 00:03:07,420 --> 00:03:13,410 So, lets add the sizes attribute to the banner image. 45 00:03:13,410 --> 00:03:16,800 So just to make sure we're getting image here. 46 00:03:16,800 --> 00:03:22,030 lets open up the dev tools with the cache disabled and I'll refresh there and 47 00:03:22,030 --> 00:03:26,817 that is indeed the image that it's giving us so, let's go back to our work space. 48 00:03:29,480 --> 00:03:36,180 And, let's go to index.html. 49 00:03:36,180 --> 00:03:42,180 And first, let's try writing a media condition using the sizes attribute. 50 00:03:42,180 --> 00:03:46,840 So when the browser hits 1,024 pixels, 51 00:03:46,840 --> 00:03:51,670 we also know that that's the maximum width for our wrapper, 52 00:03:51,670 --> 00:04:00,801 because in our CSS here it says wrapper max-width 1,024 pixels. 53 00:04:00,801 --> 00:04:07,918 So, if the image is taking up 50% of that, we know that it's 512 pixels. 54 00:04:07,918 --> 00:04:15,030 So, right here, we can add the sizes attribute. 55 00:04:17,200 --> 00:04:20,080 And we'll add one of those media conditions. 56 00:04:20,080 --> 00:04:27,070 So we'll say min-width is 1,024 pixels. 57 00:04:27,070 --> 00:04:34,330 Followed by a space, and then 512px. 58 00:04:34,330 --> 00:04:39,510 So, we'll save that out, and lets go back to the browser. 59 00:04:39,510 --> 00:04:42,390 And with the cache disabled we'll refresh. 60 00:04:42,390 --> 00:04:45,810 And you can see that we're getting a slightly better crop, 61 00:04:45,810 --> 00:04:49,560 so this works a little better, but we still have a problem. 62 00:04:49,560 --> 00:04:53,440 Chrome will always use the largest image, available in the cache. 63 00:04:53,440 --> 00:04:59,590 So even though when our page loads at the largest size we get a better crop, 64 00:04:59,590 --> 00:05:03,360 we are still loading in images that are too large, 65 00:05:03,360 --> 00:05:06,320 when the browser is at a smaller size. 66 00:05:06,320 --> 00:05:08,900 So let's size that down, so we can see that. 67 00:05:10,120 --> 00:05:13,590 And the images are too small. 68 00:05:13,590 --> 00:05:19,690 So in addition to our immediate condition, let's also add a plain length value. 69 00:05:21,280 --> 00:05:27,150 And, when the browser is at a size value that's smaller than 1024 pixels, 70 00:05:27,150 --> 00:05:31,290 the wrapper stretches from edge to edge. 71 00:05:31,290 --> 00:05:34,810 So, you can see there's our rapper stretching to both sides. 72 00:05:37,070 --> 00:05:43,810 So we know that our 50% image is taking up exactly half the viewport width. 73 00:05:43,810 --> 00:05:49,440 We are using a mobile first approach, so we should put this value in. 74 00:05:49,440 --> 00:05:53,030 Before this first media condition. 75 00:05:56,220 --> 00:05:58,540 So, let's do that now. 76 00:05:58,540 --> 00:06:04,525 I'll say sizes 50 viewport width 77 00:06:04,525 --> 00:06:10,345 followed by a comma, and then we have our second media condition here. 78 00:06:10,345 --> 00:06:14,545 So let's save that out, and we'll go back to the browser, and refresh. 79 00:06:15,645 --> 00:06:19,515 And now, if we just size this down and refresh, 80 00:06:19,515 --> 00:06:24,580 we're getting the proper crop that we want. 81 00:06:24,580 --> 00:06:32,180 As I size this up, it should pop to the crops that we would expect. 82 00:06:32,180 --> 00:06:37,240 So it looks like it's using the small and medium sized images there. 83 00:06:37,240 --> 00:06:41,910 Like I said the sizes attribute can be a little confusing. 84 00:06:41,910 --> 00:06:45,740 Be sure to check the notes associated with this video for more resources, and 85 00:06:45,740 --> 00:06:50,370 try experimenting on your own, to see how different media queries and 86 00:06:50,370 --> 00:06:52,510 values impact the results.