Check out a free preview of the full Mastering Chrome Developer Tools v2 course:
The "Querying By Size" 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 reviews images performance in the context of responsive websites and how srcset HTML tag for image elements can aid in delivering the right image for the appropriate browser viewport width. - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset

Get Unlimited Access Now

Transcript from the "Querying By Size" Lesson

[00:00:03]
>> Jon Kuperman: So we talked a lot about image performance when we did the audit. The images were too big and we talked about things you can do, you can make them smaller like if they can only be 1,200 pixels at max, make it 1,200 pixels. You can remove the metadata, you can compress them.

[00:00:16] Those are all great things. But a lot of times with these apps that we're building, they're pretty dynamic. So we have a mobile layout, maybe a middle sized layout and we have a large sized layout and you kind of get into that same problem. So if we have a screen max size of 1,280 pixels, so we do the smart thing and we cut our image down to 1280 pixels wide.

[00:00:35] It's till a big waste of time, if you're on a small screen. A small screen is still gonna load that 1,280 pixel and then shrink it. And so you kinda have a few choices to make your images load faster. So if you start with a basic image. Img src, large.jpg or whatever.

[00:00:51] There's an API called srcset for them. And so you can can use image srcset and what it will do is you pass it in two parameters that are strings. You pass in source set, you give it an image name and you give it at what width should that trigger.

[00:01:04] Kind of thinking like media queries for those of you that have done with CSS or if it's bigger than 800 pixels, do this. If it's smaller than and that is a way you can do it, you can do this with media inquiries. You can have a class on your image with no source and then you can have media inquiries that can check the size and bring them in, but there's am actual HTML API for it.

[00:01:23] And so this says, what image to load at what width? So the large image had 800-width since there are no other images specified to ran now. It's just gonna load the large image for everything. So this is equivalent to this at this point. So we've got the srcset instead of src now, but then you can start at a multiple.

[00:01:40] So you can be like cool I have like three versions of the same image. I want you to use the small one. If it is 300 width or below, I want you to use the medium one if it is 800 or below and the large 1, if it is 1,200 or below.

[00:01:50] 1,200 and above, sorry. Then you have these three images and the browser does a really great job of just knowing immediately the screen size you don't have to do a read for that in fetching the appropriate image. And then if you wanna do a fallback which you should, because older browsers don't support srcset, you should also leave a source in there for just the default one.

[00:02:09] That's fine. So image, the source is large. But if it supports srcset, we do this really cool dynamic thing and only pull in the images that we're actually wanting to pull in.