Chromeで画像を縮小表示したときの画像のぼやけを解消する方法【CSS】｜DAD UNION

htmlページ上で実寸の画像サイズより縮小して表示させることがありますが、その際ブラウザのChromeで縮小画像が若干ぼやけてるときがあります。
その解消方法をご紹介します。cssの記述で解消されます。

Contents

Chromeで画像を縮小表示したときの画像のぼやけを解消するCSSの記述
ぼやける場合とぼやけない場合のimgタグsytleの記述
Chromeで画像を縮小表示したときの画像のぼやけを解消するデモページ

Chromeで画像を縮小表示したときの画像のぼやけを解消するCSSの記述

※ここは特に重要では無いので、必要に応じて書き換えてください。

<style>
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
}
h1{
  font-size:18px;
  line-height:1.6em;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
}
</style>

ぼやける場合とぼやけない場合のimgタグsytleの記述

※imgタグに「-webkit-backface-visibility: hidden」を指定すれば解消されます。
　「backface-visibility」は三次元要素の裏面を表示させたりする指定ですが、これを指定することによって画像のぼやけが解消します。

<h1>ぼやける画像とぼやけない画像を表示</h1>
<div align="center">以下、どちらの画像も幅400pxの画像を幅170pxで縮小表示してます。</div>
      <br>
      <br>
      <div align="center"><img src="img1.jpg" width="170" align="ぼやける画像イメージ"></div>
      <br>
      <br>
      <div align="center"><img src="img2.jpg" width="170" align="ぼやけない画像イメージ" style="-webkit-backface-visibility: hidden;"></div>

商品画像を掲載するページ等でぼやけが出ない様に細かいところに気をつかえると良いですね。