Chrome(クロム)で画像がぼやける問題が発生したのでその解決法です。

問題点

レスポンシブサイトが主流の今、Retina対応や解像度の高い端末にあわせて大きめのサイズで画像を書き出すことがあると思います。
他ブラウザは大きな画像を縮小表示してもきれいにレンダリングしてくれますが、
Google Chrome(クロム)だけは癖があり、丁度２倍、３倍など縮小した時に小数点が出ちゃうサイズの画像をUPすると画像がぼやけてしまうのです。

例えば400×200pxの画像を200×100px表示にする場合はきれいに表示されるが300×66,666…となるようなそれ以外のサイズはNGとなります。

レスポンシブで固定値って無理じゃね…

困るーー！

１行で解決！

ぼんやり画像にショックを受けなくても大丈夫です。CSSに1行追加するだけで解決します。
画像全体にimage-rendering: -webkit-optimize-contrast;を追加するだけで解決します。

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

以下の方法もありますがこちらは画像にスタイル指定があると動作しないので上の方法が良いと思います。

画像全体にタグを追加しておけば気にせずにコーディングを進めることができますよ！