「不適切なアスペクト比の画像が表示されています」と言われる時

最終更新日:2022年11月07日公開日:2022年11月7日 2022年11月

PageSpeed Insights の結果の「おすすめの方法」の中で

「不適切なアスペクト比の画像が表示されています」

と言われる時．

img タグには正しい width height を指定しているのになぜか「アスペクト比」がダメだと言われる．

表示も別に崩れていないので「別にいいでしょ」と思う時に確認すべきこと．
私も最初どういう意味か分からなかった．

CSS でアスペクト比を保ったまま，サイズを小さく表示していたので，

「アスペクト比一緒やないか」

と心の中で思っていた．

ところがだ，開発者ツールで見たら割り切れない数字になっていた．

上の画像の場合，ほぼ2分の1なのだが，画像の縦横が奇数のため，割り切れない状態になっていた．
もしかして，しっかり割り切れる値になっていないとダメなの？と考えて，画像のサイズを偶数に変更して，CSS の数字もきっちり2分の1の数字にしてみると見事に警告されなくなった．

当初，

画像サイズは 27 x 375 で CSS では height を 200 (width は auto) と指定していた．

これを

画像サイズを 28 x 376 に変更し， CSS では height を 188 と変更した．

そうすると警告は出なくなった．
「そこまで気にしなくてはいけないの？」と思ったが，今までも気持ち悪いと言えば気持ち悪い状態ではあったので，これからは割り切れるように画像サイズを考えたほうがよいと思い直した．

実際の画像と違うサイズで表示をするときは整数で割り切れる縦幅(縦ピクセル)・横幅(横ピクセル)にする必要があるようだ．

ちなみにこれにより弊社サイトのトップページはオール100となった．

PageSpeed Insights 対策

PageSpeed Insights 対策の一覧．他の対策は以下を見てください．