Chrome画像ぼやける問題が解決　image-renderingプロパティ

レスポンシブ表示のため、ブラウザの幅に合わせて
画像を拡大縮小させる指定をすると
Chromeではどの大きさであっても画像がぼやけることが多く
特にイラストでそれがよくわかってしまうのが悩みでした

svgにすればいいのかもしれないけど
グラデーション使ってるしうまくいかない

backface-visibility: hidden;を使うと
ちょっとハッキリするところはあるけどやっぱりぼやける

ところがこれでやっといけました

image-rendering: crisp-edges;
image-rendering: -webkit-optimize-contrast;
/*↑Chrome用ベンダープレフィックス*/

image-rendering プロパティは
画像が拡大縮小されたときにどのように描画されるかを指定できるというもの

↓こちらを参考にさせていただきました

image-rendering:pixelated
→ドット単位で色を補完しくっきり表示（なのでちょっとカキカキした感じに）
image-rendering:crisp-edges
→ぼかしなどの処理をせず元画像のコントラストを保持（なめらかな感じ）

この image-rendering:crisp-edges
（Chrome用のベンダープレフィックスは
image-rendering: -webkit-optimize-contrast）を
指定するとハッキリ、でも線は綺麗に表示されました(=¯▽¯=)