How to use squoosh.app to reduce image file sizes. Squoosh is an open source image compressor designed to optimize images through resizing and use of modern compression technology.
If PageSpeed is dinging you because it wants you to serve images in next-gen formats or WordPress wont let you upload because your image file exceeds the maximum upload size for this site then use the following guide.
Step 1. Go to the squoosh.app website
Yeah it has a weird (domain)name, but it is easy to use a has powerful image compression.
Step 2. Upload you image
You can drag and drop an image onto the website or upload one by clicking the image with a plus icon in the middle of the page.
Step 3. Resize the image
The first thing to consider, is this image being used as a large hero image, or a smaller image in some body copy?
Hero images should be a max of 1600 pixels wide. Rare cases they can be larger if you need a very high resolution image.
Body images should be a max of 700 pixels wide (maybe even smaller).
Sometimes your image is already be the correct size, if so, you can go to the next step.
In our example we’re going to resize a hero image from 3840 pixels to 1600 pixels.
- Click the Resize button on the right side of the screen
- Change the Width of the image to the appropriate size, in our example 1600
- The Height will automatically adjust as the width changes, this is intended. If you need to crop an image, you’ll need to use a different program, I’ll cover that in another tutorial.
Step 4. Change the image format to WebP
- On the right side of the page, you’ll see a select box that says MozJPEG. Click that box and change it to WebP.
Step 5. Download your optimized image
Click the blue button with the down arrow in the bottom right of the screen to download the new image. You’ll now have 2 images: the old, large, unoptimized image and a new one that is ready for your website.