Google Chromeで画像を縮小表示すると画質が荒れる現象の対処方法

Web担当のうたまるです。どーもです。

レスポンシブでサイトを作ったときに、大きいサイズで書き出した画像を縮小表示させることがよくあると思います。

しかし、縮小した画像がぼやけて見える現象にぶち当たったので、その時の解決方法を書きます。

原因：Google Chromeでは縮小画像がぼやけることがある

他のブラウザはそこまで画質が悪くなることはなかったのですが、この現象はGoogle Chromeで起こりました。

調べてみたら、どうやらこれはGoogle Chromeの癖のようです。画像サイズを2倍、4倍といった割り切れる倍率で縮小させるのであれば、ぼやけずに表示されるのですが、割り切れないpx数が出るとこのような現象が起こるようです。

解決方法：CSSでimage-renderingを指定する

解決方法はCSSに【image-rendering】を指定すると解消できます。これだけです。

img { 
  image-rendering: -webkit-optimize-contrast;
}

実際にこのサイトにも指定してみた

このサイトに使っている720px×446pxのサムネイル画像を、縮小表示した時のキャプチャが下記の画像です。【image-rendering】指定のあり、なしを比較してみました。

指定なしの画像は文字の部分がぼやけているのが分かります。

image-renderingの指定なし

image-renderingの指定あり

お暇なら実際のサイトでも試してみてください

PCのGoogle Chromeでこのページを開いて横幅を狭めてください。そして、デベロッパーツールで【image-rendering】のオンオフを切り替えると、画像のぼやけ具合の違いが分かります。