ダークモード
画像を圧縮・リサイズしてWebサイトを高速化しよう【Squoosh】
Webサイトの読み込み速度は、ユーザーエクスペリエンスに大きな影響を与えます。
読み込みが遅いとユーザーの離脱率は一気に高まる上、SEO的にも悪影響が出ます。
高品質なWebサイトを制作する上で、ページの読み込み速度を高めることは非常に重要です。
その中でも、画像の圧縮・リサイズは、Webサイトの読み込み速度を向上させるための効果的な手段の一つです。
Googleが推奨しているWebサイト１ページ当たりの総容量は1.6MBといわれています。
Aim to keep your total byte size below 1,600 KiB. This target is based on the amount of data that can be theoretically downloaded on a 3G connection while still achieving a Time to Interactive of 10 seconds or less.
引用元：Chrome Developers
高画質な画像ファイルは１つで簡単に数MBを超えることもあるので、それだけで上記の推奨容量をオーバーしてしまいます。
ページの総容量に占める画像ファイルの割合は非常に大きいため、圧縮・リサイズ・適切なファイル形式の選択を行い、ファイル容量を削減することが重要です。
この記事では、Webサイトの読み込み速度を高速化するための、画像の軽量化の方法と、その際に便利な画像圧縮ツールを紹介します。
目次
画像ファイルが重い原因と対策
画像ファイルが重くなってしまう原因としては、主に以下の３つが挙げられます。
- 必要以上に大きいサイズを使用している
- 圧縮されていない or 圧縮が不十分
- ファイル形式が適切でない
それぞれ解説していきます。
原因① 必要以上に大きいサイズを使用している
基本的に、画像はサイズ（幅や高さ等の寸法）が大きいほど、ファイル容量も大きくなります。
実際にページ上に表示するサイズと比べて大きすぎる画像を使用していれば、当然無駄な容量を読み込んでいることになってしまいます。
よくあるのは、画像の素材サイトからダウンロードしてきて、そのまま使用してしまうパターン。
Adobe Stockなどは非常に高画質な画像素材を提供していますが、中には画像幅が8000pxを超えるような写真もあり、そのままWebサイト上に使用するには明らかにサイズが大きすぎます。
そのような場合は適切にリサイズを行い、画像サイズを縮小しましょう。
とはいえ、デザインカンプ上の画像サイズまで縮小を行っていいわけではありません。Webサイトに使用する画像素材は、実際に表示するサイズの２倍の大きさが必要です。
画像サイズを２倍で用意する理由については、こちらの記事で解説しています。
原因② 圧縮されていない or 圧縮が不十分
現代は何でも高画質な時代ですので、画像ファイルもその分容量が大きくなっています。
とはいえ、Web上に綺麗に画像を表示させるために必要な容量は、元の容量よりも小さい場合がほとんどです。
例えば、一般的に高画質な印刷に使用される解像度は300dpi（1インチあたり300ドット）です。一方、Web上での解像度は通常72dpi、Retinaディスプレイなどの高解像度のものは、2倍の144dpiがあれば十分なので、その分容量を抑えることが可能です。
適度に圧縮をしてファイルサイズを削減しましょう。
Xdなどのデザインツールでは、画像(JPEG)の書き出し時に「画質」を選択することができます。
画像にもよりますが、画質80%程度であれば外観に悪影響がないレベルで圧縮をすることが出来るでしょう。
圧縮後のファイルサイズについては、後述するSquooshで圧縮を行った場合の方が、容量を削減できます。
そのため、デザインからJPEG画像を書き出したい場合は、軽量化にこだわるなら、一度PNGで書き出し（非可逆圧縮による劣化を避けるため）、SquooshでJPEGに変換しつつ圧縮するのが最適でしょう。
原因③ ファイル形式が適切でない
デジタルデータとして保存される画像には、JPEG、PNG、SVGなど様々なファイル形式が存在します。
それぞれのファイル形式が得意・不得意とする画像は違うため、ファイル形式が違うだけで、見た目上は同じ画像でも容量に大幅な差が出ることがあります。
そのため、それぞれの画像に適したファイル形式を選択しましょう。
最適な画像ファイル形式の選び方については、以下の記事で詳しく解説しています。
「Squoosh」で画像を軽量化する方法
この記事で最も伝えたいのがこの章になります。
先ほどまで画像のリサイズ、圧縮、適切なファイル形式での保存が大切であることをお伝えしましたが、これらの３つを同時に行える非常に便利なツールが「Squoosh」です！
Squooshは、Googleが開発した画像圧縮ツールであり、Web上で動作するため、インストールなども不要で誰でも手軽に使用することができます。
一番の特徴が、画像編集のビフォーアフターをリアルタイムで比較しながら調整を行える点です。
デザインツール等から画像を圧縮して書き出す場合は、書き出してみないと外観を確認できないため、これは非常に便利です。
Squooshにアクセスすると、まず下のようなページが表示されるので、圧縮したい画像をドラッグ&ドロップするか、真ん中のボタンを押してファイルを選択しましょう。
加工したい画像を取り込むと、下のように表示されます。
中央のバーの左側に加工前、右側に加工後の画像が表示されます。
このバーはドラッグ操作で自由に動かすことができ、それぞれの表示領域を調整可能です。
右下に加工後のファイルサイズと容量削減率が表示されています。
この例では、加工前後で見た目にほとんど差がないのに、容量を60%も削減できていることがわかるでしょう。
右下のボタンを押すと、加工後の画像をダウンロードすることができます。
ここからは、Squooshを使用してファイル形式の変換、リサイズ、圧縮/減色を行う方法を解説していきます。
ファイル形式を変換する
デフォルトで「MozJPEG」と表示されている要素をクリックすることで、変換するファイル形式を選択できます。
様々なファイル形式が存在しますが、メインで使用するのは「MozJPEG」、「OxiPNG」、「WebP」の３つです。
MozJPEGはBrowserJPEGよりも優れた圧縮ができ、OxiPNGはBrowserPNGよりも優れた圧縮が可能です。
JPEG形式にしたい場合はMozJPEG、PNG形式にしたい場合はOxiPNGを使用しましょう。
WebPは、Googleが開発した新しい画像ファイル形式で、次世代フォーマットの一種です。
JPEGのように高品質な圧縮が可能で、PNGのように透過色を扱える、非常に軽量なファイル形式です。
非常に優れた特徴を持つWebPですが、サポートされていないブラウザへの対処が必要な点や、WordPressのメディア機能で使用するためにはプラグイン等を使う必要がある点など、使用するのに少し面倒な手順が必要です。
WebPについての詳細は以下の記事で解説しています。
リサイズする
「Edit」内の「Resize」をONにすることで、画像のリサイズができます。
沢山の項目が出てきて迷うかもしれませんが、基本的には「Width」と「Height」のエリアだけ見れば大丈夫です。
高解像度ディスプレイへの対応のため、デザインカンプ上の画像幅の２倍の数値になるようWidthに入力すれば良いでしょう。
「Maintain aspect ratio」は画像のアスペクト比を維持するかどうかのオプションです。
ここにチェックが入っていると、Widthを変更した際はHeight、Heightを変更した際はWidthがアスペクト比を元に自動で変換されます。
もし、画像の幅と高さの両方を絶対値で指定したい場合は、「Maintain aspect ratio」のチェックを外しましょう。
Fit methodには以下のような違いがあります。
- Stretch：指定したWidthとHeightに合わせて画像が伸縮
- Contain：指定したWidthとHeightで画像を切り抜く
画面幅に合わせて画像のサイズが変動するレスポンシブデザインにおいては、スマホ用、タブレット用、デスクトップ用などのサイズ違いの画像を用意して出し分ける場合があります。その場合の画像アセットの作成にもSquooshによるリサイズはとても便利です。
複数の画像の中から画面幅に対して適切なサイズの画像を表示する方法は、以下の記事で詳しく解説しています。
圧縮する（JPEG向け）
「Compress」内の「Quality」の部分で、圧縮後の画質を調整することができます。（PNGでは不可）
圧縮前後の画像を見比べながら、外観に影響のない範囲で画質を指定しましょう。
デフォルトで75%になっているので、プレビューを見て画質に不安があれば、徐々に品質を上げて調整していくと良いです。
「Advanced setting」と表示された部分で他にも様々な調整が出来ますが、上級者向けの内容のため、触らなくても大丈夫です。
PNG形式を選択している場合、Qualityの調整による圧縮率の変更が出来ません。
JPEGでQualityが表示されていた部分には、Interlace、Effortの２つの項目が表示されています。
この２つは操作する必要はほぼないですが、参考程度に解説を載せておきます。
- Interlace：Web上で画像を読み込んでいる最中の描画形式のこと。通常、画像は上から徐々に描画されていきますが、インターレースをONにすると、はじめに荒い画質で全体が表示され、徐々に鮮明に描画されていきます。インターレース形式の方がファイルサイズはやや大きくなりますが、体感的な描画時間が短く感じられるメリットがあります。とはいえ、画像を適切に軽量化して容量を抑えていれば、一瞬で画像は描画されるので、よほど重たい画像でない限りインターレース形式を適用する必要はないでしょう。
- Effort：変換の品質レベルを示す数値で、高いほど高品質な変換が期待されますが、変換にかかる時間が長くなります。変更してもファイルサイズにはほとんど影響がない場合が多いので、デフォルトのままで良いでしょう。
減色する（PNG向け）
前述したように、PNG形式ではQualityによる画質変更が出来ないため、容量を削減したい場合は代わりに減色をすると良いです。
減色は「Edit」の項目内の「Reduce palette」で行うことが出来ます。
Reduce paletteをONにした時点で、画像に使用される色数が256色になります。この場合、元の画像が256色より多い場合はファイルサイズの削減が期待できます。
上の画像の例では289kB→101kBまで削減できました。
PNGに適した色数の少ない画像の場合、256色でも過剰になっているケースが多いので、更に減色しても外観を損なわないまま容量削減効果が期待できます。
上の例では、オリジナルのファイルサイズは260kBでしたが、25色まで減色した結果、58kBまで容量を削減できました。
減色のし過ぎには注意しましょう。上の例ではギリギリを攻めましたが、気づかぬところで色が欠けてしまう可能性もあるので、あまり神経質にならず程々の減色で止めておくと良いです。
Reduce paletteの項目内には、色数を変更できるColorsの他に、Ditheringという設定項目があります。
Dithering（ディザリング）は、画像の色数を減らしても人間の目には元画像に近いように見えるように処理する技術です。異なる色のピクセルを規則的に並べて中間色を表現することで、減色によって目立ちやすくなる色の境界を滑らかに見せます。
減色と合わせてDitheringの数値を小さくすることで、さらにファイルサイズの削減が期待できますが、色のグラデーションが目に見えて荒くなる可能性があります。
そのため、Ditheringの操作は、色のグラデーションが元々あまりない画像に対してすると良いと思います。
ここまで解説した減色についてはJPEGでも出来ますが、JPEG向きの色数の多い画像は少しの減色で外観に悪影響が出やすいです。
JPEGは基本的にQualityの変更による圧縮だけで十分でしょう。
まとめ：画像を軽量化してWebサイトを高速化しよう
Webサイトの表示を高速化をする上で、画像ファイルサイズの削減が重要であることを解説しました。
画像を１枚１枚圧縮するのは面倒かもしれませんが、その一手間の積み重ねで、最終的なWebサイト全体の品質はグッと良くなります。
- 画像を適切なサイズにリサイズする
- 適切なファイル形式を使用する
- 圧縮や減色でファイルサイズを削減する
以上の３点を実行し、１ファイル当たりの容量を小さくしましょう。
Squooshは非常に便利な画像圧縮ツールなので、是非有効活用してください！