in this webflow tutorial I'll teach you how to optimize images for file size as well as for SEO here's the situation you have your website and you have a bunch of photos that you really really like either you took them from a stock photo website such as unsplash or adobe stock images or maybe you've gone out and shot them yourselves in your own iPhone or maybe you've even hired a photographer to take these photos so one thing to make sure of is file res resolution size so for example I'm on unsplash right now and if I download this specific image right here as you can see it's on my desktop and I put it into a design software in my case I'm using sketch but you can use any other software you like such as figma Photoshop canva anything really you just you would notice that the image that I've downloaded is 4,000 by 6,000 pixels so really this is the raw image that the photographer took maybe they edited in Photoshop Etc but usually when someone sends you a file either a photographer or a stock photo it's usually in a very very large resolution and it just doesn't need to be this large in resolution unless it's very very very specific reasons for example maybe you're doing a photography website and and you have a zoom in feature where you have to zoom into the image so really ID recommend the images to never be more than 1920 by 1080 that is the biggest resolution I would recommend simply because images are usually never this big but of course take this with a grain of salt if your specific website has a very Niche say you have a massive image throughout your whole page and it takes up the literally the whole screen then maybe you want to create it just a bit bigger but in general I never go over 1920 by 1080 and you Al you also notice if you go on websites for example if I go back to my web flow just a dummy project right here you'll notice that for example in this hero image you can just visually see in your eye that this image doesn't need to be 6,000 by 8,000 pixels I'm on a Macbook Pro 13 in maybe you're on an iMac 1920 x 1080 pixels you can just see that this image is never going to need to be that big so just always make the file size the file resolution very very small and this will make a huge difference and I'll show you exactly what I mean by this so let's go ahead and go into webflow and let's go and go into the asset panel by clicking J or clicking this button right here and you'll notice that the image are downloaded in unsplash if I just drag this in straight away you would automatically just notice that webflow doesn't even allow images more than 4 megabytes because of SEO reasons and and Page load reasons so what could you do in this situation you could go into a website such as compress jpg let's go ahead and do that we can slap this on you can see that the the image is 4.7 mbes but after I compress this it's probably going to be very very similar size because the people who uploaded an unsplash were very smart and compress the images so let's find out once it's loaded it's actually cut 43% so now I can actually hit download and I can go back to webflow and just re-upload this image and now it lets me add it because it's reduced it less than 4 megabytes so let's go ahead and click on to the gear icon once it's finished uploading and you can already tell it's very very slow so once that's done we can go ahead and click on to this gear icon on the top right and you'll notice that it's keeping the exact same resolution 4,000 by 6,000 as I mentioned earlier I think this is absurd but you'll notice that the megabyte has been reduced from 4.8 mbes to 2.67 but web flow is still telling you that it's very very large so this is obviously going to affect page load speed so what can we do about it so what I strongly recommend again is if we actually just upload a different resolution in this case I reduced it to 720 by 1080 pixels hit export hit JPEG and Export it as a JPEG and now if we actually upload this into web flow once again you'll notice that if I he hit this gear icon it's now reduced it to less than 1 Megabyte but yet it's still very large so what can we do about this now so what we can do is we can go ahead and click onto this button right here that says expand asset panel and we can go ahead and tick this specific image and we can go ahead and tick multiple images if you would like so for example let's just say this this image is 309 KB this one is 172 let's go ahead and tick these two as well then we can hit compress right here and hit compress again and webflow has this inbuilt feature where you can actually compress images into a format known as webp which is the gold St standard of image file sizes webp is the most compressed version of images without losing any quality depending on the resolution so as you can see now if I hit the gear icon this image is now 119 KB so we've reduced it so much from the original size and let's look at the other two images this has been reduced to 9.9 KB from I think it was 100 and this one has been reduced to 43 KB from I believe was around 300 KB so you can see this is significantly reducing the image size as well as increasing page load speed so you might be questioning yourself like oh but what about the quality you know can people see the difference let's go ahead and just put the quality side by side and I'm just going to go ahead and just add the image right here and call it image test and give this a width of 100% and leave the height as Auto we'll go ahead and choose our image that we compressed to I think it was 2 megab or 4 me gab and then below that I'm going to hit contrl C command V below that I'm going to go ahead and switch this image to the one that we compressed significantly into webp format now I'm going to go ahead and publish the site and I'm going to go ahead and view it and show you exactly how they both look identical to the human eye so let's scroll all the way down this is the first image where it's about 2 megabytes as you can see it's very very crisp very very sharp and if I actually scroll down this image here maybe it's slightly reduced in crisp and quality but it's essentially indistinguishable from the human eye and just keep in mind as well depending on the situation cuz now that I look at it this is actually a lot better quality than this I can I can just tell in most cases and again this is very unique to the section that you have you won't have an image this big that takes up the whole screen as I tried to allude to earlier really these images will be placed in a very small box similar to this where it would have a width of 100% and a fixed height of let's just say 480 pixels and now if I replace this image with the high resolution one and I'll just copy this exact same content and I'll replace the bottom one with that low resolution webp and I hit publish let's take a look at the difference now so let me go ahead and refresh the page and what you'll notice at the very top the top one is that very very high resolution um High megabyte very large file size and the bottom one is a significantly low resolution and a compressed webp image and from this specific scenario you can tell that there is absolutely no difference towards the human eye so this is the power of making sure that you reduce the resolution size as well as compressing it to web p uh let me go over a couple of other things whenever you upload an image to webflow you also want to make make sure you click onto the gear icon and from here you can actually add SEO settings um specifically for screen readers so a lot of people who visit the web web in general um some of them are visually impaired so they rely on screen readers where it literally dictates by voice what that specific image is or if the image doesn't load sometimes it just has a text called alt text and this is exactly how we add it so right here in this descriptive field we can go ahead and add it text that describes the image which again benefits SEO specifically for screen readers and in case the image doesn't load so we can go ahead and just give it something like Forest uh Road uh with Forest background but that's it and you'll be also interested to note that there's another button called decorative and usually decorative is for images that don't convey any meaning for example like a cross like a popup with a cross or just um patterns or symbols that doesn't really mean anything so just leave it to descriptive if it's a descriptive image otherwise if it's like an icon or symbol you can potentially use decorative so make sure you do that thank you guys for watching I hope you found this video helpful if you did please leave a like and a comment and if you want more webflow videos and design videos make sure to subscribe and hit the Bell notification I'll be releasing new videos every week and I'll see you guys there
