Chromeで縮小表示した画像のぼやけをCSSで解消する方法｜BLACKFLAG

レスポンシブ対応で大きなサイズで書き出した画像をCSSなどで縮小させてWebページ上に表示させた際に、Google Chromeで表示がぼやけることがあります。 ぼやけてしまった場合は画像に対して「-webkit-backface-visibility: hidden;」を指定する解消方法もありますが、これだけではうまくいかないことが多いです。 そんなGoogle Chromeで縮小表示した際に発生する画像がぼやける現象を解消できるCSSの「image-rendering」プロパティを備忘録として紹介します。 「image-rendering」でぼやけを解消 Chromeで縮小表示した際のぼやけを解消するには、画像に対して「image-rendering」プロパティの「-webkit-optimize-contrast」を使用します。 img { image-rendering: -web