How to Optimize Images: A Practical Guide

Case study of reducing image size issues

Lesson Details:
April 24, 2020

Video Transcription: Let's get back to the example we were working from this very same page this video is brought to you by Appy Pie’s Academy. you see that now we're loading faster and now we're gonna tackle other easy wins here now what I see as the next easiest easiest thing is just looking at the image sizes and it's the fourth complaint thing about so it's not the worst offending element but as you can see relatively it is relatively close you see of the top four things that had top five things they're all pretty close and how bad they are so what we can do here is very quickly expand this and take a look okay there are three images on this page and one is quite big can't you see this the phone image now what I'm going to do is I'm going to go and compress this image and then I'm going to upload the compressed version of it and instead of this phone image that's there now I'm gonna have a one that's very much reduced in size same the image that looks the same but it's just gonna take up less size for us and it's gonna be easier for the browser and faster for the browser to download and then we're gonna run this same test and compare these results to the results of how they would be if this image was much smaller so I'm gonna show you later and in other parts of the course how to compress images for now I'm just gonna run this test and so you will quickly see the results now I've compressed that that offending image that was too big and I've uploaded it and every ran this report you can see our performance score went up went up a little bit our loading speeds went up slightly as well so that's a small that's a win and it only took a couple of minutes to resize the image and compress it and then you see that all kinds of image issues they're very low on the list and the image issues they take no more than 0.3 seconds in total of total load time so we completely have a winner on that and if you compare this this this is after I've reduced the image size you see serve images in next-gen formats it's that it no longer complains about this but I'll show you now what just to compare you will see the previous time I ran this see the previous time I ran this image issues took about a second a little bit over a second so now this problem is almost entirely gone so you see with just a small change you can start having big wins in your page loading speed in the next video we'll tackle the very next issue.


loader
Course content