WebPerformance

Lighthouse が指摘する「Serves images with low resolution」について

投稿日:2021年10月13日 更新日:

1. Lighthouse での指摘事項

Chrome – デベロッパーツール (DevTools) – [Lighthouse] パネル を使って Webページを解析すると、「Serves images with low resolution(解像度の低い画像を提供してください)」と指摘されることがあります。

※ Lighthouse は、Webページのパフォーマンス解析ツールです。

Serves images with low resolution

2. 必要な対応

上記の解析結果画像を見ると、以下の数値が表示されています。

  • Displayed size 600 x 800
  • Actual size 400 x 533
  • Expected size 1200 x 1600

望まれているのは、「期待されるサイズ (Expected size) 1200 x 1600」の画像を用意することです(「Serves images with low resolution」とは反対のような…)。表示されたサイズ (Displayed size) に対して Expected size が 2倍であるため、デバイスピクセル比 2 のデバイスにちゃんと対応しておけば、Lighthouse 的には問題ないということだと思われます。

デバイスピクセル比

例えばある画像の表示幅を 400px と指定している場合、デバイスピクセル比 2 のデイバイスに、幅 800px の画像を提供すると、より高画質な 400px の画像として表示してくれます。
Retinaディスプレイやモバイルデバイスのディスプレイは、デバイスピクセル比が 1 より大きくなっています。一方、普通のPCのディスプレイはデバイスピクセル比 1 です。

そして、指摘事項の文章のところにある「Learn more」リンク先を読むと説明されているのですが、1200 x 1600 の画像ファイルを1つ提供するよりは、「 picture タグ」や「img タグの srcset 属性」を使って、複数サイズの画像ファイルを提供可能な状態にしておくことが望ましいです(参考:レスポンシブ画像 – ウェブ開発を学ぶ | MDN)。デバイス毎に必要最低限な解像度(とサイズ)の画像ファイルをダウンロードすることができるからです。

3. まとめ

  • 画像ファイルは、表示サイズの2倍のサイズまで用意する。
  • pictureタグ」や「imgタグのsrcset 属性」を使い、複数のリソースを提供する。

4. 参考

📂-WebPerformance

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web Vitals

Bento (Web Components版) の読み込みパフォーマンスを検証しました

Bento (Web Components版) の読み込みパフォーマンスを検証しました。

Web Vitals

async script をより早く実行させる

async script をより早く実行させる方法を紹介します。

Web Vitals

Webページの高速化とSEOの関係

Webページの高速化とSEOの関係について書きます。

Web Vitals

PageSpeed Insightsによる「スクロール パフォーマンスを高める受動的なリスナーが使用されていません」について

PageSpeed Insights などで指摘される「スクロール パフォーマンスを高める受動的なリスナーが使用されていません」についてです。

Web Vitals

CLS対策:ページ上部にAdSense自動広告を表示させない

CLS対策:ページ上部にAdSense自動広告を表示させないようにしましょう。