How I Optimize Images for Free with Squoosh

One of the biggest culprits I see for slow websites is image size.

Large, unoptimized images can drag your site’s performance down, hurting your user experience and your Google rankings.

In this article, I’m going to show you how to optimize an image for your website using my favorite free tool. This is the exact process I use, and it’s incredibly simple.

Get Squooshing

First, you’ll want to go to the website squoosh.app.

Once you’re there, you can either drag and drop an image directly onto the page or click in the center to open your file explorer and select the image you want to work on.

Compress First

Once your image is loaded, you’ll see a split screen with the original on the left and the compressed version on the right.

In the bottom right corner, there’s an “Edit” panel. The first thing to do is select the compression type. I like to pick MozJPEG. It does a great job of reducing file size while keeping the quality high.

The best part is, Squoosh will remember this setting for the next time you use it.

Resize Smartly

Next, toggle on the “Resize” option. You’ll probably notice that your original image is huge—maybe over 4,000 pixels wide. That is way bigger than you’ll ever need for your website.

So, what size should you use?

• A safe bet: If you aren’t sure, setting the width to 1200 pixels is generally a good starting point.
• For Google Discover: If you’re in a niche that gets traffic from Google Discover, you’ll want to make sure your featured images are set to 1200 pixels wide.

Find Your Width

If you want to be more precise, you can find the exact width you need.

Go to your website and figure out where the image will be placed. Then, you can use your browser’s inspect tool to find the dimensions.

Here’s a quick guide:

• Right-click on the area and select “Inspect.”
• In the developer panel that opens, click the little icon in the top-left that looks like a cursor in a box.
• Hover over the column or section where your image will go. A little box will pop up showing you the exact dimensions of that area.

For example, if the area is 687 pixels wide, you know you don’t need an image any larger than that. You can then go back to Squoosh and enter that exact width.

You’ll be amazed at the size reduction—I’ve seen this simple step reduce an image’s file size by 99%!

Download & Rename

Once you’re happy with the compression and size, just hit the download button in the bottom right corner.

The final step is to rename the file before you upload it to your website. Instead of a generic name like “IMG_1234.jpg,” give it a descriptive name that tells Google what the photo is about, like “photo-at-the-beach.jpg.”

Full Tutorial

If you’re more of a visual learner, I’ve recorded a full walkthrough of this entire process.

You can watch the video below to see exactly how I use Squoosh to optimize images from start to finish. Or click here to watch it on YouTube.

Conclusion

And that’s it. In just a few simple steps, you’ve taken a massive image file and turned it into a small, web-ready version that will load quickly for your visitors. This process of compressing, resizing, and renaming is a fundamental part of maintaining a fast, user-friendly website.

Making this a regular habit for every image you upload will prevent your site from getting bogged down over time. It’s one of the easiest and most impactful things you can do to improve performance.

Now that you know how to handle your images, read my full step-by-step guide to improving your website speed to tackle the other common issues holding your site back.