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

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

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

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

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

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

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

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

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

Squoosh
Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your bro…

『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をインストールすると、一緒にインストールされます。

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

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)"
コード言語: JavaScript (javascript)

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

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

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

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

Node.js のインストール

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

Node.jsのインストールは、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/cli
コード言語: CSS (css)

上記コマンドでパーミッション(アクセス権)などのエラーが出る場合がありますが、その場合は実行権限が足りていないので、管理者パスワードが必要です。
パスワードがわかる場合は下記コマンドを実行すると、パスワードが求められるので、入力後Enterでインストール可能です。

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

sudoコマンドを使用する場合、そのパソコンの管理パスワードが必要となりますので、わからない方は管理者にご確認ください。

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

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 command
コード言語: CSS (css)

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

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

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

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

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

すると、下記のような選択肢が表示されますので、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ファイルのパス]
コード言語: CSS (css)

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

ここからは、コマンドライン上での基本的な使い方となります。

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

squoosh/cli at dev · GoogleChromeLabs/squoosh
Make images smaller using best-in-class codecs, right in the browser. - squoosh/cli at dev · GoogleChromeLabs/squoosh

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

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

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

squoosh-cliの基本のコマンドの型
squoosh-cli [options] <files...>
コード言語: 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)
コード言語: PHP (php)

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

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

squoosh-cliでjpgファイルをjpgのまま最適化するコマンド
squoosh-cli --mozjpeg ./sample.jpg
コード言語: バッシュ (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.jpg
コード言語: JavaScript (javascript)

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

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

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

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

まとめ

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

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

ではまた。

中村 一浩
中村 一浩
株式会社ココログラフ代表。SEO歴13年、対策実績970サイト以上。検索エンジンだけでなく検索ユーザーにまで最適化する、SEOの上位互換サービスSUOを提供。SEO / SUOの独自レポートツール、サチコレポート開発者。著書『現場のプロが教えるSEOの最新常識』
中村 一浩
中村 一浩
株式会社ココログラフ代表。SEO歴13年、対策実績970サイト以上。検索エンジンだけでなく検索ユーザーにまで最適化する、SEOの上位互換サービスSUOを提供。SEO / SUOの独自レポートツール、サチコレポート開発者。著書『現場のプロが教えるSEOの最新常識』