Google Chromeだけ画像がボケる時にCSSで解消する方法

ブラウザGoogle Chromeで画像を縮小して表示すると画像がボケた様に見えてしまいます。
IEやfirefoxやsafariで確認しても問題ありません。
jpgがダメなのかと思い、pngに変えてみても効果なしです。
それではCSSを設定してGoogle Chromeだけで画像がボケてしまう現象を解消しましょう。

Chromeで画像を縮小すると画像がボケてしまう

Google Chromeで画像がボケてしまう現象が起こるのは、画像を縮小表示した時です。
例えば、横1000pxの画像をCSS等で強制的に500pxで表示したとします。
スマホも考えたレスポンシブデザインが必須の今ではよくある事です。

この様に画像がボケてしまうのはGoogle Chromeだけで、他のブラウザは問題ありません。
このボケてしまう現象をCSSで解消しましょう。

画像にCSS「image-rendering」を設定しましょう

Google Chromeで画像がボケてしまう現象を解消するには画像にCSSで「image-rendering」を設定しましょう。
image-renderingプロパティは、画像が拡大・縮小された時の描写方法を指定する際に使用するCSSプロパティです。

設置する画像の元サイズ

  • 横幅800pxの画像

この画像をCSSで横幅300pxに縮小します。

CSSの設定

imgに「image-rendering: -webkit-optimize-contrast;」を追加する事で、chromeでの画像ボケ表示を解消します。

比較結果

Firefoxと比べても差が解らない程、画像のボケが無くなりました。

別のCSSでも対応可能?

「image-rendering」以外でも「backface-visibility」プロパティにhiddenを設定するとimage-renderingと同じ様にGoogle Chromeで画像がボケは解消できます。
ですが、「backface-visibility」プロパティはpaddingやborderなどのCSSを設定すると設定が解除されてしまう現象が起きます。
同時使用すると解除されてしまうのであれば、「image-rendering」を使用した方が良いですね。

backface-visibilityが効く場合

backface-visibilityが効かない場合

paddingだけでもborderだけでもbackface-visibilityは解除されてしまう様です。
ちなみにpaddingは数値を変えてもボケたままでした。
でもmarginでは解除されませんでした。

まとめ

Google Chromeはとっても使いやすいブラウザなのですが、画像のボケにずーっと悩まされてきました。
Chromeだけではありますが、Chromeは今最も使用されているブラウザですので対応は必須かもしれませんね。
CSSで解消できる様になったのは嬉しいです^^

CSSコーディングのオススメ本

CSS辞典 第5版 [CSS2/3/4対応]

本書は、Webデザインに必須の技術「CSS」の文法リファレンスです。大幅改訂となる第5版は、現時点の最新状況を反映し、Web制作を学ぶなら必ず押さえておきたい基本のCSS2.1、仕様の策定とブラウザでの実装が進められているCSS3、さらにはその次の規格であるCSS4(Level4モジュール)まで掲載しています。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ

予測しやすい、保守しやすい、最利用しやすい、拡張しやすい―コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説!

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

知識ゼロから体系的に学べる!HTMLとCSSの基本。最新の技術に対応!レスポンシブ、Flexbox、CSSグリッド。手を動かしながら学べる!プロの現場で役立つテクニック。コードの知識からデザインのことまで1冊ですべて学べる!

初心者からちゃんとしたプロになる HTML+CSS標準入門

HTML&CSSの使い方が全部わかる。プロを目指すなら、最初に選ぶ本!