ウェブパフォーマンスのための画像圧縮: 完全ガイド
画像は平均的なウェブページの容量の大部分、しばしば50%以上を占めます。画像の圧縮は、ほとんどのサイトが実施できる最も効果的なパフォーマンス改善であり、費用もかかりません。
このガイドでは、実際に効果のあるフォーマット、設定、テクニックを解説します。
画像サイズが重要な理由
画像のキロバイトはすべてダウンロード時間であり、特にモバイルでは顕著です。Googleの調査によると、ページ容量の削減はCore Web Vitalsのスコアとランキングを直接向上させます。小さな画像は帯域幅のコストと二酸化炭素排出量も削減します。
まず適切なフォーマットを選ぶ
デフォルトはWebP、可能な限り小さなファイルを求める写真にはAVIFを使いましょう。PNGは可逆性が必要な場合のみに限定します。フォーマットの選択は、どんな品質設定よりも重要です。
パーセンテージではなく品質スライダーを使う
WebPとJPGの品質75〜80は画面上で美しく見えます。90から75に下げると、目に見える差なしにファイルサイズが半分になることがよくあります。常に結果をオリジナルと比較してください。
圧縮する前にリサイズする
800pxで表示する4000pxの写真を圧縮しても、バイトのほとんどを無駄にしています。表示する最大サイズにリサイズしてから圧縮しましょう。この組み合わせで通常70〜90%のサイズ削減になります。
遅延読み込みとpicture要素を使う
画面外の画像は遅延読み込みし、picture要素でJPEGフォールバック付きのAVIFやWebPを配信しましょう。圧縮と組み合わせることで、画像はほぼコストゼロになります。
すべての画像を圧縮し、WebPまたはAVIFを使い、表示サイズにリサイズし、遅延読み込みする。この4つの習慣でページ容量を半分にできます。当サイトのブラウザベースの圧縮ツールは、最初の2つを数秒で行います。