Adding Sizes6:52 with Nick Pettit
the source-set attribute lists the various image resources available to the browser. Optionally, we can also include the sizes attribute, which takes one or more CSS media conditions and ends with a length unit. This tells the browser how much space the image should take up in the layout.
As we've learned, the source set attribute set lists, 0:00 the various image resources available to the browser. 0:03 Optionally, we can also include the sizes attribute. 0:07 Now this is a little bit confusing, 0:11 so if you don't understand at first, don't worry. 0:13 I'm going to explain it a few different ways, and provide a code example. 0:17 The sizes attribute takes one or 0:23 more CSS media conditions, and ends with a length unit. 0:26 This tells the browser how much space the image, should take up in the layout. 0:32 This doesn't actually set the width of the image, we do that in our CSS. 0:37 Rather, similar to the length value we gave in the source set attribute, 0:42 it provides the browser with either an exact number or 0:47 a rough guess on the size of the image in the layout. 0:51 This helps the browser figure out, which source image to fetch. 0:55 So, what's the difference between the length values in the source set attribute, 1:00 versus the media conditions and length values in sizes? 1:05 In the source set attribute, 1:10 we're telling the browser the native width of the image in pixels, 1:11 just like the width we might see in an image editing program like Photoshop. 1:16 In the sizes attribute, 1:21 we're telling the browser how much space that image will take up in the layout? 1:23 Because, remember images can be resized by the browser. 1:28 For instance a 2X image at 1,000 pixels, 1:32 will actually take up the equivalent of 500 pixels in the layout. 1:35 This is a subtle difference, 1:40 so let's take a look at an example that makes this more clear. 1:42 So, let's say that we wanted our banner image to only 1:48 take up half the layout, so maybe we could leave room for a title over here. 1:53 Or something like an advertisement over here, and have a half width banner image. 2:00 To do that we'll change the banner image class to max width 50%. 2:05 So, let me jump into my work space here. 2:12 And there's our banner image with the class banner image, 2:16 and, let's go to our CSS. 2:22 So we'll go to main.css, and 2:24 if I scroll down here, to where it says profile layout, 2:29 we have this banner image class and right now it says min-width 100%. 2:36 Let's change that to max-width 50%. 2:39 So, I'll Save that out. 2:44 And lets go back, and refresh the page. 2:50 And now, the image is taking up half the width. 2:54 Now, the image that has been chosen by Chrome, 2:58 is a source where the subject is too far away. 3:01 And the cropping doesn't fill quiet right. 3:04 So, lets add the sizes attribute to the banner image. 3:07 So just to make sure we're getting image here. 3:13 lets open up the dev tools with the cache disabled and I'll refresh there and 3:16 that is indeed the image that it's giving us so, let's go back to our work space. 3:22 And, let's go to index.html. 3:29 And first, let's try writing a media condition using the sizes attribute. 3:36 So when the browser hits 1,024 pixels, 3:42 we also know that that's the maximum width for our wrapper, 3:46 because in our CSS here it says wrapper max-width 1,024 pixels. 3:51 So, if the image is taking up 50% of that, we know that it's 512 pixels. 4:00 So, right here, we can add the sizes attribute. 4:07 And we'll add one of those media conditions. 4:17 So we'll say min-width is 1,024 pixels. 4:20 Followed by a space, and then 512px. 4:27 So, we'll save that out, and lets go back to the browser. 4:34 And with the cache disabled we'll refresh. 4:39 And you can see that we're getting a slightly better crop, 4:42 so this works a little better, but we still have a problem. 4:45 Chrome will always use the largest image, available in the cache. 4:49 So even though when our page loads at the largest size we get a better crop, 4:53 we are still loading in images that are too large, 4:59 when the browser is at a smaller size. 5:03 So let's size that down, so we can see that. 5:06 And the images are too small. 5:10 So in addition to our immediate condition, let's also add a plain length value. 5:13 And, when the browser is at a size value that's smaller than 1024 pixels, 5:21 the wrapper stretches from edge to edge. 5:27 So, you can see there's our rapper stretching to both sides. 5:31 So we know that our 50% image is taking up exactly half the viewport width. 5:37 We are using a mobile first approach, so we should put this value in. 5:43 Before this first media condition. 5:49 So, let's do that now. 5:56 I'll say sizes 50 viewport width 5:58 followed by a comma, and then we have our second media condition here. 6:04 So let's save that out, and we'll go back to the browser, and refresh. 6:10 And now, if we just size this down and refresh, 6:15 we're getting the proper crop that we want. 6:19 As I size this up, it should pop to the crops that we would expect. 6:24 So it looks like it's using the small and medium sized images there. 6:32 Like I said the sizes attribute can be a little confusing. 6:37 Be sure to check the notes associated with this video for more resources, and 6:41 try experimenting on your own, to see how different media queries and 6:45 values impact the results. 6:50
You need to sign up for Treehouse in order to download course files.Sign up