Check out a free preview of the full Mastering Chrome Developer Tools v2 course:
The "srcset Solution" 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:

Jon walks through the solution to srcset Exercise by adding values to the srcset attribute so that the browser can deliver a preferred image to the preferred browser viewport width.

Get Unlimited Access Now

Transcript from the "srcset Solution" Lesson

[00:00:00]
>> Jon Kuperman: For this one, just trying to get the image to display a few different images based on size, so go ahead and jump over in srcset.pug. So we'll see right now, we just have this plain image source. So I might just move it to something like, first, we'll need to change src to be srcset.

[00:00:19] And then we'll just start displaying our different sizes that we want. So we can do maybe some squares, just to make things a little easier. So we can do 400 by 400, and we'll set that for 400 width. Then we'll do the same thing again, but we'll do 600 by 600, and we'll set that to 600 width.

[00:00:36] And we'll do one more that's 1,000 by 1,000, we'll set that to 1,000 width. Cool, so we've got the source set now with these three different sizes. So we'll hop back into the debugger, I'm gonna go ahead and move this over to the side here, and we'll just try a hard refresh.

[00:00:56] So we can see on the small screen here, when you refresh the page, you get this 600 by 600 one. If we make it a little smaller and refresh again, grab that there, we should see the 400 by 400 size down there. And then what's kind of interesting about it is that it will refetch images going in one direction but not the other.

[00:01:17] So the demo that we can see for that is, if we hit the page for the first time here, and we get this 400 by 400 pixel image. And then what we try to do is just for responsive sake, we start making the screen a little bit bigger.

[00:01:28] Once it hits that, almost like a media query or a break point, it'll pop in the new image, now you can see the 600 by 600 image is there. Whereas, if you start going smaller again, it will never go back to the 400 by 400 without a refresh.

[00:01:42] And so the thinking here is that network calls are really expensive. And so if you have a big image, and it's already been loading and you've already rendered it, and you start shrinking the screen, it's really not that much cost for Chrome to shrink the image and repaint the screen.

[00:01:58] Whereas, if you have a really small image, like that 400 by 400 one, you start expanding the screen, the quality is gonna degrade significantly. So it's worth it to the browser to go out and fetch a bigger image if you're getting bigger, and there's a bigger one available.

[00:02:09] If you're getting smaller, it'll just use whatever it has. So we can that if we expand all the way out here, it'll go to 6, and then 1,000 and we get our full sized 1,000 by 1,000 image here. Any questions on source set? Yeah.
>> Speaker 2: Yeah, wouldn't a good practice be just to put the low res version as the source?

[00:02:24]
>> Jon Kuperman: Yeah, that would be great, that would probably be the most performant one. So if you have a source, it's only gonna fire on browsers that don't have the source set. But it would probably be best to put your smallest one there. So on these old browsers, it's probably a good chance that they have worse network conditions and worse rendering engines anyway, just put the small one in there.

[00:02:41] I think that's the best practice for sure.