How To Compress JPG Images

 

Images with smaller files sizes load faster. I’ll show you how to make great looking JPG images with the smallest possible file size. It’s great for SEO and it’s great for your users.

Transcription

Hey folks, welcome to HeroPress Tip of the Week number 50. That’s five-zero. It’s a cool milestone. In this video, we’re going to take a look at how to compress JPG files images to make the file size smaller so your page loads faster. 

This image we’re looking at here is of Grand Rapids, Michigan. I took this photo from the top of my apartment building. This photo is 2.5 megabytes. You can see that here in Finder right there. I’m going to show you some ways to make it smaller and still look good. 

The first thing we’re going to do is use a web tool because it’s quick and easy, and it’s everywhere. It’s on the web. I use this all the time. We’ll go to upload files and find my image. And it’s right here. And out of the box, they suggest compressing it 54%. No. Quality 83. 

So let’s talk right now about JPGs and what quality means. JPGs are what’s called a lossy format, which means as you compress them, you remove data to make the file size smaller. And that reduces the quality. So we compressed this one by 54%. And it went from 2.4 meg to 1.1 meg. 

And we can slide this back and forth and look at the difference. There isn’t that much of a difference. Look right here at this building and you’ll note that the color changes just a little bit. So that’s not a big loss. If you’re going to put this image up on the web, people probably aren’t going to notice. 

But you’ll notice a slider here, the quality of compression goes anywhere from zero to 100. A 100 is no compression. And you’ll see it’s 2.4 meg still. 0 or 10 is crazy compression. Look at the sky and the skyline and the river. The river is all blocky. It’s horrible. So the trick with jpg is to find the best number that still gets you a usable image. Personally, I like 40. Yeah, let’s just type it in. 

Now, I picked this image specifically because skies are really hard to deal with. Can we zoom in? I don’t think we can zoom in with this tool. But the detail on this, in particular, is losing some quality at 40. his little building is still losing color. Or you can drag this around. So I was talking about how the sky can cause trouble. This is loop of color. Now, when it zoomed out, that may not be there. So let’s go up to 60. 

Now, you remember 54% was 1.1 meg. We’re down to 663 kilobytes here. This is five times smaller. The sky doesn’t look too bad here. I mean the color is a little different. But if you don’t have the comparison, the sky looks fine. So we’ll go with this for now. So I’m going to apply and now I can download up here. And I’m going to call this one Optimizilla. And now you can see the difference. Mac thinks it’s 600k compared to 2.5 megabytes. 

So the next tool I’m going to show you is called the GIMP, the GNU Image Manipulation Program here. Let’s take a look at the web page for that. It’s at gimp.org. It wants to be Photoshop. It’s not but it is very powerful, and it’s free. And I like it. I use it all the time. Although these pictures were done with the GIMP. People who are good at it are really good at it and can make things like this dragon. I’m not that good, but I can compress images. 

So let’s open this one up. We’re going to convert the RGB working space because the GIMP doesn’t like Apples. But it doesn’t really change anything. So there we are, there’s our picture. We are currently zoomed out to 33.3% so that we can see the whole thing. But if we go to 100%, you can see there’s the sky. And it doesn’t have that banding. But if we go to 400%, you can see what it looks like just over the phone. You can see these little artifacts on the horizon, things like that. 

So let’s go back to 33%. We’re going to do file, export as, give it a new name, cache, gimp, export. And then it’s going to want us to choose a quality. So we’re here. The quality dragger is right here. The default is 94%, which doesn’t really do much. There’s a checkbox right here that says “show preview image window”. And so at 94%, it’s a three mega gain. We don’t want that. 

So we’re going to grab the slider. I’m going to down to 40. There we go. So there’s 40. It doesn’t look too bad. If I uncheck, it should reveal the original, recheck. Still looks great. Now let’s go to 100% zoom. And you can see you can start to see some banding here. And that’s what we didn’t want with Optimizilla. It’s got a 400%. It makes the banding much more visible. You can see it right here these colors are changing. 

Let’s turn that off for a sec. Watch this tree line. I want to turn it back on while you watch the tree line. Can you see it change? I’ll turn it back off. You watch there. So it smoothes it out a little bit. So I didn’t like the banding I saw, so I’m going to go up to 50. And turn it back on. And we will go back up. There’s a tiny bit of banding. But I’m only seeing it at 400%. If I go to 100%, it looks fine. So let’s save this one.

Now this one says it is 885k. So Optimizilla did a better job than the GIMP. But now I’m going to show you another trick. The GIMP can actually change the image size. So let’s go to image scale. Now this image is 4000 pixels wide, the chances that you want that on the web are very small. The only reason you’d want that is if this was an art piece and you were selling it or something where it needed to look perfect. This is just a picture of my city, I’m going to put it on my blog, it’s going to be at the most 1024 wide. So I’m just going to set it at that, 1024.

When I click height, it does it itself. 768. So then I hit scale. So that’s 100% right there. So now we do file, export as GIMP 1024 And we’ll leave it at 50%. Turn it out or preview off, turn it on. I can’t tell the difference at 50%. In fact, I’m going to go down to 40. We can’t tell the difference of 40 either. Nope, I can’t tell the difference. So hit export. And now we have an image that is 81 kilobytes.

Now, when you upload this to WordPress, WordPress is going to make four different versions, this will be full-size and probably also large. But the medium one is going to be half the size and it’s going to be 40 kilobytes. So we went from 2.5 megabytes down to 81 at full size. So I mean, it’s up to you. You can leave it at full size and WordPress will still make it small versions. Or you can do it by hand and get something that you know you really want. 

The last thing I want to show you is what Photoshop does. I don’t have Photoshop. But when you want to save an image with Photoshop, you can have it bring up four different versions and do different JPGs settings. So you have the original, you could set this one to 80%, this one to 60%, this one to 40%, and just get a visual comparison of all of them at the same time. 

You can even choose to save this one as a PNG instead of a JPG and compare quality and file size between the two different file types. It’s really slick. I really like it. I wish I had a tool that did that that wasn’t Photoshop. 

This post also does an excellent comparison of image quality. Let’s look at the handle here. There’s a difference between maximum and low. Low has a bunch of artifacts in the blue around the sides and stuff. So that’s it. 

For quick and easy compression, I recommend Optimizilla. I use it all the time. It seems to have done even a better job than the GIMP. But the GIMP gives you a lot more flexibility for managing your photo, for sizing it, for cropping it, for changing colors, all that kind of stuff. So if you really want to get into it, get the GIMP. It’s free, it runs on every platform. Go for it. If you have Photoshop, that’s probably your best bet. You’re going to get to save it with this multi-view. I highly recommend it. Hope you find this useful.