How to perform SEO image optimization all at once [squoosh-cli]

Display speed is becoming more important in implementing SEO measures, but in order to improve display speed, it is important to reduce the capacity of the entire web page, and the ratio of images to the capacity is very high. Therefore, image optimization is a high priority.

This time, I will introduce how to efficiently optimize such images.

Image optimization progresses with "squoosh-cli"!

The method to introduce this time isI use a tool called "squoosh-cli".

"Squoosh-cli" is a command line version tool of the browser version "squoosh".
Since it is a command line, you will be working with CUI using a terminal application such as mac.

Yes, the characters are lined up on that black screen.
It may seem a little difficult, but this article explains how to make it easy for anyone to use by double-clicking, so please refer to it.

Image optimization tool squoosh made by Google

First of all, I would like to introduce "squoosh", an image optimization tool made by Google, which we also use on a daily basis.

https%3A%2F%2Fsquoosh
favicons? domain = squoosh Squoosh
Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your bro…

"Squoosh" is a tool that allows you to easily optimize and convert images in your browser.

After opening it in the browser, drag and drop the image you want to optimize.

squoosh drag and drop image

This time, I borrowed the image of Google headquarters posted on Wikipedia.

squoosh drag and drop image2

Then, the conversion setting screen will be displayed like this.

You can adjust the size, format, and image quality to your liking while freely changing the settings in the lower right window.

In the case of this image, the capacity of 44% can be reduced even with the default settings.

Finally, the optimized image can be downloaded from the download button at the bottom right.

It's very easy, but this method requires you to convert images one by one, which can be a daunting task if you want to convert thousands of images.

Therefore, I decided to use "squoosh-cli" to optimize at once in the local environment of the PC.

Preparing to use squoosh-cli

First of all, you need to prepare to use "squoosh-cli".

  • Unix command execution environment check
  • Homebrew installation
  • Install coreulits
  • Install Node.js

For windows From the maintenance of Unix command execution environment

This method requires a Unix command execution environment and is a command line operation.

For Mac, there is an application called Terminal, so you can use it.

image
It's in the Utilities folder in the Applications folder.

On the other hand, Windows users need a lot of work.

I won't go into details, but let's add an app called "GitBash".

"GitBash" is a tool that enables you to use Unix commands such as Unix and Linux that cannot be used on normal Windows. When you install Git for Windows, it is installed at the same time.

You can download it from the following.

https%3A%2F%2Fgitforwindows
favicons? domain = git for windows Git for Windows
We bring the awesome Git VCS to Windows

Introducing a package manager (Homebrew) in preparation for preparation

We will install the tools by operating the terminal, but first we will introduce a package manager.

There are several types of package managers, but here we use Homebrew.

The details of the package manager and the tools to be introduced later are different from the purpose of this article, so please refer to the following articles.

To install Homebrew, enter the following command in the terminal (copy and paste OK) and press Enter.

Homebrew installation command
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
Code language: JavaScript (javascript)

Install coreulits so that you can use gtimeout in bash script

In the automatic processing used this time, when the image cannot be processed well, the timeout process is performed, but since it cannot be done in the initial environment of Mac, the gtimeout command included in coreulits can be used.

Please install coreulits with the following command.

Command to install coreulits using Homebrew
brew install coreutils

Install Node.js

Node.js is required to run "squoosh-cli", so install it.

Since Node.js is installed via nodebrew, first enter the following command.

With HomebrewCommand to install nodebrew
brew install nodebrew

Next, install Node.js with the following command.

Command to install Node.js using nodebrew
nodebrew install-binary stable

Finally, install the main squoosh-cli this time.

Install squoosh-cli

To install squoosh-cli, enter the following command and press Enter.

Command to install squoosh-cli
npm i -g @squoosh/cli
Code language: CSS (css)

An error such as permission (access right) may appear with the above command, but in that case, the execute permission is insufficient, so an administrator password is required.
If you know the administrator password, execute the installation with the following command with "sudo" added to the beginning of the previous command. The password will be required, so enter it and press Enter to proceed with the installation.

Command to install squoosh-cli with administrator privileges
sudo npm i -g @squoosh/cli
Code language: CSS (css)

If you do not know the administrator password of the computer, please check with the administrator.

Installation is complete if it finishes without any errors.
Execute the following command for confirmation.

Command to check if squoosh-cli is installed
squoosh-cli -h

If the following result is displayed, the installation is complete.

Execution result of the command to check if squoosh-cli is installed
~ % squoosh-cli -h Usage: squoosh-cli [options] <files...> Options: -d, --output-dir <dir> Output directory (default: ".") -s, --suffix <suffix> Append suffix to output files (default: "") --max-optimizer-rounds <rounds> Maximum number of compressions to use for auto optimizations (default: "6") --optimizer-butteraugli-target <butteraugli distance> Target Butteraugli distance for auto optimizer (default: "1.4") --resize [config] Resize the image before compressing --quant [config] Reduce the number of colors used (aka. paletting) --rotate [config] Rotate image --mozjpeg [config] Use MozJPEG to generate a .jpg file with the given configuration --webp [config] Use WebP to generate a .webp file with the given configuration --avif [config] Use AVIF to generate a .avif file with the given configuration --jxl [config] Use JPEG-XL to generate a .jxl file with the given configuration --wp2 [config] Use WebP2 to generate a .wp2 file with the given configuration --oxipng [config] Use OxiPNG to generate a .png file with the given configuration -h, --help display help for command
Code language: CSS (css)

