[CSS] ブラウザによって縮小画像の画質が違う

Webサイトを作成していたときのこと。

サイズが250×180pxの画像を、画像ファイル側で縮小せずに、CSSで幅180pxに縮小して表示させてみたところ、非常にぼやけた画像になってしまいました。

しかし、別のPCで確認すると、ぼやけずにはっきりくっきり。

画像がぼやけたPCは、HDMI接続（デジタル）のモニタ。画像がくっきりのPCは、D-Sub接続（アナログ）のモニタ。モニタや接続方法の関係でぼやけるなら、むしろ後者のはずなのに。

ぼやける原因はブラウザでした

結局、原因はブラウザ。画像がぼやけたPCでは、Chromeで表示していました。画像がくっきりのPCでは、Firefoxでした。

試しに、250×180pxの画像をCSSでwidth:180px、height:autoにして、代表的なブラウザで表示してみました。

左から、Firefox、Chrome、Opera、Edge。見ての通り、Chromeだけがひどく劣化しているのです。

これが例えば、幅がピッタリ1/2、width:125pxにすると、Chromeでもキレイに表示されるので、ChromeではCSSで中途半端な縮小を行うと、画像がぼやけてしまうようです。

結論

だいぶ前から言われていることですが、画像を縮小して使う場合は、元画像の1/2や1/4などキレイに半分になる数値（例えば300pxだったら150pxや75pxなど）を指定するべき、ですね。