How to use srcset to change images in HTML for responsive website

Hi there, this video is going to cover Source Set. It is a way of dealing with responsive images, like this small guy here, watch what happens when I get to a bigger device. Hey, it becomes a medium sized version, and what's happening is, we're actually switching the image rather than just resizing it, because he had a pink hat, now he has a green hat, ready for orange hat? Giant orange hat, so the image is actually, getting switched out depending on the browser width. It's pretty easy to implement in HTML, a little bit harder to test in Chrome, but we'll figure both of those out now in the video. 

To get started with this we're going to close down all the other documents, and we're going to create kind of a throw-away file, just to keep this nice and isolated. So we're going to save it, give it a name, call it 'Image Source Set'. Doesn't matter what it's called, it's going to be an HTML file. Weirdly we don't need a CSS for this to work, for this particular part of the Source Set. We do need all the kind of hidden data, doc type, the English language, all that, the main one is this. You can't live without the Viewport being set. So make sure that is in your document. 

Next thing we're going to do is just put in a real simple image tag, and I'll go copy some images across. So in your Exercise Files, under Project3, under your Pug, okay pugs in here, I've made three of them that we're going to use. Here's the original, this is from Charles, from Unsplash. If you need, oh, pick me up, go check out Unsplash, and look for Charles' work with his pug. Man, there's some good one, that's pug. The thing I want is small, medium, and large. So I'm going copy those, put on to my local folder, in the Images folder. So let's look at those images just so you know what's coming up. 

There's a small version, here's a medium version, and a big version. I added some text and changed the color of the hat. You wouldn't normally do that, you'd just leave it the same kind of image, but I wanted to make it very clear when these things change. VS code, what do we do? So let's first of all put in the image. So Images folder, and I'm going to use stuff with pugs more. You put in your Alt text, let's give it a preview, and have a look in the browser. Haven't got the right file going, turned it off, turned it back on again, there he is there. Cool. 

So we're starting with this, this is just, this is what we've done so far, so we've done nothing fancy yet. Now comes for the next part. So after our Alt text we're going to put in SRC, set, and in here is where we put in all the different sizes. Weirdly it doesn't do very helpful predictive text in here. So I'm going to cheat and go grab that, copy, and put it inside of here. Now when you give it a width, so we're going to say, you, activate at a width of 500 pixels wide. There's lots of different measurements. We've done ems and rems, pixels, and percents. That's another one, W for width, it's going to work for this case. All I need to do now is put in the different sizes. It doesn't do all the predictive stuff again, so we're going to copy it, and you separate them out by commas. So paste it in. Comma, paste it in, so I've got three versions, my three images, just going to change two things. 

So we've got medium, and this one's going to be 1000 pixels, oh, not 10,000, and this one here let's go big. I better check, this one's going to be 1500. Let's have a look what I called them; big, medium, small, great. So let's give it a test, it's going to kind of work. Check in the browser. So it's kind of technically working, but it's hard to preview in a browser because, what ends up happening is the browser downloads the HTML and says, great, got it. There's no point going and checking the screen with, it does this on load. The page needs to be loaded, and then it will check it So if I get it down quite small and I hit 'Reload', it still doesn't work because it's cached. 

Caching just means that once the browser has downloaded an image, it doesn't download it again, it goes, "Already got that image", It's called the same name, I'm not going to bother doing it. So we're going to force it to do it. There's a couple of ways, we've looked at it before. If you right click it, go to 'Inspect', depending, your device preview might not be on, it's a little button down here. So you can keep hitting, right clicking this and going, 'Empty Cache and Hard Reload' to save some time. Go to 'Network' and turn this on, 'Disable Cache'. So we're going to reset it now, right-click it, 'Reset Cache', so that it's going to not save it. So every time we reload it or resize the page, it's going to try and look for the image again. So what we're going to do is we're going to turn on our 'Device Preview'. We'll go to 'Responsive' at the top here, and we'll start dragging it. So if you start big, it's not going to get smaller, weirdly. You got to start small, something roughly mobile size, I'm looking up here, it's about 300-ish. I'm going to refresh the page and it works just fine.

