インターネットが高速化された現在でも、高画質な画像はWebパフォーマンスの最大のボトルネックです。サイズが大きすぎる画像は直帰率を増加させますが、単純に解像度を下げると文字がぼやけたり画質が劣化します。高画質を保ちながら最大限サイズを減らす重要技術を紹介します。
1. 視覚的に無劣化な非可逆圧縮
非可逆圧縮（Lossy Compression）は、画像データの一部を捨てることでファイルサイズを大幅に減らします。ただし捨てられるのは、人の視覚の特性上ほとんど知覚できない細部だけです。品質設定を75〜85%にして保存すれば、肉眼ではほとんど違いが分からないまま、容量を60%以上減らせます。
2. Exifメタデータの削除
スマートフォンやデジタルカメラで撮影した写真には、撮影日時、機器モデル、位置情報（GPS）、露出値などのメタデータ（Exif）が含まれています。Web表示においては不要な情報であるだけでなく、個人のプライバシー保護の観点からも望ましくありません。これを削除するだけで、1ファイルあたり数十KBから数百KBをすぐに減らせます。
実測：品質を下げるとどこから崩れるか
「画質を落とさずに」が実際どこまでなのかを見るには、数字と目を一緒に確かめる必要があります。同じ写真を品質だけ変えて保存した結果です。
| 品質 | ファイルサイズ | 品質95比 | 適した用途 |
|---|---|---|---|
| 95 | 729 KB | — | 印刷・原本保管 |
| 80 | 269 KB | 63%減 | ウェブ本文・商品写真 |
| 60 | 123 KB | 83%減 | サムネイル・プレビュー |
| 40 | 68 KB | 91%減 | 推奨しない |
削減の大半は95から80へ下げる一歩で生まれます。この区間だけで63%減るのに、画面で違いを見分けるのは困難です。逆に60を下回ると削減幅は小さくなる一方、劣化は目につき始めます。
3. 適切なピクセルリサイズ
表示サイズが横幅800ピクセル程度で足りる場所に、撮影時のままの横幅4000ピクセル以上の画像を読み込ませてしまうのはよくあるミスです。表示する実寸サイズに合わせてあらかじめピクセルをリサイズするだけで、ファイルの重さは1/10近くまで抑えられます。リサイズした上で最終圧縮を行うのが正解です。