srcset and sizes attributes - [ images on the web | part one ]

I've got a number of people asking me about how to set up responsive images on their site and for the most part they're asking about the picture element and the thing is to do responsive images you don't actually need the picture element there's two different things we can use there is the picture element itself but there's also the source set attribute the source set attribute is a little bit easier to understand and it can also be included inside of the picture element so for that reason I'm going to be breaking this up into a two different videos and it's gonna sort of kick off a little bit of a mini images on the web miniseries or a little series here on YouTube with this one focusing on source set which is probably most of what you actually need to serve up some nice responsive images so what we're gonna be doing in this video is looking at what source set even is how we can use it on our sites and why it's probably all you really need most of the time when you're writing your markup hi my name is Kevin and here on my channel we learned how to make the web and how to make it look good while we're at it and as I said this week's video is focusing on the source set attribute for our image tags so setting up images for our websites is a really important thing that I think a lot of people just take for granted and there's some really cool things we can do to make sure that people are getting the images they need and with the source of actually but we can do things like save bandwidth and just make sure that people are getting a nice high res image when they need it and so the way it works is you can actually serve up images in two different ways the first one is on the pixel density of the device that is being used so if somebody's on a Retina display or on like a even higher res now that we have like a 2x or 3x display we can ensure that the image they're getting is going to change depending on that so if they're on a really high pixel density device it's gonna give them a nice high res image if they're on a just regular computer screen 72 dpi they don't need to load in that big heavy image they can get a lower quality one and it's going to look just fine on their computer the other way we can have it decide which image to use instead of just on the pixel density is based on the width of the viewport so different viewport widths it could be on your desktop computer as loads it in nice and big and another users bringing in smaller or they're on a tablet and because your picture is small or your picture may be bigger it can load in different versions of the same image so they're always getting a high quality image but without using more bandwidth than they have to be using so this can really help speed up your site especially on smaller devices so that's always a win and it also has the benefit of always making sure people are getting high quality images when they need them so nothing looks blurry or weird on their computer so might sound kind of complicated weird we're going to tackle and look a little bit at what all of this even means in the whole idea of a resolution and pixel density ratios and all of that before we really jump into the source set attribute and but luckily source that makes all of this really easy to do so let's jump in there and check it out so before we actually get into the code I do want to give a quick example of why all of this matters and then it gets a little bit easier to visualize in Photoshop I have a small image here on my screen and it looks fine but the thing is if we zoom in on this a little bit we can start seeing it's getting a little bit blurry around the edges and this is exactly what happens when I open this image on a 3 X or 2 X device so on a 2 X device this is what it would look like and on a 3 X this is what it would look like where my edges are getting blurry and to show you a bit of an idea of what's actually happening I've got this one little blue dot on here so all of these little squares are the pixels in my circle and we have this blue dot that's right there and what happens is when this ends up on a 2 X device it's taking that and it's actually making it a 4x4 so it's taking a single pixel and it's stretching it out to be a 4x4 and if you're on a 3 X device it's taking that single pixel of information and it's stretching it to be 3 by 3 so the problem with this is as the as these pixels get stretched out they get blurrier and blurrier so to really see what's happening I'm gonna zoom to 100% because that's what it would normally look like so here we have this at 100% and then I can just to show you I'm gonna go up to 300% and push ok and it makes this really blurry edge because if i zoom in now you can see there's more pixels the are the pixels look smaller with how this is sort of doing it so there's more information here but it had to create that information itself and it leads to these really blurry edges and this is exactly the problem that can happen if you're using lower quality images on a high-res device the other time it will matter is just to lower the bandwidth that you are loading in so you might have a nice big image because you need it to be a nice big image on a big screen but then maybe my browser window is only this big do I need to load that same on a laptop and I'm using mobile connection I might not want to do that or on tablet I don't need this really big image loading it I can load a smaller version of that image in and save bandwidth along the way and that can be really useful as well as you can see here the difference in file size so even though my images are doubling in size I'm going from like a 1x I doubled the size to get to a thousand pixels by a thousand it's not actually doubling it's going from 256 to almost a Meg and then so I'm from 1 Meg to 2 Meg's here so from 1 X to 2x it's almost four times bigger and then I'm going from there to there I'm doubling it again so it's creating a pretty massive difference in file size so if bandwidth is an issue and you don't want people loading in images that they that are too big then they don't need at all this can be one really good way to can handle it so one thing you'll notice here I am in V s code and if you follow me regularly you'll know that usually I'm i encode pen so I'm gonna be using images in this it's a little bit easier to have it on my computer than code pen even though I can do it there and there was also a comment a little while ago from someone suggesting I use my text editor instead of code pen so for this it's easier I'm still gonna show the code so if you want the code from this there will be a link down below but I want to know what you think and what you prefer so there should be a little card popping up in the top of the screen right now this if you click on that you can vote whether you'd like seeing or you like it when I use code pen because it's easy to share and play with the code that I've created or if you'd prefer that I'm coming into vs code and writing my code in here never done a poll like this before so I don't know how I see the results but I'm curious to know what your thoughts on it you can also leave a comment down below and that could be useful too but the PO would be more useful for that because I think it'd be easier for me to keep track all right so we want to set up our image so before we do anything else let's actually just come in here and set up a regular image so we have our image with our source tag and our alt text so source we all know how that works so I have some images already set up so I'm gonna go to an images folder you can see I have my cat image here and I'm gonna hit save and there's my cat and just to show really fast I've set a width of 100% actually let's turn that off just for a second so there's my cat at 100% and you can see there's one X on there because this is my 1 X version of my image this is the smallest version of it at 500 pixels wide a little grumpy angry a looking cat so we all know the image source is well where where's the source of that image and where can we find the image that we're gonna be dealing with source set does let's start by looking at the technical description the mdn describes it as a list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use so right now we have one source in here and the most important thing of what I just read was that it's we're indicating a set of possible image sources so right now we only have one image source and what source set lets us do is actually put in multiple image sources so what we can do now is you can do all this like I can do my srcset lam this can all go in one line but just to make it a bit easier to read on the screen I'm actually gonna move things around just like this a little bit and you'll see why in a second it's gives me a little bit easier to follow along this is HTML so empty space really doesn't matter get in the way of anything and it make it a little bit more readable so what I can do here is I can actually put all the different versions of my image that I have jpg and their comma separated IMG cat 500-1000 dot jpg comma IMG cat 1500 dot jpg and I'm going to save that and actually I was time a readability so let's put each one of these on a new line and we'll move all of them over whoops there we go just to make it as easy to read as possible now the thing is I've told it I have three images to use but the thing is right now if I go and look well it's always the same image no matter what I do so I've told that there's three different images I can use but it's not actually changing the current image that it's using I've also kept the source here and this is a bit important because not all browsers support it browser support is actually pretty good right now for its close to 90% but Internet Explorer like you'd expect plus a few others aren't supporting it so if it doesn't work we can fall back to the original source and if it does work it's going to start using these ones if it recognizes the source set the other thing that's good about that or the other thing with that is you probably just want to put the lowest quality image here just to stick with keeping it low and easy on the bandwidth for you know it's probably an old computer and not the best devices they're on so you might as well just go with the lowest quality one so we need to give it more information to know which one we actually which one it's going to use so we can either give it two different pieces of information we can tell it what the actual width of the image is so I could tell it the width is 500 pixels or I could tell it what the device pixel ratio is that I want to be using so I'm gonna start by looking at based on the resolution so based on the pixel ratio that I want I'm just cuz I think it's a little bit easier to start with and it sort of falls into what we're gonna be doing after with the widths so just really quick on you've probably heard that there's like 1 X 2 X 3 X devices things like that resolution on the web is a little strange we're used to working with pixels but a pixel on one device is not equal to a pixel on another device that's because we're using CSS pixels so when I put something like say you do width is equal to 1500 pixels this isn't really 1500 pixels it's a little bit different what we're how that pixel is actually working it's a CSS pixel traditionally one CS pixal was just one pixel and it's one dot of light on a screen so that one dot of light on your screen that's a hardware pixel each little dot of light on the screen that's each little little dot that we can't see because they're too small each one of those is a hardware pixel so you used to be that all devices had a one CSS pixel was one Hardware pixel but then Apple created retina displays and it rendered each single CSS pixel as four dots so going back to here that's where that little blue dot that I had it was taking something that was one little little little dot and it was bringing it from you know this is what we were giving it and it was rendering it as a four by four square so this is a 2 X device and newer devices are up to 3 X and I think they've gone higher than that where you know that's the 3 X is when it becomes the 9 by 9 and this is the hardware pixels so the CSS pixel is one by one but that could render anywhere from being something small like this to as big as that even though you said it's one pixel across and this is an important thing to understand so this is the whole retina display is 2 X there's other things I said are 3 X now so what we want to do is we want to tell it which one to use so the first one you don't have to tell it that it's 1 X it's just going to assume that but I can come up onto here and say this is for a 2 X device and I can say this is for a 3 X device so I want my image here let's just even give this the width 500 pixels so I'm telling it my image has to be 500 pixels wide but depending on the device it's gonna get I want it to actually use a thousand pixel version of the image or a 1500 pixel version of the image and it's gonna shrink that picture into the 500 pixels because that's how big I told it to be and by shrinking it down it's going to give it the exact quality that we want because it's taking 1,500 smooshing it down into a 500 pixel space and we can actually simulate that in your dev tool so I'm going to go to my inspect here I'm gonna click here which is in firefox to get the responsive mode if you're in chrome you have this and it's right next to it it looks the icons identical but it's just over here so I'm gonna click on that and that opens up this responsive mode and when you're in the responsive mode here you can come and drag and change the the screen size and all of that and one thing you can also do is the density pixel ratio I think is a GPR if you're in Chrome where my little X here is there'll be three little dots you might not see this there's like a little pop-up menu you can get and you'll see a pixel density checkbox you can put on and then all of a sudden this appears here so I can go up to DPR of two or I can bring this up to a DPR three so when my page reloads you can see it's reloading that with the three X because I told it that on a 3 X device I want to use this version of my image or if I go to a 2 X device I want it to use my 2 X version of my image so in my 500 I've put that in 1 X in the you know just to make it so we can easily see what's actually happening here so if your image is always staying the same size you have a set width on it and it's always staying that size this is a nice easy way that you can go about changing the version of the image that's being used depending on the pixel ratio of the device that your that the user is using but there is another way to go about doing this and to me this is a bit more of a practical one so we're gonna see what that one is now so let's save that and we're gonna drop that back down to one actually let's close our responsive mode so I'm going to take this 2 X out of here and I'm gonna take this 3 X out of here and hit save so we go back to normal where on my 1x image and this 1x image is set just to match the size of my screen now one thing that's gonna happen is when my screen gets big you can probably see the quality of the image is dropping that's because I have a small picture and I'm making it bigger and bigger and bigger so I'm losing quality on that image it's starting to get a little bit blurry and if you had a smaller or especially you'll see it a lot on the text right here the edges on my text are starting to get really really blurry and that's not a good thing we don't want that to happen so another way we can do it because here it's my device is actually staying the same resolution it's the size of the picture that's changing so what I can actually do is instead of using the 2x and the 3x is I can come in here and write the size of the image so I do that by putting a 500 W a thousand W and that's because not because it has nothing to do with this number it has to do with the size of the image I just put this in here so it's easier for me to remember but this is the actual pixel width of my image and you'll notice it's not pixels it's 500 W for width it's a little bit different than something you might have seen but it has to be the W like that so I'm gonna save that and oh do you see that it's 2 X and the image got more clear let's go and undo these for a second and I'm gonna save so you see my image is not looking bad but especially if you look at the numbers here it's a little bit blurry and I'm gonna put these back on display a lot of attention here when I save and you can see the numbers are nice and crisp and we'll do that one more time and you can look at maybe the cat's fur just makes a big difference when I save that and it jumps up to the 2x and now when I change the size of this you're gonna see I'm gonna get to a point nope now it's jumped up to the 3x because it's going my browser window is bigger than this so I'm gonna use this image and then it's gonna drop back down because it doesn't need the big version anymore and then eventually it will drop back down to the 1x as well in chrome I noticed it doesn't jump back down so even if it's on if once the 3x is loaded it's not going to go back to the 2x and back to the 1x and the idea there is it's catched in the system anyway it's already in my browser's cache so why should it it has a high-res version of the image so it's just gonna keep using the high-res version it's not actually gonna has doesn't have to download anything new because that image already exists in there so if you're trying this out with Chrome and you go big and it gets a 3x and then it's always staying at 3x that would be the reason why and if you want to prevent that from happening so you're testing stuff in any of your or in Chrome or in Firefox if you go to the network in the dev tools there's a disabled cache that you can turn on and then as long as that's opened it will disable your cats you can refresh and then you should be good to go and the reason it needs this width here and is because it doesn't know the size of this image before the image loads so normally when a browser loads in unless you explicitly state the width and the height of that image it needs to load that image before it knows how big it is so the image has to load in then it knows how big it is so part of this the whole idea here is that it's loading the right image and only the right image we don't want to load all of them and then pick which one to use we want it only to load the best one that it for the circumstances that it's in based on resolution and based on screen size so we need to tell it the actual full width of the image that we're loading in before that image is loaded and that's why we have this a thousand fifteen hundred and five hundred there or whatever the actual size of your image is now a really nice thing with using width rather than the 1 X 2 X 3 X thing it makes it a lot easier to use and just to show you what I mean here I'm sitting at my to X let's shrink this down so it drops to my 1 X and let's do a little inspect on here with my responsive mode and what my responsive mode is to big so let's shrink her down so there we go it's at a 1 X version of my image but if I actually switch this over to you see this is actually changing over to my 2 X or if I go to my take pixel density 3 and my screen gets big enough it's going to switch over to the 3 X so what this is doing and if we get small enough to go to the 1 X so I'm not saying I had a 3 X device you use this picture or use that one what the browser is doing is it's doing a bit of math on the fly so it's looking and going okay I have a 500 pixel image on a bit of advice that's say it's 360 across I can I get there you can type it in I guess so I have it on in device its 360 pixels across it does a bit of math for us it goes okay it's 500 pixels I'm going to divide that by 360 and that gives me the number one point three eight eight eight eight well no I'm on a 3x device so I can't use that one it's too small so let's try the next one I have a picture that's a thousand wide I'm gonna divide that by 360 and that gives me two point seven seven seven that's it's getting closer but it's still too low but hey look I have another image it's gonna do the math on this one turns out that one's way over three so it's going to use that just to show if I drop down to to the 2x image is loading in again it's a thousand divided by three sixty two point seven seven seven seven perfect that's above my 2x threshold so that is the image that I'm going to load in so you don't have to use the 2x of 3x this makes it so it's just going to choose the best possible image it can based on resolution and the size of the image so with the width of your image you don't really have to worry about what device it's being served on it's just gonna make that right decision for you anyway there are times maybe the density makes more sense where you want to put your 2x 3x and to me that'd be like a logo or something where the image size is never changing you have a set image it's probably not something too big and that it's just always that size on all devices the rest of the time I think this is the way to go and you know you could just always do it this way anyway and it would give you the best results so I find this is the easier of the approaches the only problem is you actually have to know the pixel width of your images to get it to work where's the 2 X 3 X it doesn't matter how big your images are it's just going to use it based on the pixel density of that image now one very important thing to take into account when you're using the image width is when we're setting like the 500 with here and when I'm changing the size of this right now my image is the size of my browser but if I come into my Styles here and I actually put this at 50% and I save it you'll notice it's still at 2x even though my image is kind of tiny and it's going to switch over to 3x when I get to about here so the way this is actually calculated is it's assuming that your image is width is a hundred VW or 100 viewport width so it's assuming that your image matches the SOT the width of your browser weather or whatever device you're on it's it's matching the width of the viewport for the website so it's looking at the size of this image it's going ok my let's just shrink this down actually so right now it's going up my viewport is less than 500 and I have an image that's 500 so I can use that one then when I get about 2 here it's why I've gone over 500 pixels from a viewport now this one is too small because my viewport is bigger than 500 so I'm going to jump up to the next one and then the same thing is happening when we get to here so even though the image is smaller than that it's still serving up the larger image this is cool but it's not always the case obviously here where my image is a little bit smaller it's a good fallback though so if you want to stop here it's probably not the end of the world but if you want to take this a step further you can with the sizes attribute this is where you go the extra step and actually tell the browser how big the image will be at various screen sizes by using media queries yep media queries in your markup and a little we're warning it can get messy and what we're gonna try and keep it simple for this example so what I'm actually going to do is I'm gonna change my layout a little bit here and we'll be back in one second okay so I've gone and just created a little bit of a two column a grid here but if I shrink down to below seven hundred and sixty pixels my images are stacking on top of each other and if I go bigger than that then we fall into a two column layout so very simplified but the type of thing you in a very simple level that you might run into in the real world so what we can do with this now is here where we have all of this stuff and actually come onto here and I can add the sizes equals and so we have a sizes attribute now the sizes attribute is where I bet if I'm in my media query and in the media query here works exactly like it does in the CSS so I can do my min width and whatever breakpoint you're actually using in your CSS is the same break point you're going to want to use here the thing is that's different is there's no curly braces or anything like that I do my min with 760 and then I want to tell it at this media query what are what's going on so at this media query my image is 50 of you port width so it's not exactly that obviously it's a little bit smaller but I'm saying at this size so 760 and bigger my image is pretty much taking up half my screen and then the rest of the time it's taking up a hundred percent and you could separate this with another min width here of say like 1280 and then maybe it's like 25 VW or whatever you need to have you can put multiple multiple media queries in the last one with no media query is in all other cases so the default will be a hundred and the reason I'm doing at default is 100 is the times when I'm at my smaller screen sizes so here it's using my 1 X then it's jumping to 2 because I'm hitting its bigger that my viewports bigger than 500 so it's loading up the next one then when I get to here it's going back down to my 1 X so at this size it's loading back in my lowest res image and the one that has the least weight to it and then now it'll work normally from there and I can't even get it on this screen size up to the 3x just because it's not taking up enough room and now if you really want to get super super close you can actually use calc in here thank Alex browser supports pretty much on par with source set and sizes so if you're using it in here there shouldn't cause any issues 50 viewport width minus 2m because I have my grid gap of 2m in the middle there so now I can really be nailing at home I think you don't really need to take it to this length if you don't want to there's times maybe you want to be a bit more specific and you can add in things like that to get the exact unit you need if you want to be that accurate so just to reiterate what this is doing when my viewport gets to a specific width it's going okay at this width my image is taking up half of that so it's taking up 50 of the viewport and it's cutting it so it's going ok my images actually only say 475 pixels so I can use the 1 X version of it and then when I get to here it's going oh now I need to use the 2x because even though my viewport is really big I'm only taking up half of that viewport so it knows exactly how big my image is which can be really really handy I also just want to say that this isn't for when we're resizing our screen like I'm doing now I'm resizing the screen as I'm working just to show you the different places this is actually loading in but in reality most people don't resize their screen as they're visiting a website it's when the page loads on their screen and this is the image we're gonna use so it's very rare that they've actually changed the viewport while they're visiting your site when the page loads for that user I'm choosing oh it's on a mobile phone with a 3x so I'm gonna use one of these I'm probably gonna end up with the 3x image but oh look now I'm on a laptop and on this laptop it's falling into two columns but the image is small so I'm using the 1x version of it and then another user somewhere else loads it up on their desktop computer and on that one it's 2 columns but the image is much bigger so then I can use maybe the 2x version instead so it's not for the reason for this isn't for people that are resizing their screen like I'm doing in this demo I just want to make that clear in case it wasn't and that's it and how far you actually want to push this and use it that's up to you it's not something that is a must-have but interestingly enough it has been around for quite a while now and a wordpress actually defaults to using this so there are CMS's where it's automatically doing this for you and there's actually workflow ways that are you can build into your workflow to somewhat automate the process not as much as a CMS might but we're gonna be exploring those a little bit later on sometime in the future not sure exactly when but it definitely will be a topic that I want to look at is automating it a little bit because it can be a little cumbersome as you can see with the markup when you're writing it all yourself but it is an important thing to consider when you're doing your site especially if it's something there's a lot of images in there because it's gonna greatly impact the speed of your page if you have like 25 JPEGs it can make a big difference on the rear aportfolio or whatever it is you can really make a big difference on your page speed index and that as we know can be a really important thing on conversion rates but I'm here saying this is important I'd love to know what you think is were you watching this grain this is cool battle I can't do that this way too much work to actually go through and do myself or do you see yourself trying to incorporate this and use it a little bit more often or maybe you're gonna use it sometimes and not other times and be curious to know what your input is so go down to the comments below and please let me know what you think about this and if you're already using it or if you think about or if you think you're gonna be using it or if it's just way too much and you're never never gonna actually use it I'd love to know what your opinion on it is and also don't forget things don't just stop here we're gonna be looking at the picture element next week and the picture element takes this to another step it takes advantage of the source that we can still use it but we can push things even further and do some really cool things with that as well so we're gonna be looking at that next week and with all that said I hope you did like this video and if you did please hit that thumbs up to let me know about it thank you just so much for watching the video all the way to the end here a massive thank you to my patrons there's a few new patrons this month and I just want to say thank you so much for thinking what I'm doing here is important enough to support I greatly greatly appreciate it and of course not just the new guys everybody who's been supporting me this whole time I really really she ate it it's yeah it means a lot to me the support I'm getting from you guys um and with that said thank you so much once again I think I've said it like three times now but thanks again and of course don't forget until next time to make your corn of the internet just a little bit more awesome

Channel: Kevin Powell

Views: 54,712

Rating: 4.9608755 out of 5

Keywords: Kevin Powell, tutorial, html, css, images on the web, html images, srcset, sizes, scrset attribute, sizes attribute, image scrset, sizes html attribute, responsive images, html images advanced

Id: 2QYpkrX2N48

Length: 30min 8sec (1808 seconds)

Published: Wed Dec 05 2018