srcset & sizes Demo

[00:00:00]
>> We are going to use a website called responsive breakpoints that is gonna help us make a whole bunch of images for source set and sizes. And it will write us some code to go with that. And I want to demonstrate what I mean by the browser's going to make the choice of the image.

[00:00:18]
And so inside of your chapter 6, GitHub files, there is a folder called Banner demo. When, if you take a look inside of it, you'll find banners dot HTML. And you'll also see that I have a folder here called banners. So inside of banners, there are six different versions of the same Banner at different dimensions here.

[00:00:38]
And then there's an HTML file. The HTML file is super simple and there is no CSS at all. All the HTML does is, it has the single image element in it. And inside of that you see here we have sizes here on line 12. It says for a max width of 1200 pixels display at 100 viewport widths, otherwise display it at 1200 pixels.

[00:01:03]
In other words, just display it full width all the time. And then source set here has given you the conditions under which we have different images that are available here. And then of course we have the default version of this banner. And so this particular code came from the responsive breakpoints website.

[00:01:24]
Which I'm gonna go through with you in just a moment. But then what I did was once I got my banners back I opened up an image editing program. And I wrote the dimension of the banner on each one of these images so we could see how they changed.

[00:01:39]
So when to display this inside of Chrome. This is Chrome and as you see here I've got the browser window maximized and this is at 1200 is the banner exactly probably as you would expect. And so as I start to make the screen smaller, you'd expect that somewhere along the way here.

[00:02:02]
We're gonna swap out the banner, right at least once if not more than that. But look at this. It's just staying at 1200 the entire time. No matter how small we get down, it's still trying to load 1200. And when I first saw this, I thought, no, what did I do wrong?

[00:02:17]
I broke my code and everything else. But then I took a look at this inside of Firefox. Same exact web page now just displayed in Firefox. And you'll notice here that as I reduce the size of this web browser, we do switch to a different size picture. So here, we're at 533 pixels wide, we're switching to the 1084 image.

[00:02:44]
And then when I think about it, that may actually make sense. I am working on a Mac-book Pro that has retina on it. So it looks like just judging from the numbers here. It's choosing the images based on the fact that this is 2x pixel density. Something I didn't even account for inside of my code.

[00:03:04]
But remember the browser's making the choice here and this is one of the things it's thinking about. So then as I get smaller then I go to 958 at about roughly half that value. And I can't go any smaller here inside of just looking at Firefox this way.

[00:03:19]
If you put it in browser tools you can continue to make the window smaller. And you can find it will continue to load different versions of the picture. So this is the point I'm trying to make to you. It depends it really depends you write this code and you have no control over which image is going to get displayed inside of your browser window.

[00:03:40]
And you're going to trust the browser to make the right choice I even tried putting the stuff up online. Thinking maybe if it was on a server it would behave a little bit differently like on a real actual server. And that nothing dead did not change the performance of either Firefox or Chrome.

[00:03:58]
Feel free to test with Safari or edge my results was Safari were the same as Chrome's. Probably because they're both WebKit. But maybe edge would do something different I just don't have edge here on my computer.