サイトの画像を高解像度ディスプレイに対応させてパフォーマンスを上げる

ブログをサイトのパフォーマンスをチェックするMeasure page qualityにかけたらBest PracticesのUser ExperienceのServes images with low resolutionの警告が出たから何なのかと調べて修正した。Serves images with low resolutionとは何か Measure page qualityのBest PracticesのUser ExperienceのServes images with low resolutionの警告表示

Measure page qualityのBest PracticesのUser ExperienceのServes images with low resolutionの警告表示

Best Practices｜Measure page quality｜Google Developers

画像を低解像度で配信しているのが良くない。

画像の原寸法は表示サイズと画像を最大に明瞭化するピクセル比へ成形されなくてはならない。

原文

Image natural dimensions should be proportional to the display size and the pixel ratio to maximize image clarity.

Best Practices｜Measure page quality（訳出）｜Google Developers

警告された画像のURLの右横に三つの項目がある。

Display size／表示されるサイズ

Actual size／実際のサイズ

Expected size／期待されるサイズ

低解像度が良くないというのは説明文の「最大に明瞭化するピクセル比」、項目の「期待されるサイズ」に適合してなくて画像に高解像度の画面に対応するだけの品質がない。iPhoneのRetinaディスプレイなどの通常の約二倍の画素／ピクセルを持つようなデバイスから見ると従来の画像が粗くなるから画質を上げる方がパフォーマンスに優れるわけだ。画像を高解像度ディスプレイに対応させるHTMLで画像のimgタグに通常と高解像度ディスプレイの二つの場合を振り分けて画像を表示するためのsrcset属性を追加したらMeasure page qualityのBest Practicesの警告が消えて点数も、九点、上がった。画像のsrcset属性のマークアップ例HTML<img src="基本の画像URL" srcset="通常の画像URL 1x, 高解像度ディスプレイの画像URL 2x">

参考サイト

解像度の切り替え: 同じサイズ、異なる解像度

画像のimgタグにsrcset属性を二つの場合に分けて追記する。通常の画像URLと高解像度ディスプレイのURLで、前者の後ろに「1x」と後者の後ろに「2x」というピクセル密度記述子（*x／ピクセル密度の単位：1xは暗黙の値として省略可能）を半角スペース（）を挟んで続けてそれぞれは半角コンマ（,）で区切って記載する。その他、幅記述子（*w／画像の横幅の単位）で画像を振り分ける場合はピクセル密度記述子を想定してマークアップできる。HTML<img src="基本の画像URL" srcset="モバイル向け通常の画像URL 640w, デスクトップ向けとモバイル向け高解像度ディスプレイの画像URL">

参考サイト

HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう

高解像度ディスプレイの場合、ブラウザは幅記述子を倍化して判定するので、二倍ならば実際の画面幅の二倍の画像をsrcset属性から選択して表示する。pictureタグのsourceタグでも同じことができるけれどもimgタグに使った方が「データ節約モードでは低解像度版を選択することができ、 media 条件を明示的に書かなくてもよくなります（<picture>: 画像要素）という利点があるから利便性などを下げないように注意したい。Measure page qualityのServes images with low resolutionの警告を消すには提案されるExpected size／期待されるサイズの画像を高解像度ディスプレイ用に設定すれば大丈夫だと思う。僕はブログの記事の著者のアイコン画像で警告が出たからピクセル密度記述子で高解像度ディスプレイのものを追加するだけだった。普通、大きな画面に大きな画像を用意するけれども小さな画面でも高解像度ディスプレイには大きな画像を使った方が良いのは確かなので、気付いてブログのパフォーマンスを上げられたのは嬉しい。