thank you for your hard work. Now you are finally ready to use squoosh-cli.

How to optimize jpg / png images at once with squoosh-cli

Now that we're ready, we'll show you how to do bulk optimization.

First, if you are using a Mac, please download and save the command file from the following.

After saving, go to the folder where the image you want to optimize is saved and double-click it.

Then, the following options will be displayed, so enter a number from 1 to 3 and press Enter.

What is displayed in the terminal window
1) jpg・pngを圧縮しwebp生成 3) キャンセル 2) jpg・pngを圧縮のみ 処理を数字で選択してください。

That's all!

This is an option, but if you enter 1, it will optimize the jpg / png file and convert it to a webp file with the same file name.

If you enter 2, it will not convert webp,Only the optimization of jpg / png files will be executed, and 3 will be canceled without doing anything.

All jpg and png files saved under the folder where the command file is saved are the files to be optimized, and the files such as gif and svg are left as they are.

This process overwrites the converted file, so if you want to keep the original image, be sure to make a backup.

Depending on the environment, you may not be able to execute the saved command file due to insufficient access rights.
In that case, I think that it can be executed by modifying the access right with the following command.

command A command to modify file permissions
chmod u+x [保存したcommandファイルのパス]
Code language: CSS (css)

If you don't have to do difficult things, you can read this far.
Originally, squoosh-cli can be finely customized and processed on the command line, but it becomes a little difficult story, and the method will be explained below.

Other common uses of squoosh-cli

There is a commentary on the head family on the official page below.

https%3A%2F%2Fgithub
favicons? domain = github squoosh / cli at dev · GoogleChromeLabs / squoosh
Make images smaller using best-in-class codecs, right in the browser. --Squoosh / cli at dev · GoogleChromeLabs / squoosh

However, since it is in English and it is a little difficult to understand for those who are not familiar with terminal operation, I will explain it briefly, so please refer to it if you want to convert it as you want with commands.

squoosh-cli basic commands

Basically, use it with the following command.

Basic command type of squoosh-cli
squoosh-cli [options] <files...>
Code language: HTML, XML (xml)

And the image formats that can be output with squoosh-cli are as follows.

List of conversion format commands that can be used with squoosh-cli
--mozjpeg # MozJPEG<meta charset="utf-8">(要するにjpg) --webp # WebP --avif # avif --jxl # JPEG-XL --wp2 # WebP2 --oxipng # OxiPNG(要するにpng)
Code language: PHP (php)

Basically, I think that mozjpg (jpg), oxipng (png), and webp are used, so you only have to remember this.

For the actual conversion, for example, the command for optimizing a jpg file as it is is as follows.

with squoosh-cliCommand to optimize jpg file as jpg
squoosh-cli --mozjpeg ./sample.jpg
Code language: Bash (bash)

When converting a jpg file to webp, it will be as follows.

Command to convert jpg file to webp with squoosh-cli
squoosh-cli --webp ./sample.jpg

It's easy because you can convert jpg to png and png to web at the same time as optimization!

You can also specify the output destination folder

Here are some other options you might use most often.

First, -d specifies where to save the converted image.

squoosh-cli saves to the same folder if the output destination folder is not specified.
If the format is the same, such as jpg to jpg, it will be overwritten.

If you specify the output destination with -d, the command will be as follows.

Convert jpg file to webp with squoosh-cli,Command to save in the optimized folder (created if not) at the same level
squoosh-cli --webp -d ./optimized ./sample.jpg

Image quality can also be adjusted

Next is the image quality of the image.
Specify the image quality with the following command.

Convert jpg files to webp with quality 30 with squoosh-cli,Command to save in the optimized folder (created if not) at the same level
squoosh-cli --webp '{quality:30}' -d ./optimized ./sample.jpg
Code language: JavaScript (javascript)

As for quality, the smaller the number, the worse the image.

If you understand so far, you can do basic conversion, but you can also resize it, so if you are interested, please check it out.

You can also target all images by using wildcards to specify the image.

Convert all jpg files of the same level to webp with quality 30 with squoosh-cli,Command to save in the optimized folder (created if not) at the same level
squoosh-cli --webp '{quality:30}' -d ./optimized ./*.jpg
Code language: JavaScript (javascript)

summary

With this kind of feeling, if you use "squoosh-cli", you can efficiently optimize the image.

Even if you are a web designer who is not working on SEO, you can contribute to creating a light site by optimizing the image data exported from Photoshop etc. in a batch using "squoosh-cli". I think.

see you.

Kazuhiro Nakamura
Kazuhiro Nakamura
Representative of Cocorograph Inc. 13 years of SEO history, more than 970 sites with countermeasures. We provide SUO, an upward compatible service of SEO that optimizes not only search engines but also search users. SEO / SUO's original report tool, Sachiko Report Developer. Book "The latest common sense of SEO taught by professionals in the field"
Kazuhiro Nakamura
Kazuhiro Nakamura
Representative of Cocorograph Inc. 13 years of SEO history, more than 970 sites with countermeasures. We provide SUO, an upward compatible service of SEO that optimizes not only search engines but also search users. SEO / SUO's original report tool, Sachiko Report Developer. Book "The latest common sense of SEO taught by professionals in the field"