Check out a free preview of the full Mastering Chrome Developer Tools v2 course:
The "srcset Exercise" Lesson is part of the full, Mastering Chrome Developer Tools v2 course featured in this preview video. Here's what you'd learn in this lesson:

In this exercise, students update an image element to include options for the browser to pick the appropriate image depending on the browser viewport width.

Get Unlimited Access Now

Transcript from the "srcset Exercise" Lesson

[00:00:00]
>> Speaker 1: We've kind of got this exercize just using that exact same thing. So we've got this image source set exercise here. And we can kind of see, this is a really cool service called placeholder. The reason I like it is because it actually when you call, you can pass in any numbers to the URL, which we'll see in a second.

[00:00:15] And it will just generate an image of that size exactly, just dynamically. And it'll actually write the image size in here. So we'll see how this works in a second. But you can see if I'm on this tiny screen and I refresh, I'm loading a 3200 pixel wide, 1200 pixel tall image, which is a pretty big waste.

[00:00:33] So in order to work on this one, what we're gonna want to do is go into our code editor. And we're gonna wanna look for a file called srcset.pug, and everything we really need to be able to implement it should be here. So you can see how these URLs are generated, right.

[00:00:45] It's just these two numbers that you need to change, width and height. So if I were to make this 100 and make 100 and then just go refresh the page, you would see a 100 by 100. So this is the surface that does that for you. And so what we want here is we want an image that has a couple, maybe three different sizes to it.

[00:01:05] So if it's on a really small screen, we're great, we're serving a small image. Medium medium, and large large. So yeah, we'll just take a few minutes, kind of implement that together off the slides. The other thing that I think will be really interesting to check out. Once you have the source sets working, try to shrink and reload the screen, and see when it does do a a new fetch and when it doesn't do a new fetch, cuz I think it's pretty interesting.

[00:01:27] So you should always be able to always tell which image is loading, cuz it will have it written here. But it's kind of interesting to me when it decides to and not to do a new fetch. So we'll take a couple minutes and do that, and then we'll go over it all together.