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

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

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

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

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

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

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

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

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』はブラウザで簡単に画像の最適化や変換ができるツールです。

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

squoosh drag and drop image

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

squoosh drag and drop image2

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

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

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

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

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

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

squoosh-cli を使うための準備

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

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

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

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

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

image
アプリケーションフォルダにあるユーティリティフォルダの中にあります。

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

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

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

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

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

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

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

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

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

参考

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

Homebrewのインストールコマンド
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"Code language: JavaScript (javascript)

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

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

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

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

Node.js のインストール

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

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

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

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

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

nodebrewを使ってNode.jsをインストールするコマンド
nodebrew install-binary stable

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

squoosh-cli のインストール

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

squoosh-cliをインストールするコマンド
npm i -g @squoosh/cliCode language: CSS (css)

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

squoosh-cliを管理者権限でインストールするコマンド
sudo npm i -g @squoosh/cliCode language: CSS (css)

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

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

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

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

squoosh-cliがインストールされているか確認するコマンドの実行結果
~ % 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 commandCode language: CSS (css)

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

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

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

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

https%3A%2F%2Fgithub
favicons?domain=github GitHub - cocorograph/SEO_image_optimize: sharpを使った画像最適化スクリプト
sharpを使った画像最適化スクリプト. Contribute to cocorograph/SEO_image_optimize development by creating an account on GitHub.

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

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

ターミナルウインドウに表示される内容
1) jpg・pngを圧縮しwebp生成  3) キャンセル
2) jpg・pngを圧縮のみ
処理を数字で選択してください。

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

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

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

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

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

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

commandファイルの権限を修正するコマンド
chmod u+x [保存したcommandファイルのパス]Code language: CSS (css)

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

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

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

https%3A%2F%2Fgithub
favicons?domain=github

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

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

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

squoosh-cliの基本のコマンドの型
squoosh-cli [options] <files...>Code language: HTML, XML (xml)

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

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)

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

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

squoosh-cliでjpgファイルをjpgのまま最適化するコマンド
squoosh-cli --mozjpeg ./sample.jpgCode language: Bash (bash)

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

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

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

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

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

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

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

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

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

画像品質も調整可能

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

squoosh-cliでjpgファイルを品質30でwebpに変換し、同階層のoptimizedフォルダ（なければ作成）に保存するコマンド
squoosh-cli --webp '{quality:30}' -d ./optimized ./sample.jpgCode language: JavaScript (javascript)

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

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

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

squoosh-cliで同階層のjpgファイル全てを品質30でwebpに変換し、同階層のoptimizedフォルダ（なければ作成）に保存するコマンド
squoosh-cli --webp '{quality:30}' -d ./optimized ./*.jpgCode language: JavaScript (javascript)

まとめ

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

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

ではまた。