Personalizing for interest: media and complexity: complex. Manage your personalisation profile.
my name is Tim Benniks this is a turbotutorialand so in this tutorial we will have alook at the simplest form of aresponsive image and this is mainly donefor performance ideas so this is not aresponsive image in the terms of apicture tag that does like all the fancystuff for this ratio I will show you acropped in phase and then for anotherscreen size I will show you the wholemodel stuff like that this is not aboutthat this is about like the simplestform of putting an image on a page thatis hyper performance so on a smallscreen show a different image than on abigger one and so let's go into my vscode here and show you what we'redealing with so I have three images hereso I have a friend's image small mediumand large and the ideas with an imagetag with a source set is that that imagealways Remains the Same image just thesize is different but the ratio staysthe same so I have a small medium andlarge and we're always working fromsmall too large responsive like mobilefirst that's the approach and so in thesource set what you basically do is sayfor the width of 500 take this image forthe width of 800 take this image and forthe width of 1369 because why not thatnumber take the large image and so thesource set is literally a littledatabase to the browser that says theseare the options you get to choose fromwhen you render this image right and sonext to the source that we also have thesizes property because what you can dowith the sizes property is you can sayif a certain media query hits the imageis going to be 50 of the page and wehave another media query hits it's goingto be a hundred percent width of thepage and based on that the browser hasto change its mind like because if I'm50 Friends of the screen let me justgrab a smaller image because that fitsbut then there's also other things thatinfluence this because this is a MacBookit has a huge retina screen so it willthe browser will likely choose higherresolution images first because it looksbetter same for on your phone so there'sthere's a few things that play that makethe browser choose so if your Source setthe larger your Source set is with themore options you give it the smarter thebrowser can choose what image to rendersolet's have a look at the browser so nowyou can see this is this like I made itsuper small right so it's gonna loadthat small image and I disable the cachenow so you you can see that when I nowscroll up you see that at around 300 italready chose the medium one becauseI've written a screen so it wants abigger one sooner because there's justmore pixels here and then at one pointum it's gonna grab the large one andthen it stays the large one because Ididn't give it more options if I nowdon't have cash and I refreshit actually keeps showing me the largeone because it already loaded it so whynot browsers are really smart nowadaysso I'm going to disable the cache againand go back to the beginning because nowlet's add another property to the sizesattribute right so let's say until 800pixels from 0 to 800 this image is goingto be 50 of my screen size right 50 VW50 units off the screen and then if itdoesn't match that it's going to be ahundred percent so because of that it'sgoing to load smaller images more oftenright because it's only 50 of the screenso let's refresh this oh before I dothatum I have to remove this width of ahundred percent because otherwise it'salways going to be 100 of my screen Ijust added that to show youresponsiveness fun stuff so let'srefresh and you'll see it's now muchsmaller right because it's actually thisseems to be more than 50 I don't knowwhat's happening there but that's whatthe browser is doing there you go nowit's actually 50. interestingimages are hard let's let's be honestit's strange Behavior sometimes sobasically when it's bigger than 800 100VW shows you everything when I go belowthe 800 it goes to 50 so it is allowit's able to actually fetch a smallerimage to do thatright and so that way you can kind ofinfluence the browser when you kind ofknow in this context my image is thatsize and my dad contacts my image isthat size tell the browser right itdoesn't always know andum other than this stuff always add anALT tag and consider loading equals lazyor loading equals eager that's it that'sit for simple images there will be moretutorials on more complex scenarios andthere you go uh cheers and I'll see youin the next one
Learn about responsive image basics
Learn about the basics of responsive images.