悩む人画像圧縮ってどのツール使ったらいいのかな？
Squooshって有名だけど、どんなツールなのかな？
詳しく知りたいな。
今回はそんな悩みにお答えしていこうと思います。
ブログのSEO対策において、ページの表示速度アップは非常に重要です。
Googleがページの読み込み速度をランキング要素に用いると明言しているからです。デスクトップもそうですが、モバイルでの表示速度が特に重要になってきます。
ブログ記事のデータ容量の中で特に占める割合が大きいのが画像です。この画像の容量を圧縮することが表示速度をアップする上でまず基本となってきます。
（＊もちろん、Java Script、cssの遅延読み込みなど他にもやるべき対策は様々あります。）
画像圧縮ツールは、実に数多くのものが存在します。おすすめの画像変換圧縮ツールについては下記の記事で紹介しています。
その中で今回は、Google製の画像圧縮ツールSquooshについて取り上げていきます。
Squooshは、数ある画像圧縮ツールの中でも極めて圧縮性能が高く、使い勝手も抜群の圧縮最適化ツールです。ブログをやる上ではまず欠かせません。
本記事ではSquooshの概要、主な機能、メリット・デメリット、Squooshの使い方、ブログでSquooshを活用する上でのポイント・コツについて詳しく解説していきます！
Squooshとは？概要
Squooshは、Google Chromeの開発を手掛けるGoogle Chrome Labsが開発したアプリです。
画像の変換・圧縮の最適化、リサイズなどを行うことができます。
画像の圧縮って、面倒ですよね…。では、なぜそこまで頑張って画像を圧縮しないといけないのでしょうか？
それはズバリ、ページの読み込み速度が検索順位に関係してくるからです！
検索ユーザーはできるだけ早く質問に対する答えを見つけたいと考えています。
研究によると、ユーザーはページの読み込み速度を非常に気にかけています。
読み込み速度これまでもランキング シグナルとして使用されていましたが、デスクトップ検索を対象としていました。
そこで 2018 年 7 月より、ページの読み込み速度をモバイル検索のランキング要素として使用することになりました。
このようにGoogleはページの読み込み速度をモバイル検索のランキング要素にも取り入れると明言しています。Googleはこれを「Speed Update」と呼んでいます。
具体的な指標としては「Core Web Vitals」が導入されています。
Core Web Vitalsは多少ややこしい指標ですので、詳しい説明はここでは割愛致しますが、ごく簡単に言うと、ページの最初の表示を何秒で完了できるかを見ています。
これはPage speed Insightsで計測することができます。このアプリは現在のページ表示速度と、どうすれば改善できるかを示してくれます。
当然ですが、記事の中で容量が大きいのは動画、画像の類です。これらをできる限り圧縮することが、ページの読み込み速度を速くする上で基本となります。
ページの読み込みが遅いと、直帰率が上がりますし、ユーザビリティーを損ないます。下記は、ページの表示速度と直帰率の関係について示したものです。
From the above graph, we can see that the average bounce rate for pages loading within 2 seconds is 9%.
As soon as the page load time surpasses 3 seconds, the bounce rate soars, to 38% by the time it hits 5 seconds!
(上のグラフから、2秒以内に読み込まれるページの平均直帰率は9 %であることがわかります
。
ページの読み込み時間が3秒を超えると直帰率は急上昇し、5秒に達すると38%に達します。)
引用：Does Page Load Time Really Affect Bounce Rate? | pingdom
ユーザーのことを第一に考えるならば、少しでも読み込みを速くする必要があります。
Page speed Insightsで調べると分かりますが、画像以外にもJava Scriptやcssなどページの読み込みを遅くする要因は様々あります。
これらは遅延読み込みするなど別途対策する必要があります。
つまり、画像の圧縮は読み込み速度を速くする上でまず基本となります。Squooshは、こうした表示高速化のニーズから生まれたツールなのです。
Squooshの主な機能
9種類の画像フォーマットへ変換圧縮が可能。
Squooshは、AVIF、Browser JPG、Browser PNG、JPEG XL(beta)、Moz JPEG、OxiPNG、QOI、WebP、WebP v2(unstable)の9種類の画像フォーマットへ変換圧縮できます。
JPG、PNG、AVIF、WebPといったメジャーなフォーマットをしっかりとカバーしています。
AVIF
正式にはAV1 Image File Format。AVIFは、WebPよりも高い圧縮率を実現できる次世代フォーマットです。
WebPの次は恐らくこれですね。主要なブラウザ（Chrome、Edge、Safari、Firefox）でサポートされています。
まだサポートされていないブラウザが少しあります。あと一歩というところまで来ています。
JPG
Browser JPGは通常のブラウザー向けの圧縮エンコーダです。
JPEG XL(beta)はSafariでは標準でサポートされています。Chromeでは以前は実験的にサポートしていましたが現在は削除されました。beta版ですので使わない方が無難です。
Moz JPEGは、Mozillaが開発したJPEGエンコーダで、従来のJPGエンコーダより効率的なデータ圧縮が可能で、ファイルサイズをより小さくすることができます。
PNG
Browser PNGは通常のブラウザー向けの圧縮エンコーダです。
OxiPNGはロスレス圧縮エンコーダです。（*ロスレス圧縮とは、圧縮時に画質を劣化させない圧縮方式。可逆圧縮とも呼ばれる。）
QOI
正式にはQuite OK Image Format。QOIは24bitまたは32bitのカラービットマップ画像のロスレス圧縮エンコーダです。
WebP
通常のWebPとWebP v2があります。当然ですがv2の方が圧縮率は高いです。ただ、v2は不安定(unstable)となっており、まだ実戦では使えません。
基本的にはWebPを使っておけばよいと思います。画像をとにかく確実に表示させたい場合は、PNGやJPGにするとよいです。
AVIFもいいところまで来ていますが、もう少し待ったほうが無難です。
プレビューを見ながら圧縮を最適化できる。
Squooshは、オンタイムでプレビューを見ながら、圧縮を最適化できます。これだけの圧縮の最適化機能を備えているのは恐らくSquooshだけだと思います。
Caesiumもオンタイムでのプレビューは可能ですが、Squooshほど滑らかには動きません。Squooshは非常にスムーズに動きます。
リサイズ機能も装備。
Squooshはリサイズ機能も装備しています。リサイズと圧縮が同時にできるのはかなりいいですね。
僕の場合、Windows標準搭載のフォトなどでトリミングしたときにリサイズも一緒にするので、この機能はあまり使ってはいません。ただ、Squooshでもリサイズできるのはいいですね。安心感があります。
Squooshのメリット
Google製のツール
やはり、検索エンジンでトップのGoogle製のツールという面は大きいと思います。
画像フォーマットもGoogleが推奨する方向に進む可能性が極めて高いと思います。Googleが推奨しているのがWebPやAVIFですね。今のところ、その通りに進んでますね。
圧縮性能がとにかく高い！
画像の変換圧縮ツールは数多くのものが存在します。CaesiumやTinyPNGなどなど…。
僕も色々なツールを試してみましたが、一周回って現在はほぼSquooshしか使っていません＾＾。
最初は英語だし、何かごちゃごちゃしてるなとは思いました。しかし、これが最も高性能で、確実に圧縮を最適化できます。
画像の圧縮変換ツールで迷ったら、Squooshを使っておけばまず間違いないと思います。
プレビュー機能が秀逸。
このソフトの一番の特徴とも言えますが、プレビュー機能が素晴らしいです。
色々な圧縮ソフトを試しましたが、ここまでのプレビュー機能を持っているものは他にないですね。プレビュー機能に関しては文句なく一番だと思います。
画像はローカルで処理されるので安心。
Squooshは、プライバシーについて下記のように明記しています。
Squoosh does not send your image to a server. All image compression processes locally.
(Squooshは画像をサーバーに送信しません。すべての画像圧縮はローカルで処理されます。)
画像がサーバーに送られず、ローカルで処理されるので安心して使えますね。
情報漏洩やプライバシー保護の観点から、この点が担保されてるかどうかはかなり重要だと思います。
ブラウザ版とアプリ版がある。
Squooshはブラウザ版とアプリ版があります。いずれも、PCでもスマホでも利用できます。
アプリ版はオフラインでも使えますので、いつでもどこでも作業することができます。
英語版アプリだが、慣れれば使いやすい。
英語版のアプリなので、最初は使いにくく感じるかもしれませんが、慣れると非常に使いやすいアプリです。
UIも素晴らしく、よく考えて作られたアプリだと思います。
Squooshのデメリット
ブラウザ版やアプリ版では一括圧縮ができない。
Squooshは、ブラウザ版やアプリ版では一括圧縮はできません。一枚ずつになります。圧縮の最適化ができる反面、一括圧縮はできないといった感じです。
ただ、libSquooshやSquoosh CLIなどをNode.jsで動かせば、画像の一括圧縮は可能です。
これは直接コマンドを打ち込む方法で、やや上級者向けだと思います。当然ですが、一括圧縮だと画像のプレビューは見れません。
もっともブログであれば1記事で、画像はせいぜい10枚程度でしょう。そこまで大量の画像を使うこともあまりないと思います。
一括圧縮できなくてもあまり困らないと思います。どうしても一括圧縮したいのであればCaesiumやTinyPNGなどを使うのがよいと思います。
Squooshの使い方
画像ファイルの読み込み
まず、Squooshにアクセスします（下図）。
（アプリ版は画面右上のインストールボタンを押すとインストールできます。）
画面の中央に「Drop or Paste」とあると思います。圧縮したい画像をドラッグアンドドロップするか、「＋」マークを押して圧縮したいファイルを指定してください。
すると画像が読み込まれ、下図のような設定画面が出てくると思います。
Edit(編集)：Resize(リサイズ)とReduce palette(減色)
次にメニューのEdit(編集)のところ、Resize(リサイズ)とReduce palette(減色)について説明します。
Resize(リサイズ)：
まずSquooshのリサイズ機能についてです。
前述の通り、僕はWindows標準搭載のフォトでトリミング時にリサイズも一緒にやっています。
なので、このリサイズ機能はほとんど使いません。ただ、Squooshのリサイズ機能もかなりよいです。
まず、画面左のメニューEditのところで「Resize」を押します。すると、下図のようにプルダウンが開きます。
触るパラメータは基本的にWidth(幅)だけでよいと思います。後はデフォルトのままでOKです。
デフォルトの設定でMaintain aspect ratio（アスペクト比を維持）にチェックが入っています。縦横比を維持してリサイズされます。
例えば、図ではWidth:1024となっていますが、これを800とか好きな値に変更すればOKです。これだけでリサイズは完了です。
あとMethodはリサイズの方法です。デフォルトのLanczos3のままでよいです。こんな感じでかなりマニアックですので基本デフォルト設定のままでOKです。
Reduce palette(減色)：
ここは特に触らなくてOKです。Colorsを下げてもデータ容量が減りませんね…。減色したら、普通はデータ容量は減ると思うんですが、なぜか減りません。理由は不明です。よく分かりません…。
Compress(圧縮)
さて、本題のCompress(圧縮)機能です。PNGからWebPに変換圧縮します。まず、下図のように画像フォーマットをWebPに指定します。
基本、触るのはEffort(労力)とQuality(質)だけでOKです。
ちなみにEffort(労力)とは画像圧縮の際の計算の厳密さを表します。Effortを上げると若干ですが圧縮率を高めることができます。Effortは最大の6にするのがよいと思います(デフォルト値は4)。
ここではQualityは50にしています(デフォルト値は75)。ちなみにWebPはQuality:50でもかなり画質がよいです。
画質の劣化が目立たないレベルまでQualityを下げましょう。QualityもEffortもスライドバーでも調整できますし、数値を直接入力することもできます。
Advanced settings(詳細設定)は特に触らなくてよいと思います。ここはさすがに細かすぎます…。ここを触っても圧縮効果はあまり期待できませんので基本触らなくてOKです。
データ容量が282kBから31.3kBへ大きく圧縮（89%減）できることが分かります。
画面の左側に圧縮前、画面の右側に圧縮後の画像のプレビューが表示され、比較できるようになっています。
これで問題なければ、右下のダウンロードボタンを押して圧縮画像をダウンロードします。
ブログでSquooshを活用する上でのポイント・コツ
次にブログでSquooshを活用する上でのポイント・コツについて説明いたします。
画像フォーマットはどれにすればよい？
基本的にはWebpを使うのがよいと思います。
とにかく画像を確実に表示させたいというのであれば、最も一般的なPNGやJPGにすべきでしょう。
下記リンクにWebPのブラウザのサポート状況を示しています。WebPは既に現行のブラウザすべてでサポートされています。(IEはサポートが終了していますので除外しています。)
GoogleによるとWebPは、同程度の画質であればPNGに比べて約26％、JPGにくらべて約25%～ 34%圧縮できるとあります。画質劣化が少なく、圧縮率を高くできます。
An image format for the Web | WebP – Google for Developers
AVIFはまだ少し早いと思います。あと一歩といったところです。下記のリンクにAVIFのブラウザのサポート状況を示しています。
メジャーなブラウザ（Chrome、Edge、Safari、Firefox）ではすべてサポートされていますが、サポートされていないブラウザが少しだけあります。WebPの次は恐らくAVIFでしょう。
ブログなどであれば、WebPにすればまず問題ないと思います。確実に表示させたいのであれば、PNGやJPGです。
実際どのくらいまで圧縮できる？
使い方の項で使用したサンプル画像は僕がCanvaで作成したイラストです。画像サイズは1024×576です。
例ではPNGからWebPに変換圧縮しました。条件はEffort:6、Quality:50です。これら以外のパラメータは一切触っていません。
これで282kbから31.3kbで89％減です。ざっくり1/10です。これでも十分すぎる画質ですので、まだ圧縮の余地はあります。
ちなみにAVIFでEffort:6、Quality:50だと、24.3kB(91%減)と更に圧縮率を高くできます。
AVIFが使える外部環境が整ってくれば、ぜひAVIFに切り替えたいところですね！
こんな感じでWebPに変換圧縮すれば、イラストでざっくり原図の1/10程度。この辺りが一応の目安になります。
もっとゴリゴリ圧縮したい場合は、過去に使った同じような画像をどのくらいまで圧縮しているかをみるとよいです。それが一番確実だと思います。
ブログの画像であれば、手動圧縮で十分。
libSquooshやSquoosh CLIなどをNode.jsで動かせば、画像の一括圧縮処理は可能です。
ただ、これは直接コマンドを打ち込む必要あり、やや上級者向けの方法です。それと当然ですが、画像のプレビューを見ながら圧縮を最適化というわけにはいきません。
一括で圧縮できる反面、そういうデメリットもあります。
僕はトリミングや画像編集、リサイズまで行った画像を作っておいて、全部まとめて手動で圧縮しています。
ブログであれば、せいぜい1記事で画像10枚程度ではないでしょうか。手動で圧縮してもそこまで時間はかかりません。それとプレビューを見ながらですので、一発で確実に最適化できます。
一度に50枚とか、100枚とかであれば、一括圧縮が必要かもしれませんが、ブログの画像であれば手動圧縮で事足りると思います。
まとめ：Squooshを活用して表示速度を向上させよう！
最後にまとめです。
本記事では、Squooshの概要、主な機能、メリット・デメリット、Squooshの使い方、ブログでSquooshを活用する上でのポイント・コツについて解説させて頂きました。
現在、Squooshは数あるツールの中で最も高性能な画像変換圧縮ツールだと思います。
本記事で述べた通り、ページの表示速度は検索順位に影響を与えます。特にスマホなどのモバイル（低速環境）で影響があるようです。
Page Seed Insightsでちゃんと表示速度が出ているかチェックして、しっかり対策する必要があります。
記事のデータ容量の中で画像の占める割合は大きく、ページの表示速度アップにはまず画像容量の圧縮が基本になります。画像の圧縮は最低限やっておくべきSEO対策です。
ページの表示速度の向上は、それ自体がSEO対策でもありますが、はっきりユーザービリティーの向上につながります。ユーザーにとって表示速度の速いサイトは非常に快適です。
Squooshで画像をしっかり圧縮して表示速度の向上に努め、ユーザビリティーのよい快適なブログを目指しましょう！
最後まで読んで頂きまして、ありがとうございました！
ブログに使う無料画像素材の探し方や、フリー画像素材サイトについては下記の記事がおすすめです。
画像編集のやり方や、おすすめの無料の画像編集ソフトについては下記の記事で詳しく解説しています。
ブログ記事の書き方全般、記事作成の効率化については下記の記事で詳しく解説しています。
