Chromeで画像を縮小表示したとき、CSSで画像のぼやけを解消する方法｜DAD UNION – エンジニア同盟htmlページ上で実寸の画像サイズより縮小して表示させることがありますが、その際ブラウザのChromeで縮小画像が若干ぼやけてるときがあります。 Chromeブラウザにおいて画像を縮小表示したときに発生するぼやけをCSSを用いて解消する方法はいくつか存在します。 主な技術やアプローチをいくつか解説します。 image-rendering プロパティ まず基本的なものとして、CSSのimage-renderingプロパティを活用することで、ピクセルアートや低解像度の画像をスムーズにならず、鮮明に表示させることが可能です。 img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } ここで-webkit-optimize-contrastは、WebKitブラウザ（ChromeやSafari）
