Web tan tan !

中小企業のぼっちWeb担のブログ

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の指定なし

image-renderingの指定あり

image-renderingの指定あり

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

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

【image-rendering】のオンオフを切り替える

Related

ネットで見つけた画像を無断で使うと著作権の侵害になるの?

上司から「この画像を使って欲しい」と渡された画像がネットで拾ってきた画像だったらどうすればいい?ネットで拾った画像を無断で使うとどうなる?

パンくずリストの問題を検出。項目「itemListElement」がありません

パンくずリストの問題を検出。項目「itemListElement」がありません

Search Consoleから”パンくずリストの問題が新たに検出されました”というメールが送られてきました。「なんのこと?」と思いつつエラーの修正作業を行いました。

CSSの【font-feature-settings】で文字詰めができる!Webのテキストをもっと読みやすく。

font-feature-settingsで文字詰めができる!Webのテキストを読みやすく。

CSSのプロパティ”font-feature-settings”を使用すると自動的にカーニング(文字詰め)をしてくれます。今までは、画像化したテキストで対応していましたが、これでずいぶん楽になりそうです。

うっかり!?サーバーの更新期限が過ぎてしまったらどうすればいい?

サーバーの更新期限が過ぎてしまったらどうすればいい?その対処方法と、そんなトラブルを未然に防ぐためにできることをまとめました。