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