Lighthouse レポートの [Opportunities] セクションには、ページ内でサイズが適切でないすべての画像と、削減可能な削減量が KiB 単位で表示されます。 以下の画像のサイズを変更して、データを節約し、ページの読み込み時間を短縮します。
Lighthouse でサイズが大きすぎる画像が計算される仕組み
Lighthouse は、ページ上の画像ごとに、レンダリングされた画像のサイズと実際の画像のサイズを比較します。レンダリング サイズには、デバイスのピクセル比も考慮されます。レンダリングされたサイズが実際のサイズより 4 KiB 以上小さい場合、画像は監査に合格しません。
画像のサイズを適切に設定するための戦略
理想的には、ユーザーの画面でレンダリングされているバージョンよりも大きなサイズの画像をページで配信しないでください。それ以上大きいと、バイトが浪費され、ページの読み込み時間が遅くなります。
適切なサイズの画像を表示するための主な戦略は、「レスポンシブ画像」と呼ばれます。レスポンシブ画像では、各画像の複数のバージョンを生成し、メディアクエリ、ビューポートのサイズなどを使用して HTML または CSS で使用するバージョンを指定します。また、RespImageLint は、画像に最適な srcset 値と sizes 値を特定するのに役立つブックマークレットです。これらの属性の詳細については、レスポンシブ画像を提供するをご覧ください。
適切なサイズの画像を提供するもう 1 つの主な戦略として、画像 CDN があります。画像 CDN は、画像を変換するためのウェブサービス API と考えることができます。
もう 1 つの方法は、SVG などのベクターベースの画像形式を使用することです。有限の量のコードを使用して、SVG 画像を任意のサイズにスケーリングできます。詳しくは、複雑なアイコンを SVG に置き換えるをご覧ください。
gulp-responsive や responsive-images-generator などのツールを使用すると、画像を複数の形式に変換するプロセスを自動化できます。画像をアップロードする際やページからリクエストする際に、複数のバージョンを生成できる画像 CDN もあります。
スタック固有のガイダンス
AMP
amp-img コンポーネントの srcset のサポートを使用して、画面サイズに応じてどの画像アセットを使用するかを指定します。srcset、sizes、heights を使ったレスポンシブ画像もご覧ください。
Angular
画像のブレークポイントを管理するには、Component Dev Kit（CDK）の BreakpointObserver ユーティリティを使用することを検討してください。
Drupal
Drupal から提供されるネイティブの Responsive Image Styles を使用していることをご確認ください。表示モード、ビュー、WYSIWYG エディタでアップロードした画像を使って画像フィールドをレンダリングする際は、Responsive Image Styles を使用してください。
Gatsby
gatsby-image プラグインを使用して、スマートフォンとタブレット向けに複数の小さな画像を生成します。また、SVG 画像プレースホルダを作成して、効率的な遅延読み込みを行うこともできます。
Joomla
レスポンシブ画像のプラグインの使用をご検討ください。
WordPress
メディア ライブラリから直接画像をアップロードして必要な画像サイズを利用できるようにしたうえで、メディア ライブラリから挿入するか、画像ウィジェットを使用して、最適な画像サイズ（レスポンシブ ブレークポイントのサイズを含む）が使用されるようにします。「Full Size」の画像は、十分なスペースがある場合を除いて使用しないようにします。投稿とページに画像を挿入するをご覧ください。