ブラウザで表示されている画像がぼやけていると感じた時に調べる3点

ブラウザでWebサイトを閲覧していると画像がぼやけたように表示されていることがある。その場合は以下の3点のうちのいずれかの可能性が高い。

可能性1 ズームが100%になっていない

ブラウザはWebサイトの表示倍率を変更することができる。画像がぼやけて見える場合、この表示倍率を100%よりも大きくしてしまっている可能性が考えられる。

変更した覚えがなくてもショートカットキーがCtrlキーと+の同時押しなどで、間違えて押してしまって表示倍率が変更されていることもある。

Ctrl + 0でズームを100%にすることができるためまずはこちらを実行して画面に変化がないか試してみる。

可能性2 デバイスピクセル比が異なる

デバイスピクセル比とは1pxをデバイス側では何ピクセルで表示させるかの比。iPhoneは2:1のため32px x 32pxの画像を<img width="32" height="32"のように指定して表示させる。

するとデバイス側の64px x 64pxの範囲で画像を表示させようとするのでぼやけて表示されてします。

現在のブラウザのデバイスピクセル比が1:1かどうかを調べるにはFirebugなどの開発ツールのコンソールでwindow.devicePixelRatioを入力して実行することで調べられる。

1が返ってきたら1:1。1.5などが返ってきたら1.5:1だ。(Windowsの環境によっては1.5が帰ってくることがある。)

可能性3 画像のサイズ指定が原寸よりも大きい

32px x 32pxの画像を<img width="64" height="64"のように指定すると元々の大きさの画像を伸ばして表示させるため画像がぼやけてしまう。

本来は原寸の大きさよりも大きいサイズを指定して使うことはしないため制作者側の指定ミスである可能性が高い。