ブログやウェブサイトのSEO対策のひとつにページの表示速度の改善があります。その中でも画像サイズの最適化は効果も大きく、使い方も簡単なSquoosh（スクーシュ）という無料サービスを利用すれば誰でも対策が可能です。
Squoosh（スクーシュ）はGoogleが開発した画像サイズをリアルタイムに調整できる無料のオンラインアプリ。画像の縦横サイズのリサイズ、WebPやJPEG・PNGなどへ変換・画像圧縮してデータの軽量化まで出来る優れものです。
Webで使用する画像サイズは軽い方が良いですが、デザイン的には出来るだけ画質も綺麗に保ちたいですよね。
ただ、画像サイズが大きいと読み込みに時間が掛かる為、いわゆる「ページが重い」状態となります。その結果、画面表示が遅くなりユーザーが離れてしまうわけです。
そこで今回はSquooshの使い方を詳しく解説していきます。リアルタイムにプレビューしながら調整できる事や、適切なファイル形式を選択する事で画像サイズを最適なものにする事が出来ます。
画像サイズやファイル形式を気にしていなかったブロガーや、Photoshopを使い慣れているWebデザイナーも参考にして下さいね。
この記事の目次
Squooshとは？
「Squoosh」はGoogleが無料で提供する画像圧縮アプリ。データ圧縮以外にも、リサイズや様々な画像ファイル形式への変換が出来ます。
ブラウザ上でオリジナル画像と変換予定の画像をプレビューで比較できるのは凄く便利です。
Squooshは安全なのでデスクトップにダウンロードして使う事も可能ですが、パソコンやスマホのブラウザから利用する方がおすすめです。
画像の軽量化はSEO対策をする上で必須なので、是非とも活用して頂きたいツールの一つです。
Squooshは、ブラウザでさまざまなコーデックを使用して画像を圧縮および比較できる画像最適化ツールです。
GitHub：GoogleChromeLabs/squoosh
Squooshの特長
Squooshを使う最大の特長は、ブラウザ上で画像圧縮とファイル形式の変換が出来る事。複数の変換をプレビューで試しながら比較出来ます。
専用の画像加工アプリを持っていなくてもSquooshにアクセスするだけで、アカウント登録も必要ありません。
数ある画像圧縮アプリの中でもSquooshを使うメリットは、WebPやAVIFなどの新しいフォーマットが使える事。もちろんJPEGやPNGも使えますし、他のアプリよりも圧縮率が高くて画質も綺麗な事が多いです。
ファイルサイズを軽量化してウェブサイトの表示速度を改善する事は、SEO対策としてメリットがあります。
参考：Squoosh
Squooshの使い方
ここではSquooshの使い方の手順を解説していきます。
ブラウザからSquooshにアクセスします。PCとスマホのとちらでも利用出来ますが、操作がしやすいPCで編集するのがおすすめ。
画像ファイル変換から圧縮までの流れは以下の通りです。
- 変換・圧縮したい画像をブラウザ画面に直接ドラッグ＆ドロップする。
- 必要なら先に画像のリサイズを済ませる。
- ファイル圧縮形式を選択し、プレビューを見ながら圧縮率を調整する。
- 圧縮結果に問題無ければそのままダウンロード。
Squooshのトップ画面
ブラウザでSquooshサイトへ行くと上の様な画面になっています。
スマホの場合は画面中央をタップし、フォルダから画像を選択。
初めて見ると「何コレ？」ってなりますが、この画面上に画像を直接ドラッグ＆ドロップすれば編集画面に切り替わります。
画像変換と圧縮のプレビュー画面
左右でオリジナルの元画像とファイル形式を変換・圧縮した状態をプレビューで見比べる事が出来ます。
基本的にはオリジナル画像との比較だと思いますが、「JPEGとWebP」の様に、異なるフォーマット同士で比較する事も出来ます。
画面中央の矢印を左右に移動させる事でプレビューエリアを広げる事も出来ます。また、画面中央下には拡大縮小ボタンや回転ボタンが並びます。
圧縮によってディテールが失われていないか？画像が荒れてないかチェックするのに便利な機能です。上のサンプル画像であれば毛並み等をプレビューで確認します。
先にリサイズで画像の縦横サイズを変更
もし必要なら、先にリサイズで画像の縦横サイズを変更しておきます。これには次のような理由があります。
先にリサイズした方が良い理由
- 元画像の縦横サイズが大きいとそれだけでデータが重い。
- 圧縮してから縮小すると、最適な圧縮の加減が分からない。
ブログやウェブサイトに掲載するサイズに変更してから圧縮した方が効率的です。
なお、幅と高さの比率は固定されています。例えば、幅を入れると縦横比を維持したまま自動的に高さも変わります。
圧縮・変換するファイル形式を選択する
正直な所、オプション（アドバンスドセッティング）内容は専門の知識が無ければ難しいです。ですが大抵の場合「適切なファイル圧縮形式と圧縮率の変更」で十分な効果が得られます。
また、選べる画像圧縮形式は沢山あり、よく見かけるJPEGやPNGにも違いがあります。SquooshはGoogleのフリーソフトなので、当然ですがWebPにも対応しています。
これらは画像圧縮ツールやエンコーダーと呼ばれるものですが、違いが分かりにくいですよね。簡単にではありますが、後ほど改めて解説したいと思います。
圧縮結果をプレビュー
写真やイラストなど画像の内容によって最適なファイル形式があり、圧縮率にも違いが出ます。データサイズは小さいに越した事はありませんが、画質が荒れない程度に抑えます。
逆にあまりにも高画質な画像はブラウザでは表現しきれず、ただ重いだけでデメリットしかありません。
Photoshopなどで編集した画像の場合は一切圧縮しない状態で書き出し、Squoosh側だけで圧縮する方が良い結果が得られやすいです。
① 圧縮形式選択
ここでは試しにMozJPEGを選びました。圧縮形式によってオプションも変わりますが、理由が無ければそのままで大丈夫です。
思ったほど圧縮効果が得られない時は、WebP形式など他のフォーマットで試してみるのがおすすめです。
② Quality（品質）
画像の品質の事で、圧縮率をここで調整します。スライダーで数値を変更するとリアルタイムでプレビュー画面に結果が反映されます。（中心にある青い矢印の右側にあるエリア内）
数値を高めるほどファイルサイズも大きくなります。
例えばこの画像の場合、毛並みが潰れない位のギリギリまで画質を下げてみるなど、色々試すと良いです。また、画像によっては他の圧縮形式の方が適している場合もあります。
③ 圧縮の結果
画面右下に圧縮された割合と書き出し後のデータサイズが即座に表示されます。目視で画質を確認し、圧縮後のデータサイズにも問題が無ければ、その横にあるボタンからファイルをダウンロードしましょう。
各ファイル圧縮形式の違いや特徴
画面右下にある「Compress」のプルダウンメニューから、圧縮方法（ファイル形式）の選択をする訳ですが、それぞれの違いや特徴を簡単に紹介します。
MozJPEGやOxiPNGなど、JPEGやPNGとは違うの？ってなりそうですが、圧縮方法やツールの名前です。ファイル形式はWEBで使っているいつものJPEGやPNGと考えて問題ありません。
高度なオプション設定もそうですが、ブログやウェブサイトに掲載する為に軽量化したいだけなら難しく考えなくて大丈夫です。
MozJPEG
MozJPEGはMozillaが開発したJPEGフォーマットで、高品質な圧縮が可能です。特に、ウェブページのロード時間を短縮するために設計された高圧縮かつ高品質なJPEGエンコーダー。
すべてのWebブラウザーと完全に互換性があるので、ブログやウェブサイトで問題無く使えます。
| 圧縮方法 | ファイル拡張子 |
|---|---|
| MozJPEG | jpeg |
OxiPNG
OxiPNGはPNG画像の最適化に特化した高度なアルゴリズムを使用しています。これにより、画像の品質を損なうことなくファイルサイズを劇的に削減する、マルチスレッドのロスレスPNG圧縮オプティマイザです。
ロスレスとは圧縮しても劣化が無いという意味です。PNGなので背景を透過させる事も可能です。
| 圧縮方法 | ファイル拡張子 |
|---|---|
| OxiPNG | png |
WebP
WebPはGoogleが開発した新しい画像フォーマットで、高い圧縮率と高品質の画像を実現しています。WebPとSquooshは共にGoogleのアプリなので相性は良いですね。
オプションの「Losless」にチェックを入れると劣化の無い圧縮になります。その分データサイズは若干大きくなります。
また、背景の透過やアニメーションもサポートしています。
| 圧縮方法 | ファイル拡張子 |
|---|---|
| WebP | webp |
AVIF
AVIF（AV1 Image File Format）は、静止画像の圧縮のために開発された新しい画像形式で、Googleが開発したWebPよりも優れた圧縮効率を持っています。
AVIFは、静止画像だけでなく、アニメーションや透過画像にも対応しており、Webサイトやアプリのデザインでより多様な表現が可能になります。
オプションの「Losless」にチェックを入れると劣化の無い圧縮になります。その分データサイズは大きいです。
| 圧縮方法 | ファイル拡張子 |
|---|---|
| AVIF | avif |
Squooshのよくある質問
以上が、Squooshによくある質問や疑問です。Squooshは、使いやすく高度な機能を提供するため、Web開発者やデザイナーにとって非常に役立つツールの1つです。
まとめ
利用回数などの制限も無いので、画像を加工しサイトにアップする前にはSquooshで圧縮するという風にワンセットで考えておくのが大事です。
スマートフォンで撮った写真やフリー素材画像はそのままブログにアップせず、必ずリサイズと圧縮をしましょう。
重い画像はSEO的に好ましくありません。また、表示が遅いブログやサイトは閲覧ユーザーが離れてしまいます。
Squooshならオンラインでプレビューしながら圧縮・変換を試せるので、簡単で便利です。是非、使ってみて下さいね。