So the page loads, It doesn't have an image already so it goes and looks, it checks, does some calculations and says, this is the width that I need, so I'm going to use this particular image. So starting small, I can drag it bigger, watch. See, I got past a certain point and it got bigger. I go a bit further, and eventually it goes to the big image. So that's how to switch them out. One thing you might have noticed up here in terms of the pixels, if I go down again to something small, hit 'Refresh', back to the small one, remember, we set ours at 500, we said, go all the way up to 500, but look at this when I'm dragging. See, watch when it switches, got there, it's kind of half where we had it. 

Oh, wonder what's happening. It's our Pixel Density or our Pixel Ratio, or the Dots Per Pixel, DPPX, High DPI Retina screens. There is lots of words for the same. Well, sure they're not identical, but they do refer to doing the same thing with our images. It's because this screen that I'm looking on has a Pixel Density of 2. You can fake it in here, say you want to put it back to 1, you know, that's the kind of basic one, you can go into these three little dots, not that one, this one, and go, I want to show the 'Device Pixel Ratio', and over here the default is 2, I'm going to set it to 1, and do the exact same thing.

So start small, hit 'Refresh'. You can see, now it starts small until I get to 500. Now it's never perfect because it's doing a kind of a calculation, and looking at which it should be, but there you go, switch out to 100. So I get out to 1000, and watch it change, there you go, the big one, giant pug. Sometimes it helps, I find in class sometimes the-- seeing it in this case, where you can see the pixels versus the pixel ratio, and you can kind of mimic. Say you're testing on say, like I know I had an LG phone there for a little while, it was a Pixel Density of 4. It was like, it was pretty mad to look at as well, it was like ultra life. So 3 would be really common for say your iPhone, if you've got an iPhone 10. 

I'm going to click on this one, I'm going to go down small, and what you'll notice is, if I hit 'Refresh', it’s medium already at this teeny tiny size, but look when I get up to just, just a regular old, see how big it goes, can you see there, your iPhone X, what does it go up to? I don't know the width of it, but it's already a big, at this really small file size, because it is jamming in so many little pixels, because the Device Pixel Ratio - man, people have got lots of names for this stuff - is really high and it can get higher. That's why, if you're previewing on say a MacBook Pro, its DPI is 2, but if preview on an iPhone X, it's 3, and you're like, "How can that MacBook Pro be less than 3?" I always, I kind of thought that as well, but, turns out it's because, your phone you hold really close to your face, so you really notice the extra quality, whereas an iPad is designed to kind of sit in your lap, or at least at arm's length. So it can get away with looking amazing with a less Pixel Ratio, plus I'm sure there's all sorts of considerations, for battery life and cost, all sorts of things. 

All right, was this helpful? A little bit of a rabbit hole. Now there is more to this Source Set. I wanted to give you like-- is this 90%? I wanted to say, I've given you 90% of the rules for it. There are other things you can do, you can ignore them all as well, and work. I haven't like left you with something that doesn't work, but you might just run into instances where you need to learn a bit more. And this article here was probably the best that I read about it. It's another one from Chris Coyier at CSS-Tricks. Definitely a man to follow, and this goes through the image set with a bit more, gets into a bit more of the nuts and bolts. 

The other cool thing you can do with it, is, because responsive images are so like, they keep changing every time I kind of redo a course I'm like, "Okay, now we're doing at times 2, '@x2'" Now we're doing this other thing, now we're doing this new thing. You can kind of, instead of just going back to this article, you can go to this thing called Responsive Images, and it's like a tract of his, so he tags articles based on responsive images. So when you're watching this course, this is 2019, it will be 2020 by the time you're watching this, probably. So go and read this, just see what the latest things are. 

We can-- I don't know what that is, have a look for what FUIF is, and just go through and just see, because they might say-- you might find an article called 'Set Source is Dead', why you should never use it. This thing evolves, keeps changing, but I hope you gave you a kind of a good understanding, well a good general understanding of that Set Source. It's pretty handy, requires you to create multiple images, and it makes us look at things like Pixel Density in a little bit more detail, and hopefully shed some light on it, maybe. It is a hard one to kind of get across. 

All right, that is going to be it for images. We are going to leave our site, we're not going to this, I've saved this one, it will be in your Completed Files. I'm going to leave this method where we just scaled it up and down, and we're going to continue on. All right, I'll see you in the next video.