Sandy Waggett shows how to shrink a 4.2 MB image down to 365K by resizing to 1500 pixels wide and compressing the JPEG quality. Oversized images tank your page load speed and Google rankings. Compress before you upload.
Questions this video answers
About 4.2 megabytes (also referenced as 4.3 MB in one spot).
686 seconds (as displayed in the demo).
1500 pixels wide.
365K (after initial resize), 177K (after further compression), and 1,181K (after settling around ~66% quality).
Progressive browser display (progressive JPEG).
Chapters
Good morning everyone. Sandy Waggett with MSW Interactive Designs. And today I am here with another marketing tip. So you've heard about the importance of page load speed these days with your search engine rankings, and if you are working on your own website or you're working with, you know, a family member or a friend or something with your website, this is really important for you to pay attention to because it is the single biggest mistake that that amateur designers make. Now, when it comes to page load speed, most of the offenders on websites are graphics or the pictures on your website. And it's generally because people don't take the time to optimize them for quick load speed online. It's a very simple thing to do and there's tons of free tools out there. You just need to understand that if you have a website that loads really slow because images are so large, then the chances of it ranking high in Google against competitors whose pages load faster are pretty slim. So what I'm going to do is just show you the difference that just a little extra step can make when you're working on your website. So I'm going to share my screen and then I'm going to show you an image and the difference that it'll make if you just take the time to, to resize it. Okay, so this is a picture of Lake of the Ozarks that a client sent to me for their website. Now notice here, I actually have it down at 25% because dimensionally the image is really large. Now, I am using a graphics editing program just so that I can visually show you the difference. But you can do this in free tools like Canva or, or picmonkey, things that are available online. So this is a JPEG image. And look here, it's 4.2 megabytes. And this is how long this image will take to load. It's a huge image. This is not an image that you want to put on your website. So remember this number, 4.2 megabytes. And it'll take 686 seconds to load. Now, I am just going to modify this image and let's just say we want this to be the hero image on a website. The hero image is generally that big, large image that displays when a website comes up or it can be used as a background. So I just resized it to 1500 pixels wide, which will accommodate most screens and will size up. Okay. It won't get too blurry. Now I'm going to show you the difference in the file size. So here we are I've just resized it to 1500 pixels wide and instantly we were already down to less than a megabyte. 365K. Now, on the quality on the compression on the JPEG, if I just scale it down to 70%, look, I've already taken over, taken off over 100K in file size and if I go down just a little bit less now it's 177k and the quality of the image is still nice. Now if you go too low, you can see the image starts to degrade and lose quality. This happens with JPEG compression algorithm. But if I go back up and let's just say settle around 66%, this hero image that was 4.3 megabytes is now 1,181k much smaller. And then the other thing that you can choose on those JPEG compression is this progressive browser display. And what that does is it allows the image to load on the page before the actual full 180 has loaded. So the person will start to see the image appear. You've probably experienced it. It's not that it fades in, but it's kind of pixely and then it becomes clear as the full image loads. So that's available on JPEG compression. So you can see very quickly we took the image that came from the client's camera from basically 4 megabytes down to 180k. Now, people who do their own websites a lot of times will just take these pictures off of their cameras. I'm going to stop sharing my screen here and we'll wrap this up. But a lot of times you'll take the pictures off your phone at a high quality or off your camera at a high quality and then just load them up on a website and it just kills the page load speed. So you want to take the time to compress your images and resize your images, even if your website tool or website builder doesn't require it allows you to upload and throw them in there. And the same is true for your newsletters. So, like, if you're using a constant contact or mailchimp or something like that, you want to resize those images so that it will load faster and people will stick around to see your content. So I hope this tip helps. It's a little technical, but it's super important for your rankings and the effectiveness of your website and your marketing materials. Sami Weigatt with MSW Interactive Designs. Have a great day.
