3.1 Introducing the `srcset` and `sizes` Attributes

The source set or SRC set and images are two attributes applicable to images and they're actually part of the official HTML specification. So they're the real deal. They can be used today, but how exactly do you use them? Well, let's find out. In order to see if some new techniques are working properly in terms of performance, we first need to establish a baseline. Now this is a simple page that I've built that has a bunch of different images in different sizes, so this one is constrained, actually, to a certain size and this one is full width. And we have another full width, and then two more with fixed sizes. All of this is, actually using fluid images. So even these fixed ones and then the full width ones will, actually scale nicely when the viewport size is lowered. Now in terms of performance, now let's have a look. So I'm gonna open the inspector here, go to Network, reload my page. And here we can see the list of all the resources loaded. I am loading, of course, a normalized CSS, and some different fonts from Google, but these are not important here. What's important is the size of our images. So, we have five images, all JPEG, all huge images. 3,500 pixels in width. And I did this on purpose. You'll understand why in in the next couple of lessons. Here you can see that we have eight requests, five of which are images, and the total page weight is about 9 megabytes. The loading time doesn't really matter, because depending on the connection you have and the proximity to the server, you could get a really fast loading time or a really slow one. So, we're not actually gonna focus on this. What we are going to focus is the page weight that you see here. So, right now we're downloading five massive JPEGs and it doesn't matter if we're on a desktop or a smartphone. The same images will load and we got to change that somehow. Now we're gonna do it first with the source set attributes. Now let's have a look at the source code. The styles we see here won't affect the page performance basically. They're just styling for the fonts and for the images. You can see that we applied some margins, some max widths, and some styles for the fit caption and so on. So what we, what we have here is a bunch of text and image tags inside figures, and all of these are the same. The ones that are full width have the class of fw. So, let's duplicate this page and start with the very first image. Apart from the SRC attributes, and I'm gonna do something like this, so it's easier to follow. So apart from this I'm gonna do srcset equals. And inside we're gonna have a list of images. So we're gonna say img/food-1-large.jpg. And right next to it we're gonna say 1024 width. So what we're doing here is specifying the actual source for the image and its width in pixels, and I've already prepared these images, they're just versions of food-1.jpg. But scaled down. Then, we do a comma and we copy this. And we're gonna have one medium. That's 768 pixels in width and finally one that's for small devices. That's 320 pixels in width sorry, that's actually 480, and once we've done this, let's actually change the rest of our images. Okay, so now food-2 is changed, as well as 3, 4, and 5. And notice that I left the source set there, and that's a fall back basically. If the browser doesn't support source set, it will fall back to the SRC and it will load the default image. So, what is this doing to our page? Well, let's have a look, and I actually changed browsers here from Firefox to Chrome because Firefox doesn't support source set just yet. So let's look at the performance of our baseline once again. Gonna refresh this and, as you can see, it loads the big ones, the big images. And the way Chrome calculates it, it's 6.8 megabytes. Now if we go to our second page here, the one with source set applied, let's refresh. And notice I have disabled cache here so the images will always be downloaded from the server. We can see that now the large images are downloaded instead of the default ones. So we went from 6.8 megabytes to 3.8 megabytes. That is a huge difference, especially if you're on a mobile device and you have a limited bandwidth. That's a huge gain right there. Now the best thing comes when you resize the page. So let's actually make this smaller to about 760, like, something like that. So right now we're, kind of, in tablet portrait territory. So if we resize this, remember 3.8 megabytes refresh, I meant, sorry. Now we get the medium versions, and we only have a transfer of 2.2 megabytes, that's awesome. So it's actually loading images that are a better fit to the viewport size, which is just awesome. Now if I take this even further, and lower it to about 400, and I refresh, now we only get just under 1 megabyte and we get the small versions of the image, so as you can see, that is pretty awesome. And, you know, it looks exactly the same, as you can see here. The same images, the image quality is good. All the images we need are loaded, and that's a very cool solution. Now, how does this work exactly? Well, it's pretty simple. The browser, when he has this source set and he recognizes it, he looks at the viewport size. And then picks the image that is closest to that. So if I have a width like this, right, which is, let's see, 12, around 1300 pixels, well, the closest image to that is this one, food-1-large, that's why we give the browser this information, the the image width. If I scale it down to about here, 902 pixels, it will still load the large versions because 902 is closer to 1024 rather than 768. But if I bring this down to about 800, it will load the medium versions because 800 is closer to 768. And the same goes for others. And that's how you use the source set attribute. Now let's see about the other one which is sizes. So what is the sizes attribute used for? Well, it's simple. With it, you basically specify at which size you wanna display a certain image. So take this image right here. If we go back to our CSS, we can see that the figure has a maximum width of 45ems, that's why this one doesn't span on the entire page. So, I wanna say to the browser that if the minimum width of my viewport is 45ems, then display that image at 45ems. Otherwise display it at full width or 100% viewport width, so you would do this, sizes equals, you would do media query condition, like min-width. Set that to 45ems and then, if that condition is met, we'll say 45ems, otherwise 100% viewport width. Now, this measurement unit is probably something you haven't encountered before, but it's pretty simple. It's viewport width, vw. You can also do viewport height, or vh. Now, in order to see this in action, we first need to comment the width 100% for the image. When we resize this and look at this first image, that one we get below 45ems, it will start to get fluid. So in this case we don't have a minimum width of 45ems. That means the image will be displayed at 100% viewport width. Just for the sake of it, let's turn this to 90% viewport width. So it's not exactly full width, and for the sake of this exercise let's add the sizes of 90% viewport width on the full width images. Now notice you don't need a media query condition all the time. You can just put a simple size in there and it will work. It, you basically tell the browser, hey, this is the size I want displayed at. And that's it. So, let's do the same for the other images. All right, so, now let's see how our page looks like, and how it behaves on different different viewport sizes. So, we've made the full width images, well, not exactly full width, but 90% viewport width. And the others have a condition. So when we resize, those fixed images will become fluid. Right here, the others are fluid by default. And let's take a look at some performance data. And we're actually gonna compare it to when we were only using source set. Now, let's see which images are loaded. So, lets start with the default size here, we can see that source set loads the large images. Here, things are a bit different. Now, the medium versions are loaded for these images, while the large ones are loaded for these bigger images. And that's a difference in the page weight, because here we're loading 3.8 megabytes. Here, we're loading 2.8 megabytes. So, why is this different? Well, let's take for example the first image. So, here when we're using source set, we have food-1-large at 1024 width and the width of the browser is closer to 1024 width, so it loads food-1-large. But in here, we have another condition. When the minimum width of the browser is 45ems, which in this case is true, we're displaying that image at 45ems, and 45ems, if we multiply that by 16, we get a result of 720 pixels. And that 720 pixels is actually closer to this value. So that's why the medium is loaded here. And same goes for the other two images on the bottom. Now let's shrink this to around 768 pixels, like this. And see what we're loading here, on the source set. Only the mediums, and here again, only the mediums, because the size the images are being displayed at is closest to the size of our medium images. And when we resize this to about this much, we're getting the small versions here. And with no surprise, we're getting these small versions here as well, all of them. So as you can see, this depends on the viewport size, but also the size that you wanna use or you want to display your images at. Now if we compare at the page where we use the two attributes, and we get a total weight of 2.8 megabytes with our initial one, which wasn't using any attributes at all, it was just using regular code, that one is loading 6.8 megabytes. So a difference of 4 megabytes. That's a very big difference. As you saw, it's really easy to create responsive images using these two attributes. But the thing is, you're kind of letting the browser choose for you. You're saying to him these are my images, and these are the sizes that I want display them at. Which one should I choose, and the browser does that for you. How they're doing that, it's not really important. In fact, we don't really know how. Browsers know a lot about us, like screen resolution, like viewport size, connection speed, and so on. So by using this data and these two attributes they will always make the best decision possible. And that's good. It makes our job easier. But the thing is, sometimes we do need a bit more control over what we're displaying on our website. That's especially true when considering the art direction problem. So, a, a really big image that looks great on a desktop, when shrunk down, it won't look as good on a mobile device, so to fix that problem, we can use the picture element.