2022年07月26日(火)

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

• 0
• 9
• 3
• 14

レスポンシブ対応で大きなサイズで書き出した画像をCSSなどで縮小させてWebページ上に表示させた際に、Google Chromeでぼやけて表示されてしまうことがあります。

ぼやけた場合は画像に対して「-webkit-backface-visibility: hidden;」を指定する解消方法もありますが、これだけではうまくいかないことが多いです。

そんなGoogle Chromeで縮小表示した画像のぼやけを解消できるCSSの「image-rendering」プロパティを備忘録として紹介します。

「image-rendering」でぼやけを解消

Chromeで縮小表示した際のぼやけを解消するには、画像に対して「image-rendering」プロパティの「-webkit-optimize-contrast」を使用します。

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

image-rendering – CSS: カスケーディングスタイルシート | MDN

「image-rendering」は画像を拡大・縮小表示した際の描画方法を指定することができますが、画像によっては粗く見えづらくなる場合もあるので使用には注意が必要です。...