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

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

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

CSS記述例

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

<style>
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",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>

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

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

※流用される場合は自己責任でお願いします。
 タグ内のGoogleアナリティクスタグは流用しないで下さい。