Turbo Tutorial | Learn about responsive image basics

my name is Tim Bennett this is a turbo tutorial and so in this tutorial we will have a look at the simplest form of a responsive image and this is mainly done for performance ideas so this is not a responsive image in the terms of a picture tag that does like all the fancy stuff for this ratio I will show you a cropped in phase and then for another screen size I will show you the whole model stuff like that this is not about that this is about like the simplest form of putting an image on a page that is hyper performance so on a small screen show a different image than on a bigger one and so let's go into my vs code here and show you what we're dealing with so I have three images here so I have a friend's image small medium and large and the ideas with an image tag with a source set is that that image always Remains the Same image just the size is different but the ratio stays the same so I have a small medium and large and we're always working from small too large responsive like mobile first that's the approach and so in the source set what you basically do is say for the width of 500 take this image for the width of 800 take this image and for the width of 1369 because why not that number take the large image and so the source set is literally a little database to the browser that says these are the options you get to choose from when you render this image right and so next to the source that we also have the sizes property because what you can do with the sizes property is you can say if a certain media query hits the image is going to be 50 of the page and we have another media query hits it's going to be a hundred percent width of the page and based on that the browser has to change its mind like because if I'm 50 Friends of the screen let me just grab a smaller image because that fits but then there's also other things that influence this because this is a MacBook it has a huge retina screen so it will the browser will likely choose higher resolution images first because it looks better same for on your phone so there's there's a few things that play that make the browser choose so if your Source set the larger your Source set is with the more options you give it the smarter the browser can choose what image to render so let's have a look at the browser so now you can see this is this like I made it super small right so it's gonna load that small image and I disable the cache now so you you can see that when I now scroll up you see that at around 300 it already chose the medium one because I've written a screen so it wants a bigger one sooner because there's just more pixels here and then at one point um it's gonna grab the large one and then it stays the large one because I didn't give it more options if I now don't have cash and I refresh it actually keeps showing me the large one because it already loaded it so why not browsers are really smart nowadays so I'm going to disable the cache again and go back to the beginning because now let's add another property to the sizes attribute right so let's say until 800 pixels from 0 to 800 this image is going to be 50 of my screen size right 50 VW 50 units off the screen and then if it doesn't match that it's going to be a hundred percent so because of that it's going to load smaller images more often right because it's only 50 of the screen so let's refresh this oh before I do that um I have to remove this width of a hundred percent because otherwise it's always going to be 100 of my screen I just added that to show you responsiveness fun stuff so let's refresh and you'll see it's now much smaller right because it's actually this seems to be more than 50 I don't know what's happening there but that's what the browser is doing there you go now it's actually 50. interesting images are hard let's let's be honest it's strange Behavior sometimes so basically when it's bigger than 800 100 VW shows you everything when I go below the 800 it goes to 50 so it is allow it's able to actually fetch a smaller image to do that right and so that way you can kind of influence the browser when you kind of know in this context my image is that size and my dad contacts my image is that size tell the browser right it doesn't always know and um other than this stuff always add an ALT tag and consider loading equals lazy or loading equals eager that's it that's it for simple images there will be more tutorials on more complex scenarios and there you go uh cheers and I'll see you in the next one foreign [Music]