How to Optimize Images for Web Performance without Losing Quality

Key Takeaways

in this video you'll learn how to optimize images for your website and you'll do it without losing any data quality there are several benefits to having optimized images on your website first off it's a faster website that you get when people are coming to your site late loads faster second search engine optimization there is a ranking factor with fast websites and google has even mentioned that yes that is a ranking factor so it's a little bit better to have optimized images for a better search engine optimization and whether you have an affiliate site or a sales ecommerce or leads generating site then it's very helpful for improving conversion so as the person comes to your site and they're going to where they're wanting to go to do the thing you want them to do then this will help with that as well and then finally but probably most importantly is it's a better user experience so your readers are coming to your site and it's just a better user experience for them because they don't have to wait for all of these images to download so if you're ready let's dive in I'm going to walk you through basically I'm going to take our site and this is the site we're going to as the example this is what it looks like I'm using the Astra theme with a starter template the starter template is the outdoor adventure and what I want to do is basically get a page from here so I just created a page called life and it just has a lot of information on it there's no images and what we're going to do is we're gonna go through I'm going to show you the speed of this page right now with no images then I'm going to upload all of these images there's several great-looking images and if you look at the details of these they're huge so there's like 3.84 Meg the dimensions are just massive but basically they're coming straight from a camera so I'm going to upload all of those to the live page and we'll test out the speed again so you can really see the difference between having no images having huge images and then having optimized images for your website so we're going to copy the life post search for Pingdom and Pingdom is just one speed test there's also another one like GT metrics it's a good one as well so tools but Pingdom calm and I'm going to paste in that URL just so we can get a baseline of what the test is choose the closest location from you it's more important that you choose the same location every time you do the test so I'm doing DC and I'll do it again so go through and tell us what the speed is of the webpage all right scrolling down we have a B performance grade of 87 page size is 229 kilobytes the load time is about one point two three and twenty five requests so nothing that I'm gonna get crazy about or go nuts over I just wanted to see a baseline so now that we know that I'm going to minimize that and now we want to adjust this page and we're going to upload a lot of images okay so we've added about six of them plenty to test this out with let's go ahead and click update and if you remember most of them were very large the average of them were you know anywhere from 1.5 all the way up to seven and a half or megabytes so pretty large so we're gonna update this and now we want to copy the link you see all of those are here and this is a really large game anyway meaning all the images show up in a really large way anyway so we want to go back to Kingdom website sped speed test remember we had a page size of 229 load time of one point two three and eighty-seven so now we're going to start it again make sure it's in DC just to keep those things the same okay so now looking at the page size if you remember before we had 229 kilobytes and now we're at over 2.5 Caleb and so that's increased the overall page size by over ten times and that's just one so if you think about it over time and multiple blog posts that we do that's just going to bog down the whole site even more and more and more so let's go through the process of what you want to do to optimize any of your images and what's the best way to do them the first thing you want to make sure that you're doing is before you're uploading there's a couple of things you want to do first you want to save your images in the right format there's usually three that you're going to work with most of us are going to work with JPEG and that's already compressing the images for us then you may sometimes have to do a PNG that's if you have a transparent background or something like a simpler text overlay type thing then you might use the PNG you also might use a gif or a jiff however you want to say it and that's for the animated images so those are the three main ones you will work with by and large JPEG will be for a lot of what we do the next thing you want to look at is changing the dimensions of your images before you upload them for instance we don't need these dimensions they're just too large I'm not even going to be able to showcase these images at this size simply because my website can't show them that large so depending on what your theme is you'll want to make sure that you're working within the dimensions that are proper for that theme for instance if I were to stick with this one there is a pretty large image size anyway and I would want to keep all of my file dimensions on my website my image dimensions I want to resize all my images to nothing larger than 1024 pixels wide so the first thing we would want to do is resize them you can use any of the photo editing software out there to resize them I would recommend resizing and saving as a new file so you'll have the originals if you ever need them or if you ever need to change them you can use something like Photoshop or anything like that if you have something it was just like paint on Windows then you can go in to resize when you open up paint and go to resize choose pixels so you know what you're working with and for the width you want to do 1024 and then I'll automatically do the vertical because we're keeping our aspect ratio and then we can say okay and instead of clicking Save we want to do file save as and we're going to create a new folder it's new sizes and then I'm gonna save it in there you see down here it's saved as the 1024 by 6 ei t2 again you can use anything like Adobe Photoshop if you have Adobe's and that's great because Adobe will also compress your images as well and you want to do that for all your images use the dimensions to size up size them size them up for your website and then the next thing you want to do is go ahead and compress them like I said many software programs will allow you to resize as well as compress for instance Adobe Photoshop will do that for you a free alternative would be is another great one that you can use it's kind of an Adobe alternative something that I used to use now I use affinity designer for my items and that compresses as well now if you don't have a compression or a service that you use something like tiny PNG can compress your images for you so I'm gonna take I'm gonna close this out and I'm just gonna take that image that we just re sized and it's 235 the file size is 235 so you can just go through here and upload all the images that you want to compress for instance I'm gonna let's click and drag this up here so it's going through and it's compressing it showing me what it was and now what it is so and then it gives you just how much did it compress it for you so then you just want to go through download that normally you'd probably just want to overwrite that but just to show you how this is going we're gonna keep these separate and now I download that so then again we see this is 235 and then if I go into my compressed it's 172 so that's the image that we want to now upload to our website and you'll want to do that for all the images that you have on your site you want to resize them then compress them and then upload them and there are a few other websites for instance you have JPEG mini which will do the same thing and I'll show you the difference before and after of how your image looks you can use this as well as tiny PNG now your workflow is now taking your images resizing them and then you want to compress them and if you don't want to compress them on a third-party website or if you want to compress them with your software you can also use a plug-in and a lot of people will add a plug-in to compress them and we'll have a link in the description below of all the plugins that we recommend to choose from but to quickly go through them you have optimal the folks at female have created that and it will do the optimization on your website you have gww image is it you know optimizer you have compressed JPEG and PNG so the tiny PNG this is their plug-in as well you have a magic eye which the folks at WP rocket have created that in if you want you can watch this video and tutorial that I put together on how to install WP rocket WP rocket is a caching plugin that speeds up and boosts your site speed as well and one of my favorites I use short pixel on my personal sites you also have smoosh it and reach mission so again we'll showcase the link in the description below of all the in the plugins that you can use and put on there and what I like about these is you can compress them in Adobe or or in whatever program you use and you can upload it and just see just how much more can it compress it without losing any quality of it so then to show you the final result I'm going to go through and go ahead and resize all of them compress them all and reupload them to that life post and then we're going to come back here and see how it did okay now we have removed the old images we've added the new ones added the new smaller ones you see right here it's a 10 by 24 and a much smaller file size here so we've added those to the life page so I want to copy that and see how did it do so go back to Kingdom and we'll start a new test and you see now it's a much smaller it's just under a MEK it's not quite as small as not having emitting any images but it's definitely smaller file size page size then what we had when we had all the images installed and then the more you work on your site the more you want to know how your site is doing and the best way to do that is by installing a plug-in called monster insights monster insights does a great job of pulling in all of the data from your Google Analytics account into your WordPress dashboard on top of that it is the easiest way to connect your WordPress website to Google Analytics you can see your top landing pages your search console you can import your search console information as well as several other things you can even see real time data for your website to get started just head over to monster insights comm and make sure you use promo code WP be VIP to get the best discount on monster insights so that's the details way of how to optimize your images for the web without losing quality let us know in the comments below which workflow are you going to do to work on your images and thanks for watching