How to reduce image size

How to reduce image size

Lesson Details:
April 24, 2020

Video Transcription: Now I'm going to introduce you to the PageSpeed Insights tool that's a free tool provided by Google this video is brought to you by Appy Pie’s Academy. and basically all you do is just go here and the URL for this is developers.google.com slash speed slash PageSpeed slash insights very easy to always available and you enter the URL that you want to examine and work from I've already done this for you and pre-loaded mine and we're going to see how a typical website would look after you've entered it because once you enter it is good it does a lot of calculation and up you know and lookups we're gonna skip all that and I'm just gonna right now show you the results of my site for example this is my home page website problem you calm after this tool has analyzed everything and what it does is it gives a lot of suggestions for what to improve and I've already done all done the suggestions so I'm actually gonna show you what happens before and after this is before so before you see it's pretty uh knocked my like I haven't I haven't taken the time to optimize the images nothing and you see it give me a pretty low score of the of optimization and the first problem area that it's found is optimizing the images and this is what we're gonna focus on in this video and you can see that it says that some of the images are not too terrible right they it shows you how much space your images are taking up right here like this one is 3.7 KB but you see this one is like in the megabytes right this is a much much bigger image for example this one then many of the other ones okay and you could it says you know you could have a tremendous amount of reduction and so what you can optimize all of them but you see in my case there's a lot of them and it would be a very annoying and boring process to optimize all of them but the biggest problem area one is like you know one of them is very problematic so what I've done is actually optimize that image to do that you should back up your original make a copy of the original image it's download that copy and then what you would do is you would go and resize the image and I'll show you how I do that again with free tools with free tools basically go to google and all you type is resize image online and this precise image that net is the one that I use so it's free you upload the image and you can really upload just they say this is the image that I was using you uploaded resize it and download it all using this tool and it's gonna let you download.

The the resulting image which in my case I already have here so I've got this image and you can see that the size right here 1.2 MB and the new one was 3 3 1 6 KB right so you see much much smaller and you could compress it even further but I just was worried about losing the quality of the original so I didn't do that and but anyway you know I compressed it quite a bit this is actually my FTP and I'm going to walk you through how the technique that I use to make sure that I have everything backed up this is actually my original file you see that it says 1 point 2 MB here and this is my new file right this is that stuff that I resized and then uploaded to my website server and what happened is that I just renamed the original I gave it underscore that or Ridge right here you see that's what I did and so I still have it but it's just not referenced by my website my website is referencing this file which is the new file so in case something goes wrong with a new file or in case like the image quality is not very good or something happen to it I always have the original backup right here but at the moment my website is referencing this much smaller one that's almost you know a few times smaller in size so now I'm gonna show you the before and after now I'm going to show you the after situation of what the Google in speed the page insights tool shows about my site so everything is absolutely the same the only thing that I did I uploaded that one image file and I made it much smaller and I ran this and so instead of the twenty nine out of a hundred you see right away it's saying I'm optimized 40 out of a hundred and now you can see if I expand the optimized images you can see that even though it's still complaining about this file it's now of course saying that it's a much smaller file in size and the metrics that it gives are much more favorable so basically now the website looks the same to users but it's much faster to load for Google and it will come up much faster so that means more engagement with users less people quitting your site and more people going through your site and eventually more sales and a boost for your SEO.

loader
Course content