Web用に画像を圧縮する方法
画像の重さのほとんどは、エンコーダーが動くずっと前に無駄になっています。実際にバイト数を減らせる作業順序と、気にする価値のある設定をまとめました。
画像の重さが重要な理由
多くのサイトで、画像はページの重さへの最大の要因です。スクリプト、スタイル、フォントをすべて合わせたよりも大きいことも珍しくありません。そこから二つの帰結が生まれます。第一に、モバイル回線の訪問者はより長く待ち、その分の通信料も払います。第二に、画像の重さは Largest Contentful Paint にそのまま反映されます。ページ内で最大の要素は通常ヒーロー画像なので、性能スコアの低さで最もよく槍玉に挙げられる Core Web Vitals です。
良い知らせは、画像の重さが最も直しやすい部分でもあるということです。ここにあることのどれも、ビルドパイプラインの作り直しを必要としません。
効果の大きい順に進める
圧縮ツールは、まず品質スライダーに手を伸ばさせようとします。しかしそれは三つのレバーのうち最も小さいものです。順序はこうあるべきです。
- リサイズ — 効果は群を抜いて最大。
- フォーマットの選択 — 大きく、一度きりの効果。
- 品質の設定 — 微調整。効果は実在しますが上限があります。
1. まずリサイズ
幅4000ピクセルの写真を幅800ピクセルの枠に表示すると、見せられる量のおよそ25倍のピクセルを運ぶことになります。この差を埋められるコーデックはありません。大きすぎる画像を配信してから強く圧縮するのは典型的な失敗です。コストを二度払い、しかも見える結果は最初から適切にリサイズした場合より悪くなります。
実際の表示サイズにリサイズし、重要な画像なら高密度ディスプレイ用に2倍を確保します。目安として、全幅のヒーロー画像は幅2000ピクセルを超えることはほとんどなく、本文内の画像は1200を超えることはほとんどありません。
2. フォーマットを選ぶ
写真は AVIF か WebP にすべきです。輪郭がはっきりした図版、文字、透過を含むものは PNG か可逆 WebP のままにします。フォーマットガイドでトレードオフを詳しく扱っています。短く言えば、フォーマットの選択は画像の種類ごとの判断であり、全体で一つに決めるものではありません。
3. 品質を設定する
非可逆フォーマットでは、品質は忠実さとサイズを交換する0〜100の目盛りです。線形ではありません。90から80へ下げると、知覚できる差なしにファイルの3分の1が減ることが多く、50から40へ下げると、たいていは目に見える乱れが増えるだけです。
妥当な出発点:
| 内容 | おおよその目標 | 備考 |
|---|---|---|
| Web用の写真 | JPEG/WebP 品質 ~75 | 通常の最適点。AVIF はさらに低い値で同等の品質に達します |
| サムネイル、アバター | 品質 60–70 | 表示サイズが小さいと、思った以上に隠れます |
| スクリーンショット、UI、文字 | 可逆(PNG / 可逆 WebP) | 非可逆圧縮は1ピクセルの輪郭と字形をにじませます |
| 保存用 / 印刷 | 品質 90+、または元画像 | 元画像を保持します。これはWeb配信の場面ではありません |
拡大してではなく表示サイズで判断する。 圧縮後と元画像を、実際に表示される大きさで比較してください。400%拡大では目立つ差も、実際の文脈では見えないのが普通です。
スケールするバッチ作業
- スクリーンショット、写真、書き出しを一つのフォルダに集めます。
- 二つのグループに分けます: 写真系と図版系。使うフォーマットも設定も異なります。
- 各グループを配信サイズにリサイズします。
- 写真系は AVIF と WebP に、図版系は可逆で圧縮します。
- 各結果を元画像と比較します。大きくなったものは捨てます。それは失敗ではなく合図です。
- 元画像を残す。 圧縮後の成果物はビルド生成物で、元画像がアーカイブです。
tinyimg は手順4と5を一度に最大30ファイルまで処理し、1回の実行で複数フォーマットを出力できるのでサイズを直接比較できます。ブラウザ内でバッチ処理するということは、顧客や個人の写真のフォルダが端末から出ないということでもあります。アップロードの方針が気になるなら、これは価値のある利点です。
気づかないうちに最もバイトを無駄にする失敗
- すべての端末に一つの巨大な画像を配信する。 2000ピクセルの JPEG 一枚はレスポンシブな戦略ではありません。
srcsetを使ってスマートフォンには小さい版を取得させましょう。 - JPEG を何度も保存し直す。 非可逆の世代を重ねるたびに損傷が積み重なります。常に元画像から再エンコードしてください。
- 写真に PNG を使う。 同等の JPEG より5〜10倍大きいことが多く、見た目の利点はありません。
- 有用な範囲を超えて「最小」を追う。 40%の削減は優秀です。空に縞が見える45%は違います。
- 遅延読み込みを忘れる。 ファーストビューより下の画像が最初の描画を妨げるべきではありません。遅延読み込みは属性一つで大きく効きます。
- 再計測しない。 予算を決めて確認します。そうしなければアセット一つずつ増えていきます。
終わりの見極め方
ページの予算を決めて守りましょう。コンテンツページの妥当な目標は、画像の総量をおよそ1メガバイト未満に保つことです。その大半をヒーロー画像が占めます。ページがそれを大きく超えるなら、よくある原因はリサイズしていないヒーロー画像、PNG で保存された写真、あるいは SVG や CSS で代替できる装飾画像の数々です。
地味ですが短い作業です。リサイズし、フォーマットを選び、妥当な品質を設定し、表示サイズで確認し、元画像を残します。この順序で、ほぼどのサイトでも避けられたはずの画像の重さの大半を取り除けます。