Responsive Images

[00:00:00]
>> Todd Gardner: Now we can do this with plain old HTML, we don't need any JavaScript, we don't need any CSS for this. This is just natively supported in the platform as a responsive image. There's a lot going on in here don't worry we're gonna break this down. There are three different things happening here.

[00:00:18]
So I created a picture, the picture element supports some special properties inside that picture we defined at the bottom. Let's start at the bottom, at the bottom, there is the image, that is the same image that we already had, so herodesktop.PNG. And just for this example, I just added a width property to say, here's how wide this thing could be.

[00:00:47]
So hero image at 2800 pixels, it's out of fetch priority high, this will be the default image. If the browser doesn't know what to do, this is what it's gonna get. But we also can supply the source element inside of a picture, and this lets us specify some like pseudo CSS media queries and specify some different images.

[00:01:13]
So for mobile which we define as anything with a max width of less than 720 pixel. So if it's 720 pixels or narrower, we say this is mobile, so go ahead and get the hero mobile image. And then we use the source set attribute to specify rules, these rules, let us say, for this width, get this image.

[00:01:35]
For this width, get this image, we can specify however many of those we want. Now the browser is gonna figure it out, it's gonna make its own decision about, hey, how wide am I about to display this thing? What is the largest image that I can get for this space that I have.

[00:01:53]
So for example, if it says, hey, I have a space that is 701 pixels wide, it's gonna say, it's wider than this one, it's wider than 360. So it's gonna go up to the next one.It's not as big as 720, I'm gonna get this one. And it fetches that image and places it in there.

[00:02:14]
It allows us to precisely say, at these screen sizes, use this image. Now we can specify totally different images by just using multiple sources. So here any width greater than 721, pixels, we'll use the hero desktop. And we did the same thing where we specified at this width, anything less than this width with, I guess this is like kind of a redundant rule.

[00:02:40]
There'll never be something less than 720 width on desktop by definition, so that first line is kind of useless. [LAUGH] But the second and third line take effect where I'll decide between 1440 and 2800 which image to show based on how big the screen is that we're actually gonna show it.

[00:03:00]
Now, you don't need to take my word for it here, we're gonna do some stuff. We're gonna do some image optimization with some real scripts and and replace some stuff, so, let's do that now.