Using Srcset10:41 with Nick Pettit
Using srcset, we can provide multiple image sources for different responsive resolutions and pixel densities. In this video, we'll learn how to implement the srcset attribute in Workspaces.
Before we jump back into our work space, let's check out the Mozilla developer 0:00 network documentation for the source set attribute. 0:04 You can find a link to the MDN docs in the notes associated with this video. 0:09 So, here I have the Mozilla Developer Network documentation open. 0:14 And you'll see that we have this srcset attribute here. 0:21 And right here, it says this is a list of one or more strings separated by commas, 0:25 indicating a set of possible images for the user agent to use. 0:31 Each string is composed of a URL to the image, and 0:37 optionally there is white space followed by either a width descriptor. 0:41 So that is a positive integer followed by a w. 0:47 Or, a pixel density descriptor. 0:51 And that is a positive floating point number followed by An x so 0:55 that would be something like one x or two x and so on. 1:00 So, lets see what this looks like in work spaces. 1:05 So I'm gonna close this, first, 1:08 lets try out the pixel density descriptor. 1:12 So, right here, Inside of the div, with the class profile description. 1:17 I'm going to open that up, and inside of there, I'm going to say div with the class 1:23 profile-image and we've already set up some styling for this in our CSS. 1:30 Basically, this will just be floated to the left, 1:36 with a little bit of margin, I think. 1:40 And inside of here, we're going to open up an image element, 1:42 and then this is a self closing element. 1:50 And I'm going to. 1:53 Hit enter a couple of times here to make some space to work 1:55 because we're going to put a couple of attributes inside of the image element. 1:58 So first, I'm going to use a normal source and 2:04 we'll go inside of the image folder here and 2:10 I have a file called photo-@ one x, 2:13 with a dash, and that's a JPEG image. 2:18 And then I'll give it an alt attribute. 2:24 And I'll say this is a photograph of a flower. 2:28 Okay, I'll delete that extra space there. 2:33 So let's just save that out and switch back to our preview and 2:36 hit refresh and now we can see that normal one x image there. 2:42 So far so good. 2:46 However the screen that I'm using here is actually a retina display, 2:47 so this is at two x. 2:53 So it can advantage of two x images. 2:55 So lets go back to our work space and 2:59 we're going to add these source set attribute. 3:02 And inside of source set I'm going to type a couple of sources. 3:07 I'll say image slash photo and 3:12 I'll use that same one x image, so we'll say at one x 3:16 dot JPEG, and then followed by a space. 3:23 I'll give a pixel density descriptor so there's a space and 3:30 then a one and an x now, if we save this and refresh in our preview, 3:34 we should see that this is not quite right. 3:39 That's because we need to add an x there. 3:45 Let's refresh, and there we go. 3:49 So, that's actually a good way of knowing that Chrome is indeed using 3:51 the source set and not the source attribute. 3:56 The reason we want to leave this here is for 4:01 legacy browsers that do not yet recognize the source set attribute. 4:03 We do have the poly fill, but just in case that fails. 4:08 We have the regular source attribute there however, 4:12 we also want to include a two x image and if we go into our images folder. 4:16 You can see that we have this nice two x image there. 4:20 So let's get that in there. 4:24 And the way we do that is by using this same source set attribute and 4:26 we want the two x image to come first. 4:32 And we don't want two source sets, we just want the one. 4:36 So we're going to use those same quotes, 4:42 and we'll say firstname.lastname@example.org. 4:45 And then a space followed by the pixel density descriptor, so two x. 4:49 And then we'll put a comma there, and that comma is going to separate. 4:55 These two different source images. 5:00 So if we save that out, we go back to the browser. 5:03 Right now I can see some JPEG artifacts here, 5:06 but if I refresh the page those go away. 5:10 And that's telling me that, that is actually this two x image. 5:13 Now I can test this really quick, by putting in one of our other images. 5:18 So lets tell the browser that actually our two x image is 5:23 maybe this banner small.jpeg picture so, 5:28 lets just say banner small.jpeg I'll save that out and when I go back and 5:33 refresh, now it's actually putting that banner image in there. 5:38 So we know that this pixel density descriptor is working. 5:42 So I'm just going to undo that and leave it at that two x image and 5:46 there we go now lets add that banner up at the top 5:52 using a width descriptor so will go back here and 5:57 just outside of our content block here, 6:02 we're going to add an image and we'll close that just like that. 6:09 And again we're going to create some space here using enter and, 6:18 I'll give this a normal source to start out. 6:23 So this is image slash banner, and 6:25 we'll use the medium resolution one for the fallback. 6:29 And then, for the alt attribute, I'll say Photograph of 6:36 Nick Pettit in front of some trees there we go. 6:39 So lets save that and see if that's working. 6:45 Okay, there's our image there. 6:48 I also need to give this a class 6:49 in our CSS called banner image. 6:54 So lets see if that's being applied. 6:59 There we go. 7:02 Now we have some better spacing there. 7:03 And now we need to use source set to give these proper images so 7:06 let's say image slash banner dash large dot jpeg. 7:14 And instead of using the pixel density descriptor I'm going to use a width 7:21 descriptor. 7:26 Now, let's take a look at this image. 7:28 It's 20 48 across. 7:31 So that is the width that I want to use. 7:34 I want to tell the browser what the width of this image is before it loads it. 7:36 And I'll explain that a little bit more clearly in a moment but 7:42 lets just go ahead and finish typing this out. 7:45 So we'll say img/banner-medium.jpeg. 7:48 And I know that's 1400 across. 7:52 And I'll put another comma there and list out a third and final image, 7:55 hold banner-small.jpeg, and that is 800 across. 8:00 So, let's save that out and refresh the browser. 8:09 And there you can see I'm actually getting the large crop here and 8:14 that is what I was hoping for. 8:18 Now, you might be wondering, why are these width descriptors necessary? 8:21 Shouldn't the browser know the width of an image? 8:25 Well, the browser doesn't know the width of an image until it's completely 8:28 downloaded so, we need to tell the browser, hey, this source image is going 8:32 to be this wide, and that way it can intelligently select the correct source. 8:37 One other thing I should point out is that the behavior 8:43 of the source-set attribute is somewhat unique in Google Chrome, 8:47 because Chrome is one of the few browsers that supports this feature natively. 8:51 Chrome will always use the largest image available in the cache. 8:57 A simple way to always keep the cache clear while working 9:02 is to always keep the dev tools open. 9:06 So if we go ahead and 9:09 open up the dev tools, we can go to the network tab here. 9:13 And there's a little checkbox that says disable cache. 9:18 So we want to make sure that that is checked and when we refresh the page, 9:22 Chrome will pull in the latest image so let's re size the browser here. 9:29 And we'll go to one of these smaller sizes and you'll see that it's still 9:36 using that large image, which really isn't appropriate for this smaller size. 9:41 However, because we have the dev tools open, and the cache is disabled. 9:46 We'll refresh, and now Chrome only knows about this smallest image, 9:51 because it pulled the appropriate one, using the source set attribute. 9:57 However, if I re size the browser you'll see that it now popped to the medium crop, 10:02 and if I keep going you'll see that now it's at the large crop. 10:10 And that's the largest image we have available. 10:16 But once again, if I go down to the smallest size It's still going 10:18 to use that large crop until I refresh the page with the cache disabled. 10:23 So if you refresh the page, and you don't see any change. 10:28 Make sure that you have the dev tools open, and that your cache is clear. 10:32 Behavior will be different in other browsers that are using the poly fill. 10:37
You need to sign up for Treehouse in order to download course files.Sign up