公開日: 2025 年 10 月 8 日
画像のダウンロード時間を短縮すると、ページ読み込みの体感時間と LCP を改善できます。
インサイトが失敗する理由
この分析情報では、ダウンロード サイズが不必要に大きい画像がハイライト表示されます。推定バイト削減量は、画像のダウンロード サイズと画像形式の効率的なバイト/ピクセル比率を比較して計算されます。
画像のダウンロード時間を短縮する方法
この分析情報では、画像の表示サイズとファイル形式に応じて、画像のダウンロード時間を短縮するための推奨戦略がいくつか提示されています。画像 CDN をデプロイすることは、これらの戦略すべてに非常に役立ちます。
画像の圧縮係数を増やす
ほとんどの画像形式では、画質を犠牲にして画像ファイルのサイズを小さくするために調整できる圧縮レベルがサポートされています。ImageOptim、Squoosh、Imagemin などの画像ツールを使用して、画像圧縮率を最適化できます。
最新の画像形式を使用する
AVIF と WebP は、JPEG や PNG などの古い画像形式と比べて、圧縮率と画質に優れている画像形式です。これらの新しい形式で画像をエンコードすることは、画像のダウンロード サイズを小さくするうえで有効な戦略です。
AVIF はすべての主要ブラウザの最新バージョンでサポートされており、同じ品質設定の他の形式と比較してファイルサイズが小さくなります。AVIF の詳細については、AVIF 画像の配信 Codelab をご覧ください。
WebP はすべての主要なブラウザでサポートされており、ウェブ上の画像に対する高品質な可逆圧縮と非可逆圧縮が可能です。WebP について詳しくは、WebP 画像を使用するをご覧ください。
アニメーション コンテンツでの動画形式の使用
サイズの大きい GIF は、動画と比較してアニメーション コンテンツの配信方法として効率的ではありません。ネットワークの通信量を抑えるため、GIF を使用する代わりに、アニメーションには MPEG4 か WebM、静止画像には PNG か WebP を使用することをご検討ください。
GIF 画像を動画に置き換える方法については、アニメーション GIF を動画に置き換えてページ読み込みを高速化するをご覧ください。
レスポンシブなサイズの画像を配信する
理想的には、ユーザーの画面でレンダリングされている画像より大きなサイズの画像を配信することは避けてください。これより大きいと、バイトが無駄になり、ページの読み込み時間が長くなります。
1 つの戦略として、SVG などのベクターベースの画像形式を使用する方法があります。SVG 画像は、有限量のコードで任意のサイズに拡大縮小できます。詳しくは、複雑なアイコンを SVG に置き換えるをご覧ください。
ベクターベースの画像を使用できない場合は、「レスポンシブ」な画像を使用するのが最適です。レスポンシブ画像では、各画像の複数のバージョンを生成し、メディアクエリやビューポートの寸法などを使用して、HTML または CSS で使用するバージョンを指定します。
たとえば、<img> 要素には srcset 属性と sizes 属性があり、さまざまなサイズの画像 URL を指定できます。
画像を完全に変更する必要がある場合は、<picture> 要素を使用します。
詳しくは、レスポンシブ画像とpicture 要素をご覧ください。
スタック固有のガイダンス
この分析情報では、次のテクノロジーを使用するページについて、スタック固有のガイダンスも提供されます。
AMP
- すべての
amp-imgコンポーネントを WebP 形式で表示し、他のブラウザには適切な代替画像を表示することを検討してください。 - アニメーション コンテンツの場合は、
amp-animを使用して、コンテンツが画面外にあるときの CPU 使用量を最小限に抑えることができます。
Drupal
- 画質を落とさずにサイトでアップロードされる画像のサイズを自動的に最適化して縮小できるモジュールの使用をご検討ください。
- サイトにレンダリングされるすべての画像に対して、Drupal から提供される組み込みのレスポンシブ画像スタイルを使用していることを確認してください。
Joomla
アップロードした画像を最適なフォーマットに自動変換するプラグインまたはサービスの使用をご検討ください。
Magento
画像を最適化するサードパーティ製の Magento 拡張機能の使用をご検討ください。
WordPress
画質を落とさずに画像を圧縮できる WordPress の画像最適化プラグインの使用をご検討ください。