Squoosh Image Optimizer with AVIF Images

See how to use the Squoosh image optimizer to radically reduce your image file size while retaining the highest quality.

And, we’ll cover how to properly upload your images to WordPress to ensure you’re getting good SEO and speed too.

Subscribe to the BlogAid YouTube Channel

A transcript is below the video

Tutorial

See this tutorial too AVIF vs All Other Image Optimization Formats

Transcript

Before Starting

Before you upload an image to Squoosh, be careful how you save your original in what ever image editor you are using to resize it or put text on it or such.

You want to save it with the highest quality and least compression possible so that Squoosh can do all of the optimization.

Otherwise, you may not be able to compress it much with Squoosh without losing quality.

Upload Image to Squoosh

To access Squoosh, go to https://squoosh.app/

You can drag and drop your image here or click to browse your computer for it.

About the Test Image

This is an image I made in Midjourney and it has a lot of red in it because that is one of the hardest colors to optimize.

I put some text on it and saved it as a png.   

Squoosh Tour

Let’s have a look at the tools in Squoosh.

On the left you can see the file name and size of the image you uploaded.

On the right, you have tools to resize, which is for the display size, and then tools for compressing the file.

You can see the percentage of how much smaller you’re making the file size. And you have a download button.

Resize

Let’s start with the Resize tool.

Click the toggle to turn it on.

You can see that the width on this image is 1221 px.

It’s important that you upload an image that is no more than the max width that you can display on your site.

For full width sites with no sidebar, you’ll want at least 1200px wide, and likely no more than 1800px. Check with your theme to see what it recommends for full width.

For a site with sidebars, the 800px is likely the widest it can go. Many are 750px. Again, check with your theme.

But, I don’t think that Squoosh does the best job of resizing the display size. Let’s set it to 800 and you’ll see what I mean.

So, it’s better for you to properly resize your image before you upload to Squoosh.

Reduce Pallete

We won’t be reducing the palette, which is the number of colors because we want depth of color for this one. But, if it is a graphic, like the logo for BlogAid, you may want to reduce it, as there are only 2 colors.

Compress

Let’s do the compression to make the file size as small as possible while retaining as much quality as we can.

On the left of this vertical center line is the original image. On the right we can see how our settings impact the quality and file size.

Let’s move that so it is inside the text box, which is the best place for us to see quality issues.

PNG

Since this is a png image, let’s try the OxiPNG format.

This is a modern format, like WebP.

But even with the Effort maxed out, we still don’t get much file size savings.

MozJPEG

The default format is MozJPEG, which is a modern format with Progressive render, which makes our images load faster on our site.

And that brings down the file size from 1000 kb to only 81 kb. But you can still see pixelating around the text.

Let’s take that quality slider up all the way to 100.

And that brings our file size to about half of what it was, but it’s still a big file.

AVIF

But, WP 6.5 and higher support AVIF image format, which has superior compression.

So let’s choose that.

As you can see, our file size is now only 34.2kB, which is a fraction of the original.

But you can also see that the quality has suffered, especially in the text area.

So, let’s move this quality slider up and see what happens.

I’m going to take it all the way up to the max.

As you can see, we have fantastic quality, and our file size is 305 kB, which is 1/3 the size of the original.

You can also increase the Effort, but you’re not going to get much out of it as far as extra quality, and it makes the file size bigger.

So, play with the quality setting to get the smallest file size you can without sacrificing quality.

Let’s pull it back to about 80.

And now our file size is 83 kb with no significant loss in quality.

JPEG

Now, let’s quickly upload our JPEG of this image so you can see the file size difference when compressing with AVIF.

Our original image size is 517kB.

With our quality setting all the way up to 99, our file size is now 302 kB.

If I pull that back to around 80, the file size is 83 kB with no significant loss of quality.

Compare

Here’s another fun trick that may help you find the best settings for your images.

In the Edit section of the tools, click the left arrow.

Your settings are now copied to the right side.

And now you can continue to adjust the settings on the left and compare to your previous settings to see if they made things better or worse.

Download

Once you get one of the sides the way you want it, then click the download button on that side and save your image.

You’ll want to save it with a file name that is good for SEO, like words that are descriptive of what it is.

And, you’ll want to resize your image at this time, if need be.

Upload to WordPress

Next, let’s see how to properly upload your images to WordPress.

You need to have alt text on every image you upload.

Unfortunately, there has been a bug with WordPress for a long time that will not retain that alt text if you upload an image directly from the post editor.

So the best way is to upload to the Media Library.

And, you can bulk upload into the Media Library as well.

You can drag and drop you images, or click the Select Files button.

Upload your properly resized and optimized images.

Once it is finished uploading, click the Edit button on the left.

Scroll down and add your alt text and ensure it is descriptive of the image.

Then scroll back up and click the Update button.

Embed Image

Now let’s see the best way to embed an image in your post or page.

Go to your post or page editor.

Add an image block.

Click Media Library.

Click once on your image.

And the click the Select button.

In the Block settings, ensure that your

• Aspect Ratio is set to Original
• Resolution is set to Full Size

The resolution choices you see here will depend on what they are called by your theme.

But anything other than Full Size is going to be one of the thumbnails that WordPress creates for you based on your theme settings, and not the original image.

This was especially important when using image formats like MozJPEG, as WordPress elected to never fully support it all the way through the thumbnails. And they will not have the Progressive render.

But AVIF is supported all the way through, so even your thumbnails will remain AVIF with superior compression and quality, and fast load.

Featured Image

Also, if you select the Featured Image, it will be a thumbnail, not the original image.

Different themes use the Featured Image in different ways. For example, some themes use it at the top of a post in such a way that it can put the title text over it. Just know that this is a thumbnail, not the original size.

That’s It

I hope you’ve enjoyed this tutorial on using Squoosh as your image optimizer and on how to properly upload and embed images in WordPress.

Subscribe to the BlogAid YouTube channel for more helpful tutorials, just like this one.