How to Optimize Website Images with Squoosh

We all want our websites to load quickly and give users a smooth experience.

One key way to achieve this is by using the right images—ones that are compressed and sized just right. These images strike a balance between quality and file size, making your website speedy and efficient.

In this guide, I'll show you how to do this using Squoosh, a user-friendly tool that makes image compression and resizing easy.

Using Squoosh on the Web

Squoosh.app is a helpful tool created by the GoogleChromeLabs team. It's all about making images smaller without losing quality. You don't need fancy software—Squoosh lets you see how your image changes as you compress it, so you get it just right.

Getting Started

Here's how to get going with Squoosh.app:

Step 1: Open your web browser and go to https://squoosh.app/.

Step 2: Load Your Image

Drag and drop your image or pick it from your computer. When you load it, you'll see a preview with some default settings.

Step 3: Look at Your Image

Check out your image and figure out how to make it smaller. Think about:

1. Image Size: Decide how big your image needs to be on your website.

2. File Format: Choose the right format—JPG for photos, PNG for clear images, WebP for efficient images, and AVIF for really small images (although not all browsers like it yet).

3. Quality: Adjust how compressed your image should be. More compression makes the image smaller but might lower quality.

Step 4: Adjust Settings

Explore different settings to find the right balance between image quality and file size.

Step 5: Download Your New Image

Once your image looks good, click the download button to save your optimized image.

Compress Images with Squoosh-CLI

For those comfortable with using the terminal, Squoosh has a command-line tool called Squoosh-CLI.

This tool lets you compress images in different formats, such as WebP, JPEG, PNG, and AVIF, with the added advantage of processing multiple images simultaneously.

Install Squoosh-CLI

Before you start using Squoosh-CLI, you'll need to install the necessary package. To do this, open your terminal and run the following command:

npm install -g @squoosh/cli

Once you have Squoosh-CLI installed, you can proceed with compressing images using the following instructions:

Compress Images into WebP Format with Squoosh-CLI

If you're familiar with the terminal, you can compress images into WebP format like this:

npx @squoosh/cli --webp '{"quality":75}' *.jpeg *.jpg *.png -d

- --webp: This command indicates that you want to compress images into the WebP format.

- {"quality":75}: Adjust the compression quality (0 to 100).

- *.jpeg *.jpg *.png: Specify the image types you want to compress.

- -d optimized: Define the output directory for the compressed images.

Compress JPEG Images with Squoosh-CLI

You can also use Squoosh-CLI to compress JPEG images:

npx @squoosh/cli --mozjpeg '{"quality":75}' *.jpeg *.jpg -d

- --mozjpeg: This command is for compressing JPEG images.

- {"quality":75} : Adjust the compression quality (0 to 100).

- *.jpeg *.jpg: List the specific image types you want to compress.

- -d optimized-jpeg: Specify the output directory for the compressed JPEG images.

Compress PNG Images with Squoosh-CLI

Squoosh-CLI is also handy for compressing PNG images:

npx @squoosh/cli --oxipng '{"level":2}' *.png -d

- --oxipng: This command is for compressing PNG images.

- {"level":2}: Adjust the compression level (0 to 3).

- *.png: List the specific PNG files you want to compress.

- -d optimized-png: Specify the output directory for the compressed PNG images.

Compress Images in AVIF Format with Squoosh-CLI

For AVIF images, use this command:

npx @squoosh/cli --avif '{"quality":30}' *.jpeg *.jpg *.png -d optimized-avif

- --avif: This command indicates that you want to compress images into AVIF format.

- {"quality":30}: Adjust the compression quality (0 to 63).

- *.jpeg *.jpg *.png: List the specific image types you want to compress.

- -d optimized-avif: Specify the output directory for the compressed AVIF images.

Comparing Squoosh to Other Tools

Squoosh is a versatile image optimization tool, but let's see how it stacks up against similar tools. Here are some key differences:

Real-Time Changes
Squoosh shows you how compression settings affect your image in real-time, helping you find the right balance between quality and size.

Advanced Compression Options
Squoosh lets you access advanced settings from different image compressors, giving you more control.

Web and Command Line
Squoosh offers both web and command-line interfaces, catering to different user preferences.

Support for Multiple Formats
Squoosh works with various image formats—WebP, JPEG, PNG, and AVIF—enabling optimization for different scenarios and browsers.

Open Source and Free
Squoosh is open-source and free, developed by GoogleChromeLabs, ensuring transparency and community-driven improvements.

While other tools might excel in specific areas, Squoosh's combination of features, along with its open-source nature, makes it a solid choice for developers and website owners seeking effective and customizable image optimization solutions.

Choosing the Right Image Format

When optimizing images, choosing the right format is crucial to balance image quality and file size. Let's explore the primary formats: WebP, PNG, JPEG, and AVIF, along with when to use each one.

What is WebP Format

WebP, a modern image format by Google, offers high compression while maintaining visual quality. It supports lossy and lossless compression, as well as transparency.

When to Use:

• For high-quality images like photos and graphics with gradients.

• When transparency is needed, such as for logos and icons.

• Consider it for modern browsers that support WebP, enhancing loading times.

What is PNG Format

PNG is a lossless image format known for transparency and high-quality visuals. It uses compression without sacrificing image quality.

When to Use:

• For images with transparency, like logos, icons, and complex backgrounds.

• Suitable for graphics, illustrations, and line art with sharp edges.

• Ideal for images with limited colors and intricate details.

What is JPEG Format

JPEG is a widely used lossy image format that offers great compression for photographs while sacrificing some details.

When to Use:

• For photographs, images with color gradients, and complex visuals.

• Efficient for web pages with numerous images, balancing quality and size.

• Use it to minimize file size while maintaining acceptable image quality.

What is AVIF Format

AVIF, a next-gen format, provides advanced compression for smaller file sizes. It supports lossy and lossless compression, along with transparency.

When to Use:

• For cutting-edge compression and small images.

• When you want high-quality visuals with impressive compression.

• Consider using it in modern browsers that support AVIF for improved loading times.