SEOの画像最適化を一括で超簡単に行う方法【squoosh-cli】

SEO施策を行う上で、表示速度の重要性が高まっていますが、表示速度を改善するためには、Webページ全体の容量を削減することが重要で、容量に占める画像の割合は非常に高いため、画像の最適化は優先度が高いです。

今回は、そんな画像の最適化を効率よく行う方法をご紹介します。

『squoosh-cli』を使えば画像最適化が捗る！

今回ご紹介する方法は、『squoosh-cli』というツールを使います。

『squoosh-cli』は、ブラウザ版『squoosh』のコマンドライン版ツールです。コマンドラインということで、macなどのターミナルアプリを使ってCUIでの作業となります。

そう、あの真っ黒な画面に文字が並んでるアレです。ちょっと難しそうと思うかもしれないですが、この記事では、誰でも簡単にダブルクリックで使えるようにした方法を解説していますので、ぜひ参考にしてください。

Googleが作った画像最適化ツールsquoosh

まずは、僕らも日常的に仕様している、Googleが作った画像最適化ツールの『squoosh』をご紹介します。

[sc_Linkcard url="https://squoosh.app/"]

『squoosh』はブラウザで簡単に画像の最適化や変換ができるツールです。

ブラウザで開いたら最適化したい画像をドラッグ&ドロップで入れてみましょう。

今回は、Wikipediaに掲載されていたGoogle本社の画像を拝借しております。

するとこんな感じで変換設定画面になります。

右下のウインドウで自由に設定を変更しながら好みのサイズ・フォーマット・画質に調整可能です。

この画像の場合、デフォルトの設定のままでも44%の容量が削減できるんですね。

最後に右下のダウンロードボタンから最適化後の画像がダウンロードできるという仕組みです。

非常に簡単ですが、この方法だと画像を1つずつ変換していく必要があり、数千枚の画像を変換したいなどの場合、とても大変な作業になってしまいます。

そこで『squoosh-cli』を使ってPCのローカル環境で一気に最適化を行うという方法を取ることにしました。

squoosh-cli を使うための準備

まず『squoosh-cli』を使うための準備が必要です。

Unixコマンド実行環境確認
Homebrewのインストール
coreulitsのインストール
Node.js のインストール

windowsの場合Unixコマンド実行環境の整備から

今回の方法は、Unixコマンドの実行環境が必要になり、コマンドラインでの操作となります。

Macの方は、ターミナルというアプリが入っているので、それを使えばOKです。

一方、Windowsユーザーの方は一手間必要になります。

詳細は割愛しますが、『GitBash』というアプリを入れましょう。

『GitBash』は通常のWindowsでは使えないUnixやLinuxのようなUnixコマンドを使えるようにするツールで、Git for Windowsをインストールすると、一緒にインストールされます。

ダウンロードは下記からできます。

[sc_Linkcard url="https://gitforwindows.org/"]

準備の準備でパッケージマネージャー（Homebrew）の導入

ターミナル操作でツールのインストールをしていくことになるのですが、ここでまずパッケージマネージャーというものを導入します。

パッケージマネージャーにもいくつか種類があるのですがここでは、Homebrewというものを使います。

パッケージマネージャーについてや、この後導入するツールの詳細説明は本記事の趣旨と異なりますので、下記の記事などご参照ください。

参考

Homebrewのインストールは下記のコマンドをターミナルに入力（コピペでOK）し、Enterを押します。

1Homebrewのインストールコマンド

1/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

bashスクリプトでgtimeout（タイムアウト処理）を使えるようにcoreulitsのインストール

今回使う自動処理では、画像がうまく処理できなかったときに、タイムアウト処理を行うのですが、Macの初期状態の環境ではそれができないため、coreulitsに含まれる、gtimeoutコマンドを使えるようにします。

下記のコマンドでcoreulitsのインストールをしてください。

1Homebrewを使ってcoreulitsをインストールするコマンド

1brew install coreutils

Node.js のインストール

『squoosh-cli』の実行には、Node.jsが必要なので、インストールします。

