対象: HTML・CSS(主にGoogle Chrome)
難易度: ★☆☆
所要時間: 約5分
元の画像サイズを縮小して表示すると、Google Chromeだけ他のブラウザより画像がぼやけて見える——という現象に遭遇したことはありませんか？これはChromeの縮小表示アルゴリズムが、画像の縦横比によっては綺麗に処理しきれないことがあるために起こります。バナーやロゴなど、くっきり見せたい画像で特に気になるポイントです。
画像を割り切れるサイズにする(根本対策)
ブラウザにリサイズさせなければ、そもそも発生しない問題です。表示サイズちょうどの等倍画像を用意するのが理想ですが、高解像度ディスプレイ対応で2倍・3倍の画像を使う場合は、表示サイズの整数倍になるようサイズを揃えましょう。
例えば表示サイズが150×300pxなら、画像は150×300px(等倍)、300×600px(2倍)、450×900px(3倍)のように、割り切れる数値にします。横幅・縦幅が小数点を含むサイズになっていると、ブラウザ側の縮小処理でぼやけが発生しやすくなります。
ただし、高解像度用の画像をむやみに大きくしすぎると読み込みが重くなるため、srcset属性やpictureタグでディスプレイに応じて画像を出し分ける方法も合わせて検討するのがおすすめです。
CSSのbackface-visibilityで解決する(応急処置)
画像の準備を変えられない場合は、該当のimg要素にbackface-visibility: hidden;を指定するだけで改善することがあります。ブラウザがその要素をGPU描画のレイヤーとして扱うようになり、結果的に縮小表示の処理がきれいになる、という副次的な効果です。
img {
backface-visibility: hidden;
}この方法は、本来は「要素の裏面を隠す」ための3D変形用プロパティを流用した副作用的な回避策のため、画像やブラウザのバージョンによっては効果が薄いことがあります。根本的な解決にはならないため、まずは画像サイズを見直す方法を優先し、それでも気になる場合の応急処置として試してください。
まとめ
- Chromeでの画像ぼやけは、表示サイズが画像サイズの整数倍になっていないことが主な原因
- 根本対策は、表示サイズの等倍・2倍・3倍など割り切れるサイズの画像を用意すること
- 画像を変更できない場合は
backface-visibility: hidden;で改善することがあるが、効果は環境依存の応急処置
同じ問題に長らく悩んでおり、こちらの「styleで解決する」方法に救われました！
貴重な情報を公開してくださって、本当に本当にありがとうございます…！！
ただただ感謝です。