How to Optimize Blog Images with Squoosh

thank you so much for watching the oppress Avenue YouTube channel my name is John and today we're talking about image optimization and how we do it on our blog we were asked on our website press Avenue comm we have a just ask area and it's basically how do you simply squish something down and put it on your site so this will be for single image optimization we do it on a per blog post basis and we'll do a different video on bulk optimizations so let's get to it so here's the site again just hit that just ask and I will say one last thing we created a Facebook group where it's easier to ask questions and interact and get help from people besides us so you can go ahead and click facebook.com slash group slash press happening alright enough of that so we will get to squash so squash is s qu o o sh dot app and it's actually developed by Google Chrome labs and they have a little thing at the bottom where you can view all the code via github so I'll zoom in here so you can see it all here um so there it is there if you pull requests they have links something about privacy and what's uploaded of course you have to upload the image to their site so there's the code so you can prove through the code if you want but we're just going to go through the image optimization itself so here it is you simply drag an image in and then it squishes it automatically and then you can fine-tune the settings so just to show you they have a few examples at the bottom so they have a large photo which is 2.8 megabytes so when you load it you have this I think it's a red panda you can see on the left hand side is the original image and on the right hand side is this smooshed image right out of the gate the left hand sides 2.79 megabytes and on the right hand side it's 859 kilobytes which is 69 percent smaller and then also this is being recorded on a 4k screen so it's really zoomed in compared to what people would probably see on your website so if they shrink it down so I just click 60 let's do half so 50% of the quality that existed before so now it's working what's nice is it's not your machine working so if I move it here it's really hard to tell the difference but if you zoom in it's all pixelated you can kind of see it's really hard to tell it might be even harder to tell on YouTube when it's uploaded but right on the eyelid you can see just a little blur but this has cut out 83% of the image size and ultimately if you're using a huge sweeping image like this for a cover photo or a hero image and you have something overlaid on the top of it this this is great to smash it down this much and then you can resize it so we're going to show you a real world example of how we use this so we're gonna go ahead hit back and what we do is we create a YouTube thumbnail and a blog thumbnail within a program called affinity photo so it's similar to photoshop they do just about the same thing except Photoshop has a monthly fee and these guys have a one-time fee so the icon is their affinity photo and I'll link it in the description below and in the blog post all right so I have a YouTube thumbnail and it's a JPEG and it's 734 kilobytes so I click and hold and drag it into this window I'm just holding the mouse down to show you but it lights up this kind of greenish tint and I let it go so there's our classic YouTube thumbnails the original is 734 right out of the gate it uses Moz JPEG at 75 percent quality and now it's 89% smaller which is huge so I always tried to go under a hundred kilobytes because I'm on a dedicated server I use a CDN I use caching I could still probably go smaller but I do use a lot of text so you can see here the text maybe there's a little blur go way in my face is to close my photo so I don't know if you can see it but right here on the P you can see is a little bit of color variation on the smashdown one so I simply just turn this up I make sure to try to keep it around a hundred so there it is there and also I'm zoomed in 246 percent so if I come down I don't know I'd say 101 100 no moral doesn't work there you go all right it's clearly messed up uh but there it is there so now I'm at a hundred and seven kilobytes and I simply hit download and then I upload it to my blog this way my servers not doing the image optimization I'm doing it right out of the gate and I can fine tune it and tweak it um I'll do one more this one's a ping it's the same image I just dragged it in it reloads it the original ping was 909 kilobytes and now it's oh wait maybe you didn't do it again let's start over yeahit's 909 and now it's seventy nine point eight kilobytes as a ping which is incredible if you look here keep zooming in it looks just about the same I think I actually keep this one so 79 kilobytes incredible I'll go ahead and hit download it downloads it all it does is it takes the name of the image in this case it's replace a plug-in custom post types beaver builder slash press Avenue and then it puts a one on the end so a lot of mines say one on the end of the images it's because I've smashed them down in here and I haven't taken off the one alright so that's it for image optimization for a single image for your blog post if you have any questions about this using Skoosh or you want to know about anything else within WordPress freelancing are using WordPress for your business let us know in the comments below additionally you can join us on Facebook or on our site and if this was helpful please give it a thumbs up and also let us know in the comments we love to interact with you thanks for watching its again for watching this video on image optimization if you have any questions about it or WordPress or anything else related please leave them in the comments below right below me is a square you can click to subscribe to the channel and see videos like this one right next to it will bring you to our website so you can get to that just ask area and over here our uploads just for you