Node.jsのインストールは、nodebrew経由でインストールする方法と、パッケージインストーラーからインストール方法がありますが、nodebrew経由の方法を解説しておきます。

まず下記のコマンドを入力します。

1Homebrewを使ってnodebrewをインストールするコマンド

1brew install nodebrew

次に下記のコマンドでNode.jsのインストールを行います。

1nodebrewを使ってNode.jsをインストールするコマンド

1nodebrew install-binary stable

最後に今回のメイン、squoosh-cliをインストールします。

squoosh-cli のインストール

squoosh-cliのインストールは、下記コマンドを入力し、Enterを押してください。

1squoosh-cliをインストールするコマンド

1npm i -g @squoosh/cli

上記コマンドでパーミッション（アクセス権）などのエラーが出る場合がありますが、その場合は実行権限が足りていないので、管理者パスワードが必要です。管理者パスワードがわかる場合は、先ほどのコマンドの頭に『sudo』をつけた下記コマンドでインストールを実行すると、パスワードが求められるので入力し、Enterでインストールが進みます。

1squoosh-cliを管理者権限でインストールするコマンド

1sudo npm i -g @squoosh/cli

そのパソコンの管理者パスワードがわからない方は管理者にご確認くださいね。

エラーがなく終了すればインストール完了です。確認のため、下記のコマンドを実行してください。

1squoosh-cliがインストールされているか確認するコマンド

1squoosh-cli -h

下記のような結果が表示されれば、インストールできています。

1squoosh-cliがインストールされているか確認するコマンドの実行結果

1~ % squoosh-cli -h
2Usage: squoosh-cli [options] <files...>
3
4Options:
5  -d, --output-dir <dir>                                 Output directory (default: ".")
6  -s, --suffix <suffix>                                  Append suffix to output files (default: "")
7  --max-optimizer-rounds <rounds>                        Maximum number of compressions to use for auto optimizations (default: "6")
8  --optimizer-butteraugli-target <butteraugli distance>  Target Butteraugli distance for auto optimizer (default: "1.4")
9  --resize [config]                                      Resize the image before compressing
10  --quant [config]                                       Reduce the number of colors used (aka. paletting)
11  --rotate [config]                                      Rotate image
12  --mozjpeg [config]                                     Use MozJPEG to generate a .jpg file with the given configuration
13  --webp [config]                                        Use WebP to generate a .webp file with the given configuration
14  --avif [config]                                        Use AVIF to generate a .avif file with the given configuration
15  --jxl [config]                                         Use JPEG-XL to generate a .jxl file with the given configuration
16  --wp2 [config]                                         Use WebP2 to generate a .wp2 file with the given configuration
17  --oxipng [config]                                      Use OxiPNG to generate a .png file with the given configuration
18  -h, --help                                             display help for command

お疲れ様です。これでようやくsquoosh-cliを使う準備ができました。

squoosh-cliでjpg・png画像の最適化を一括で行う方法

準備が整ったので、一括最適化の方法を解説します。

まず、Macをお使いの方は下記からcommandファイルをダウンロードして保存してください。

[sc_Linkcard url="https://github.com/cocorograph/SEO_image_optimize"]

保存したら、最適化したい画像が保存されているフォルダに移動し、ダブルクリックします。

すると、下記のような選択肢が表示されますので、1〜3の数字を入力し、Enterで実行。

1ターミナルウインドウに表示される内容

11) jpg・pngを圧縮しwebp生成  3) キャンセル
22) jpg・pngを圧縮のみ
3処理を数字で選択してください。

なんとこれだけで終わりです！

こちらの選択肢ですが、1を入力すると、jpg・pngファイルの最適化と、ファイル名が同名のwebpファイルへの変換生成を行います。

2を入力すると、webpの変換は行わずに、jpg・pngファイルの最適化のみの実行となり、3は何も行わずキャンセルします。

commandファイルを保存したフォルダ以下に保存されている全てのjpg・pngファイルが最適化対象のファイルとなり、gifやsvgなどのファイルは何もされずそのままです。

