ウェブページが遅く感じられる最も多い原因は、複雑なコードではなく重い画像です。多くのサイトで転送容量の半分以上を画像が占め、カメラで撮った写真を手を加えずそのまま載せると、一枚で数メガバイトになることもあります。幸い画像の最適化は、いくつかの原則を守るだけで誰でも大きな効果を得られる分野です。
本記事は、コードに深く立ち入らなくても実践できる実用的なチェックリストです。形式選びからサイズ調整、圧縮、そして読み込み方まで順番に見ていきます。
1. 用途に合った形式を選ぶ
形式を正しく選ぶだけでも容量は大きく減ります。判断の鍵は「写真か、グラフィックか」です。
- 写真・実写画像:JPG が適しています。色が豊かな画像を小さな容量に圧縮するのが得意です。
- ロゴ・アイコン・図形・透明背景:PNG が適しています。線がくっきりし、透明度に対応します。
- 透明度が不要な PNG 写真:PNG から JPG に変えると、画質の劣化はほとんどなく容量を大きく減らせます。
2. 表示される大きさにリサイズする
最も多く、最ももったいない無駄がこの部分です。画面では横 800 ピクセルで表示されるのに、元の 4000 ピクセルの写真をそのまま載せてしまうことがよくあります。ブラウザはその大きな画像をダウンロードしてから縮小して表示するため、利用者は見えもしないピクセルのために何倍ものデータを浪費することになります。
ルールは単純です。実際に表示される大きさより少しだけ大きくリサイズしてください。高解像度(Retina)画面を考慮しても、表示サイズの 2 倍あれば十分です。それ以上はほとんど意味がありません。
3. 圧縮で最後の余分をそぎ落とす
形式とサイズを整えたら、最後は圧縮です。JPG は画質を段階的に調整でき、品質を 80% 前後まで下げても、多くの人は違いに気づかないまま容量は目に見えて減ります。目標の容量を決めてその以下に収める方法が、実務では最も便利です。
- 品質 75〜85% の範囲が、画質と容量のちょうど良いバランス点です。
- ヒーローバナーのような大きい画像ほど、圧縮の効果が大きくなります。
- 圧縮後は必ず目で確認し、過度な劣化がないか点検してください。
4. 遅延読み込みで最初の画面を速く
画像ファイル自体を小さくするのとは別に、いつ読み込むかも重要です。画面をかなり下げないと見えない画像まで最初からすべてダウンロードする必要はありません。利用者がスクロールして近づいたときに読み込めば、最初の画面がずっと速く表示されます。
HTML の画像タグに loading="lazy" 属性を一行加えるだけで、最新のブラウザが自動で遅延読み込みを処理します。ただし、画面の一番上にすぐ見える主要な画像には付けないでください — かえって表示が遅れることがあります。
Switching ですぐに適用する
上のチェックリストのうち、形式・リサイズ・圧縮は Switching のツールでそのまま処理できます。画像リサイズで表示サイズに合わせ、画像圧縮で目標容量以下に減らし、透明度が不要な PNG は PNG から JPG に変えてください。すべてブラウザ内で処理されるので、ファイルをどこにもアップロードせずに最適化を終えられます。