DON'T Serve Unoptimized Images - Webp, Srcset, ImageKit, and more!

one of the worst things that you can do when building a web application is serve images that are way too big and aren't optimized for your users so in this video i'm going to show you a few different ways you can optimize your images including doing dynamic transformations using image kit so let's go ahead and get into it what's going on everyone my name is james hugh quick and i do weekly videos on web development related topics and in this video we're specifically going to talk about image optimization and how to make sure that you don't send images to a user or to a browser that are too big we always want to send basically as small an image as we can for two different reasons if you try to send back really big images and we'll see this in a second it will slow down the experience for the user so if the browser is trying to load this really big image it's going to have to take time to do that now the other thing is it's also going to use extra bandwidth for the user so if they're on their phone and they have maybe not an unlimited amount of data you don't want to be sending down these really big files because that's going to be data that they're going to have to ultimately pay for so several different reasons why these images should be optimized we're going to cover a few different ways to optimize them in this video including using image kit as a sponsor today so what we're going to do is eventually upload images to imagekit and use their dynamic transformations in the urls to get different versions or different sizes of our image without us having to do any of the work so we'll see that hands-on in a second let's go ahead and dive into the demo we can see this progression of starting with really unoptimized really big images all the way down to the appropriate image for the appropriate size so let's get into it all right so what i've got open here is an image gallery and notice i've got it in responsive mode in here so if you go to in chrome the kind of device toolbar button over here and then change to responsive this allows me to move this around and i want to do this so that i can show you what this gallery looks like on different screen sizes so let's take a look really quickly at the code here this is kind of a dynamically generated gallery inside of javascript where i create an array of indices indexes from one to ten i iterate through each one and then i create an image element for each one and then add in the source property to link to the appropriate image in this images folder this is all just vanilla html css and javascript so hopefully it's relatively straightforward and then the last thing we do is add an event listener to the individual images so that when we click them we can then see them in a full screen pop-up if you're interested in creating a vanilla javascript html css gallery like this i've got a video that will be up in the next day or two i'll make sure to add a card up here so you can go and check it out but that's the demo that we're going to be working with now if i open this up a little bigger i want you to see when i refresh this page and i'm not throttling my network connection or anything but you see there's some loading time with those images right like you get part of it but not the whole thing and if we go and look inside of these images and hover on one of these network requests so i've got to open the network tab and then the image filter here if we hover on one of these it's making a request to a local folder that i'll show you in a second and the request comes back at 2.6 megabytes in size which is huge for an image and what i did was these are the cover images for our compressed fm podcast weekly episodes on web development and web design if you're interested these are the topics that you can see these are the cover images that enfigma are just really really big to start so they're three thousand by three thousand huge images we almost never will need that we'll usually export that at a smaller size or or do some of the tricks that we'll show you here in a second so these images by default are just huge and this is inside of a project an image gallery i've got inside of vs code and inside of images i've got each one of these images listed here again they're huge they're three thousand by three thousand so one of the things that we could do is we could kind of compress some of these images compress compressed fm there's a pun for you but in this you look at these images since there's a lot of a lot of pixels in here that are the exact same color look at all the black and the yellow and stuff like that it's really actually pretty easy to compress these things to get smaller sizes so one trick one thing you should always do is run these through something like tiny png and what i did is i uploaded all of these images and then it will give me back a smaller image about 78 smaller so it went from 2.6 meg megabytes to 567 kilobytes that makes it a lot smaller so after i did that i put those images inside of the compressed folder again compressed and once we swapped that out let's add in the slash compressed to this so if we do slash compressed and then our cover image the application will look the same but the images that are coming down are smaller and there should hopefully be a little less loading time in there but regardless we see that these in this bottom right here are 584 kilobytes so now significantly smaller than what it was when it was 2.3 or whatever it was meg so we're already a lot smaller these should already be a lot quicker but we can really take this to the next level by using today's sponsor of our video image kit so what we're going to do or what i've already done is sign up for a free account with imagekit you should do the same and then i uploaded all 10 of those original images the really big ones the 3 000 by 3000 you can see that in here i uploaded all 10 of those now alternatively instead of uploading them directly to imagekit i could integrate imagekit with several other different providers something like an amazon s3 bucket azure blob storage google storage firebase storage cloudnary buckets so there's a few different ways that you can connect your images but in this one i've uploaded my images directly to imagekit itself and now what we can do is use the urls from image kit to be able to do some really neat stuff so let's take a look at what this is let's go back to our source code and let's replace this image source now with a source that's coming from image kit i'm going to grab the url and update this image source with that one all right so we're updating this image source and by the way inside of this code what it's doing is just iterating through 1 through 10 creating the image and then adding it to the gallery so in here we're setting the source for that image so we're starting by setting this image to use the url that comes from image kit so you have ik dot image kit dot io slash and then kind of your space name my name is james q quick and then the specific image that we're looking to reference now usually when you upload these to image kit they'll give you like a little suffix like a random string i got rid of that i edited all these to keep the format similar to how i had them stored locally whereas just cover underscore underscore episode and then dash and then a number of the episode so let's take a look at what happens when we do this let's save let's come back to our application it will refresh and now it's loading these images notice the loading there took a lot less so if you uh there was no like half loading state of the images it took a lot less and if we look in here not only are these a little bit smaller they're now 401 kb as opposed to the 580 kb they're a little bit smaller and you might be wondering how because the images that we uploaded to imagekit were were the really big ones the 3000 by 3000 and they were the two something meg however big those were however big those original images were that's how big we uploaded to image kit but one of the things it does if we expand this is this is no longer serving back a jpeg file it's coming back as type webp so we're making the request to this jpeg file but it's sending back a webp format webp is a format that is now pretty commonly used in browsers i we'd have to check let's actually look can i use webp let's see how widely supported this is all right looks like we've got pretty good support over here from all of all the major major browsers but the key here is that not all browsers support this but webp is a really highly optimized format that imagekit didn't transform this image at all yet it just realized it could send back a better format for this image so by taking that really big one and changing it to webp now it's even smaller than when we ran this through the tiny png that compression earlier now not all browsers support this so what imagekit is able to do is when we make a request to imagekit imagekit is going to decide based on that request whether or not the browser can handle something like webp so if it gets a browser that can't handle webp it'll send back the original jpeg so we've already got a lot of optimization here by sending back webp instead of that original jpeg file but we can take this another step further by using image transformations with image kit and what this means is you get this dynamic url or you get a url that can then be dynamic and so what we do is we have our url endpoint we talked about this with mine this james q quick in here then we can add in transformations in here before referencing the image that we're looking for so what we can do is instead of loading the full image which is 3000 by 3000 we can tell imagekit give me a version of this image that is maybe only 600 pixels wide what image kit will do the first time we make that request is it will generate an image a version of that image that is 600 pixels wide it will then cache that image and save that image so that subsequent requests can request and get it back faster so it's kind of creating on-demand dynamic images for us that then subsequently are much faster and easier to load so let's take a look at what this looks like inside of this url before our episode image here we can do another slash and we do a tr for transformation so we're saying this is going to be a transformation and then what we'll do is we'll use a width of 600 here so we'll do our tr colon and then width dash 600 so what we're saying is give me the image it will give me the optimized format of this image but also we'll go ahead and transform it to a width of 600. so this is really cool so now let's watch let's save this and let's refresh again let's come back to the application let's make sure this refreshes if we look at these now we went from what was 405 kb now down to 46 kb smaller image still coming back in webp format and basically looks the exact same if you look at these you i don't think you could tell a difference in the quality of this image especially on this size because we're only displaying it at a max size of i forget exactly how big these can be somewhere around 600 as this scales up and down so because of that we're getting an optimized image not only optimized in terms of size by using that transformation also optimized in terms of format by getting it back in webp again nothing i had to do all we had to do was upload these images to image kit and then swap out this url now it gets even cooler what if you want multiple different versions of this image and this comes from the idea that if we have an image gallery probably what you're used to is you can click on one of these images and then get a full screen pop-up so if we do this if we do this full screen pop-up now we can see this bigger image and right now this is loading the really big 2.6 megabyte image because it's loading the original one that's embedded inside of my code inside of the images directory so what if we wanted to update this to then use uh the imagekit url as well so we could come in and potentially say hey instead of the image source being that one let's paste this in and update this this is going to be our selected image all right and instead of this being 600 let's say we just assume this thing is going to be a little bit bigger so this is going full screen so let's go ahead and get just a bigger image here in 800. so now let's say this let's refresh let's click on one of these to get the detailed image now we see this is coming back at 72 kilobytes again significantly smaller than our 2.3 or 2.4 megabytes that it was a second ago so we're already winning but what if we could what if we could request different versions of this image different sizes of this image based on the width of the screen that's available to us and then the pixel density of the screen that we're looking at this is where source set comes in and source set is really neat i had to do a little bit of research in in how source set works to make sure i was comfortable with it to do this demo there's a great video by kevin powell a friend of mine who has a video on source set and size attributes definitely recommend checking this out if you want some more details we'll walk through the basics here of just how we're going to get different size images based on the pixel density and the size of the screen so let's come back to the code and i'm going to copy in another snippet here or a few lines i'm going to paste this under where we set the source and then i'm going to uncomment these all right so what this is doing is we're setting the source set property of this selected image and source set property is used to define multiple different images that you might want to display based on a couple of factors with the browser so what we do is we say hey here's a version of this image that we request to be 400 width again the dynamic attributes or dynamic transformations with image kit allow us to do this that one is also it's going to be we're telling the browser in this case it's a width of 400 then we have another version that we request the 800 pixel width version from imagekit and we tell the browser this is a width of 800 and then you probably get the idea we have another version that is 1200 and then it display or its width telling the browser is 1200 as well so we're able to define these dynamic transformations using these uh little things in the url to get the specific size of the image that we want and then we tell the browser hey based on these properties that we're telling you the widths that we're defining for these images you figure out which one makes the most sense based on the device its pixel density and its width super super cool stuff so let's take this out um or let's not take this out let's save it uh one last thing to say is the source attribute in this case will now be a default so if source set is not used by the browser if the browser doesn't support source set it will use the original source property as a backup so it's good to go ahead and set that property for source and then also set your source set property so that you get the correct image on the right size right pixel density all right let's save this let's come back to our application we are in right now a pixel density of one so density per density pixel ratio i guess is what that is yeah their device pixel ratio so this is a 1.0 which means we should get a lower uh version of image depending on how wide our screen is so let's go and do this smaller let's pick one of these let's look at this this is requesting the 800 so you can see that in the url below and then if we come and make this bigger let's see we might get a bigger image here so this is requesting the 1200 just because it's bigger we also could potentially change the pixel density to let's say a three let's refresh the page here if we even make this smaller even though it's smaller with the pixel density being so high we now are getting that 1200 as well so that's really neat if we were to take this back down and then do a pretty small not that small of a screen let's see maybe this small now let's test it let's do a refresh and i click on the image and see this is getting the 400. so you saw the 400 the 800 and the 1200 and the browser is able to choose the appropriate one based on the source set and again we're able to define these different widths of images based on the fact that image kit gives it to us in the url and just to kind of re-emphasize what this looks like if i go to this url in the browser with this being the oh i can't i can't do uh interpolation for variables inside of here let's just do episode one uh you can see this is a relatively small image i can go up to the 800 image i can go up to the 1200s image and then honestly a common thing that people do for that uh fuzzy uh fuzzy load the lazy load with images is serve a really really small image as it's loading the bigger one so if we did this down to like 100 pixels you'll see this is tiny and actually even if we maybe put it down to like 16 pixels this is going to be a super pixelated version of this image when we zoom in so if we were doing kind of like lazy loading fuzzy to clear images like the blurred effect with images we could serve something that's really small and then update it with the url for the big one and swap those out it's really neat how that works and image kit provides us the ability to do all of that with these transformations inside of the url now i only played around with the transformations with width in image kit if you look at the transformations you can do all sorts of stuff you can do width and height you can do crop you can uh select the quality of the image you can select the focus of the image smart cropping here you can do overlays you can overlay a watermark or an image or a piece of text you can do all sorts of really cool stuff but we used image kit today to do some serious optimization around our images to make sure that you're only sending the appropriate and minimal size to the user that you can get away with all right hopefully that helped you understand how to optimize your images and serve more performant applications to your users thankfully imagekit was able to help us do all of this by doing dynamic transformations and resizes as well as choosing the optimal image format to send down to the browser like we saw with the webp so make sure to give imagekit a try for image optimization in the meantime let me know what you're doing on your websites as you pay attention to its performance and making sure that your user experience is top-notch thanks as always for checking out the video and i'll catch you next time

Channel: James Q Quick

Views: 12,767

Rating: 4.9428573 out of 5

Keywords: image optimization, website performance, image compression, image tag html, srcset html, how to optimize images, increase website speed, tinypng image optimization, webp images, image transformations imagekit, imagekit.io, how to speed up your site, how to use html srcset, how to use imagekit, web development tutorial, javascript tutorial, how to load images javascript, how to build fast websites

Id: pfHG6HL1GBw

Length: 18min 28sec (1108 seconds)

Published: Thu Jul 08 2021