How To Load Images Like A Pro

the biggest reason your website feels slow is because your images load like this it's painful to look at and just makes your website feel incredibly sluggish even if everything else is blazing fast that's why in this video I'm going to show you how to make your images load like this instead as you can see we got that really nice blurry background it's going to be lazy loaded and everything is going to be super performant [Music] welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner and today we're going to talk about lazy loading images as well as getting that blurry loading background that I showed you at the beginning as you can see here when I just refresh this page it looks like everything is incredibly quick and responsive and that's because my internet speed is incredibly quick and I'm downloading local images but if I try to emulate what happens on a slower internet connection by coming over to my network Tab and I'll just do something like Fast 3G for example I'll just do a Refresh on this page you'll notice that the images load in incredibly slowly as you can see and when I scroll down to the bottom of the page all I get is essentially a giant white box which is obviously not ideal instead I would like my images to have this nice little blurry Brack onto them which would look a lot better instead of slowly loading in one after the other now if I go over to this other example this is the final working example as you can see when my internet speed is fast everything refreshes incredibly quickly and it looks quite good and if I go over and I change my network speed to be a slower speed like Fast 3G when I refresh you notice instead getting a bunch of white boxes instead I'm actually getting these like Blurry background here for what the image could look like and then as soon as the image is done downloading entirely it's going to fade that image in overplace of these different blurry backgrounds that you can see here now these images are very large they're definitely not optimized as you can see these images are like a megabyte each not at all optimized but this is just kind of to show you what happens in the cases where you have these slower images as you can see as they're starting to download they're slowly fading in which looks really great now the actual process of implementing this I'm actually going to break down into two separate steps because there's two things that we need to tackle here the first is going to be how do we lazy load images for performance reasons and the second is going to be how to get that blurry background but before I get started with any of that I do want to mention that I have a full blog article on this as you can see it covers everything that I'm going to cover in this video in a written form so if you want to check that out I highly recommend checking it out I'll link it down in the cards and description for you it even has interactive examples so going back here we'll close out of the working example we'll just look at this example I'm going to do a quick inspection on the page I'm going to go to the Network Tab and what I want to do is I only want to select images as you can see here I've selected just images and I have nothing at all showing up no throttling nothing like that I'm just going to refresh my page and you'll notice if I look I've downloaded 16 things that you see that 16 out of 18 that's saying I've downloaded 16 total images which is how many images there are on my page but you'll notice I'm only able to see like four maybe six images at a time on my page I can't see all 16. so my page is downloading even images all the way down here at the bottom even though I can't actually see those images yet so this is clearly not something that I want to do so I want to talk about implementing lazy loading which will only load the images that you can see and then as you scroll down the page it'll start to load more and more images so let's just go back to the very top here what I'm going to do is over in my source for my HTML as you can see we have a really simple just grid layout pretty straightforward with some image tags I want to go on to each one of my image tags and all I want to do here is just type in loading and set that equal to Lazy by default it's set to eager which means it loads right away if I just change this to lazy it's just saying load this only when it's able to be viewed or about to be viewed if I just copy that down and I paste that for every single one of my different images so I can just come in here real quick I'll just get a bunch of cursors onto each of those paste that down give it a quick save now my images are lazy loaded if I do that same inspect trick go over to the network tab I want to clear everything out so there's nothing at all showing up I'm just going to refresh my page and if I go full screen you'll notice now we've only downloaded 10 of those 16 images so what's happened is it downloaded the four images of the front and it downloaded the next six images that are going to be seen on the screen and if I open that Network tab back up real quick you'll notice that as I scroll it'll actually download more and more images so we're at 10 images right now and as I scroll that number increases and now you can see I've scrolled to the bottom all 16 of my different images are being downloaded so it's only downloading those images as soon as I get to the point of actually being able to view them which is really great and it saves you a lot especially if you have a lot of images on your page now just doing this though isn't going to fix the problem of that white background showing up and the images loading slowly if I go back cure to throttling on Fast 3G and I refresh my page even though it's downloading less images because it only has to download the images at the top you can still see I get that problem where I kind of get these white sections on my page it just doesn't look very good overall in my opinion and you can see I just have this giant blank section with no indication of what this is even supposed to be and this is the ideal scenario where you want to do lazy loading for your images in a little bit more advanced of a way because all this does is just delay loaded images until they are viewable on the screen what I want to do is I want to show a placeholder image that's super blurry and then load the image in the background and show it over top that way we don't get a scenario where our image is slowly loading from top to bottom like if I do a quick refresh again you'll see this very first image it just shows up top to bottom if we just scroll the very top here wait a second for it to actually show you can see everything is just going top to bottom really slow obviously that's not ideal and does not look very good so the easiest way for us to fix this problem we'll just get rid of throttling for now is we need to wrap each one of our images inside of a div so I'm just going to come in here I'm just going to wrap this very first one in a div just to show you what it looks like on the this first one I'm going to add a class here called blur load you can call this class anything you want this is just going to be the class that determines that you want to have that blurry image and it's wrapping your actual normal image then the really important thing here is I'm going to set a style and this style is going to be a background image and this background image I want to be a very very very small version of our image so in our case I actually have some images in my image folder you can see I have a small version and a normal version and I'll just show you exactly how I generated that version in a second but this small version here is incredibly small for example if I just come in here and I change this URL to something that doesn't exist and you can see that I have a bunch of these images being gridded across the page that's how small my image is it's only 20 pixels wide that's how super super small it is but if I change my Styles a little bit by selecting that blur load class I just come in here and I change that I want the background size here to be covered that just means it's going to expand to fill the full space instead of repeating like this you'll notice I automatically get a blurry image which already looks great and the thing that I want to do is I want to make sure that my background position is also going to be in the center so I can say Center like that and I want that to match my image up here so I'll just come in here and this instead of saying background is going to say object there we go and I can also change this to be object fit to cover and the real key here is whenever you're doing this blurry loading you want your background size and position to match your object fit and position as well that way they perfectly line up over top of each other and when it fades in it's going to look really smooth so already just by doing that you can see I get this really cool blurry version of my image and if I were to have an actual image URL that was correct you can see that the image is kind of line up to each other fairly well it's obviously not perfect because a 20 pixel image is super small but if I do that for all my different images it actually looks relatively close to what the image is without being a large resource for you to download because if I go ahead and I look at the actual image here this small image is 267 bytes that's incredibly small compared to the normal image which is massive at 530 kilobytes obviously it's not optimized but you can see the difference in size just by looking at it and when I zoom in you can see it's just a super pixelated version of the image you can even see the individual pixels because it's only 20 pixels wide now the way that I generated those images is fairly straightforward essentially I used ffmpeg and if I scroll down here little ways in this article you'll actually see that I have the exact command written out here so if you go to the article I'll link in the description you can copy the command if you want but essentially you just specify the input that you want pass it in the name of the image you pass in this flag of Dash VF and that's just saying you want to modify the actual image itself and we're changing the scale to be 20 pixels wide and negative 1 means keep the same aspect ratio and then this is the name of the output file that we want to create fairly straightforward so if you want to use ffmpeg you can there's tons of other ways to downsize an image though you can do it online there's online tools you can open up something like figma or photoshop and just manually resize the image fmpeg is just a programmatical way to do it and it's fairly easy and you could automate this process if for example you had a bunch of images on your site so now what I'm going to do is I'm actually going to go ahead I'm going to copy this div down I'm going to wrap every single image in its own div and I'm going to give them all their own background image to based on the actual image that's showing up so just give me one second to do it there we go I just changed all of these and every single one has their own small image that's showing up in place of the large image now you may may think that this is enough to already get most of what we want but it's not quite that easy if I go back and I throttle my network speed again to see what this looks like you'll notice that the blurry images show up right away which is great but as the normal images load in you see they load from top to bottom which obviously doesn't look super good it's obviously not what we want so instead we need to hide the image until it's entirely fully downloaded and then we can show the image and to do that we're going to write a little bit of JavaScript I'm just going to put that at the very end of my body just so that we can get every single thing inside of one HTML page here just so it's easier for you to follow now what I want to do is I want to select all of the different blur divs that we have so I can just say document dot query selector I want to get all of them with that class of bolera div so whatever class you give the element just make sure you select based on that class that's what I'm doing right here then I just want to Loop through them so we can say blur divs.4 each and essentially I want to set up an event listener on my image for when it is loaded that way I can make sure I show it properly so we're going to Loop through each one of these divs just like this and I want to get the image and the image here is just query selecting image inside of here so I can get query selector for image inside of that div just like that now we have access to my image so I'm going to create a function called loaded and this is going to be called when my image finishes loading and we'll do whatever we want inside of here for example show image there we go and then I'm just going to have a really simple if check here I'm going to check for the complete variable if this is true it means the image is already downloaded so if the image is downloaded it's like super fast to download and it downloads before the script tag runs well I just want to call this loaded function right here that means the image is already done loading we don't have to do anything else otherwise I want to add an event listener to my image so we're going to add an event listener here on load and I'm going to call the loaded function and this just means as soon as my image is done loading it's going to call this function so it's going to call the function either right away if the image already loaded otherwise it's going to call the function as soon as the image loads so once my image is done downloading we're calling a function that allows us to show the image now to handle the showing and hiding of the image I'm going to be using a class for that so we're just going to come in here I'm going to say div.classlist.add I'm going to add the loaded class to it and then I'm going to use that in my C SS to actually determine how I hide or show different things so if we come all the way up here we'll just minimize that into our CSS we can have some code like this so we can say blurload dot loaded and then any Styles in here are going to apply as soon as our image is downloaded so what we can do is we can take all the images inside of our blur load just by doing this and what I want to do is I want to hide them by default so we'll just say display none but instead of doing that since I want to do like a fade animation instead I'm going to set the opacity to zero and what that's going to do is allow me to fade my image in once it's loaded so I can take this selector right here and I can say that my image is going to come in with an opacity of 1 when it is loaded and then we can just do a simple transition we'll say like 200 milliseconds ease in and out we want to do this on the opacity property and what that's going to do is it's going to be a 200 millisecond fade in as soon as my image is done loading which is going to look really good now it looks like something's not working because obviously we're not getting our loaded images shown up so I'm guessing some of our JavaScript is wrong if I look here it looks like I forgot to include the else here there we go so now if I add that in give my page a refresh it's still not working and that's because again this should probably say blur load instead of load blur div and now if I save you'll notice everything's working and it gave me that fade animation but the key here is if I throttle my network speed down here to a fast 3G and I refresh you'll notice it doesn't give me that top down version of the loading of the images it's going to wait until the entire image is downloaded which in our case is pretty slow because these images are quite large but as soon as the image is fully downloaded then it's going to fade that image in as you can see these background images for the blurry stuff they actually look rather good for how small they are only being 20 pixels wide they relatively look kind of like what we want them to which is great you can play around with that size by making them bigger or smaller if you want more or less detail but it's a really easy way to get this automatic blur as you can see we're getting everything to fade in which looks really really good let's disable that throttling because there's a few extra things that I want to do to this loading animation to make it look a little bit better for now I'm just going to comment out the code that adds that load to class and it's just going to give us the blurry version by default here now what I want to do is I want to make it obvious to the user that the image is currently downloading and generally the way that we like to do this is like with a skeleton animation where we kind of have like a pulsing animation where things are getting brighter and darker and brighter and darker and there's a really easy way for us to do that inside of here again you can do whatever animation you want but I think this one looks pretty good so what we can do is we can select our blur load here so we'll just say blur load and I want to actually get the before element I'm just going to place essentially a white rectangle over top of everything so we can say our content here is going to be blank we can position this absolutely so we'll say position absolute our inset is going to be zero that just means it's going to touch the top left right and bottom all of those are going to be zero and our blur load here we're going to set as a position relative that way we're absolutely positioned inside of it finally I'm just going to set a background color for now I'm just going to set it to White and if we say if you'll notice we get a bunch of white rectangles which is great but instead I want this to instead be an rgba value because I want it to be partially transparent so we're going to do white and let's just make it like 10 percent opacity so now you can see we kind of have this like slight white rectangle over top of everything and what I want to do is I just want to increase and decrease the opacity of this to kind of give it a pulsing animation so let's give it an animation we'll call it pulse and then let's just say that we want it to last 2.5 seconds we don't want it to be super fast and we'll make it an infinite animation so now I can come down here with my keyframes this is for pulse and at zero percent I just want my background color to be a specific background color in my case I'm going to set it to zero here then what I'm going to do at 50 percent oops fifty percent as I'm going to set my background here to 0.1 and I'm going to do the exact same thing at 100 but I'm going to change it back down to zero again just like this so now if we give that a save you can see that it's pulsing in and out it's kind of giving us that animated look where it's just giving that little bit of a pulse it's rather small and not super in your face but I think it looks really good and it kind of gives the appearance that things are downloading and again you can change this around by maybe making it more white so it kind of has a more intense animation you could speed it up slow it down whatever you want and we can also remove this background color here because it's taken care of in our animation for us and that looks really really good I really like that and what we can do is just make sure that when we load this we remove that animation because right now if we just comment this in and we see that everything's loaded we're still going to have that animation showing up which is definitely not ideal you can kind of still see it a little bit so instead what we want to do is we want to select one of our blur load is loaded we want to get the before element and we're just going to remove the content from it that's going to essentially completely remove the element you could also come in here and you could remove the animation itself if you want by same animation none whatever works for you but setting the content to none is good enough that's going to remove everything for us now if you want to take your image optimization to the next level you're going to want to use responsive images which I talk all about in this video right over here also if you want to check out written versions of this article or that video linked over there they're going to be down in the description below for you with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 181,711

Keywords: webdevsimplified, lazy load images, lazy loading, lazy load html, lazy img, lazy load img, img lazy, img loading, img defer, lazy load images js, lazy load images html, lazy load images css, lazy load js, lazy load css

Id: hJ7Rg1821Q0

Length: 15min 47sec (947 seconds)

Published: Tue Jun 06 2023