この処理では、変換ファイルを上書き保存するので、元画像をとっておきたい方は必ずバックアップを取っておいてくださいね。

環境によって、保存したcommandファイルのアクセス権が足りなくて実行できない場合があります。その場合、下記コマンドでアクセス権を修正すれば実行可能になるかと思います。

1commandファイルの権限を修正するコマンド

1chmod u+x [保存したcommandファイルのパス]

難しいことはしなくていいと言う方は、ここまで読んでいただければOKです。 squoosh-cliは、本来コマンドライン上で細かくカスタマイズして処理が行えますが、少し難しい話になり、以下ではその方法を説明します。

squoosh-cliのその他一般的な使い方

下記の公式ページに本家の解説があります。

[sc_Linkcard url="https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli"]

ですが、英語ですし普段ターミナル操作に慣れていない方からするとちょっとわかりづらいので、簡単に解説しますので、コマンドで自分の思ったように変換したいと思う方は参考にしください。

squoosh-cliの基本的なコマンド

基本的には、下記のようなコマンドで使います。

1squoosh-cliの基本のコマンドの型

1squoosh-cli [options] <files...>

そしてsquoosh-cliで出力可能な画像フォーマットは、下記の通りです。

1squoosh-cliで使える変換フォーマットのコマンド一覧

1--mozjpeg	# MozJPEG（要するにjpg）
2--webp		# WebP
3--avif		# avif
4--jxl			# JPEG-XL
5--wp2		# WebP2
6--oxipng		# OxiPNG（要するにpng）

基本的に使うのは、mozjpg（jpg）、oxipng（png）、webpあたりだと思うので、これだけ覚えておけばいいですね。

実際の変換ですが、例えば、jpgファイルをjpgのまま最適化をかけるのにためのコマンドは、下記のようになります。

1squoosh-cliでjpgファイルをjpgのまま最適化するコマンド

1squoosh-cli --mozjpeg ./sample.jpg

jpgファイルをwebpに変換する場合は、下記のようになります。

1squoosh-cliでjpgファイルをwebpに変換するコマンド

1squoosh-cli --webp ./sample.jpg

jpgからpngや、pngからwebなどの変換も最適化と同時にできるので楽ですね！

出力先フォルダも指定可能

他にもよく使うであろうオプションを説明します。

まず、 -d というのが変換ごの画像をどこに保存するかという指定になります。

squoosh-cliは、出力先フォルダの指定がない場合は同じフォルダに保存します。 jpgからjpgなど、フォーマットが同じ場合は上書きされます。

-d で出力先を指定すると下記のようなコマンドとなります。

1squoosh-cliでjpgファイルをwebpに変換し、同階層のoptimizedフォルダ（なければ作成）に保存するコマンド

1squoosh-cli --webp -d ./optimized ./sample.jpg

画像品質も調整可能

次に画像の画像品質です。画像品質の指定は下記のようなコマンドで指定します。

1squoosh-cliでjpgファイルを品質30でwebpに変換し、同階層のoptimizedフォルダ（なければ作成）に保存するコマンド

1squoosh-cli --webp '{quality:30}' -d ./optimized ./sample.jpg

qualityは数字が小さいほど画像が劣化します。

ここまでわかれば基本的な変換はできると思いますが、他にもリサイズなども可能ですので、興味がある方は調べてみてください。

画像指定にワイルドカードを使えば、全ての画像を対象にすることもできます。

1squoosh-cliで同階層のjpgファイル全てを品質30でwebpに変換し、同階層のoptimizedフォルダ（なければ作成）に保存するコマンド

1squoosh-cli --webp '{quality:30}' -d ./optimized ./*.jpg

まとめ

こんな感じで、『squoosh-cli』を使えば、効率的に画像最適化を行うことができます。

SEOに取り組んでいない、ウェブデザイナーのような方でも、Photoshopなどから書き出した画像データを『squoosh-cli』を使って一括で最適化をおこなっておくことで、軽いサイトを作ることに貢献もできるかと思います。

ではまた。