HTML上でドット絵（pixel art）を拡大縮小すると残念なピクセルのボケが発生することがあります。
CSSのimage-renderingプロパティを利用すればこのピクセルボケ問題を解消できます。
まずはCodePenで実際に試してみたものをご覧ください。
小さな画像を大きく拡大しています。
See the Pen qoGrdM by Hibiki Kudo (@h_kudo) on CodePen.
image-renderingは画像を拡大または縮小したときにどのようなアルゴリズムで描画されるかを指定できるプロパティで、指定できる値は以下の３種類です。
autoデフォルト値です。画像を高品質で表示するアルゴリズムにより拡大/縮小されます。具体的には、バイリニア補完などの「滑らかな」色が許容されるアルゴリズムで拡大/縮小されます。これは、写真を想定しています。バージョン 1.9 (Firefox 3.0) から、Gecko は高品質な バイリニア (bilinear) リサンプリングを使用します。
crisp-edges画像は、画像内のコントラストとエッジを保つアルゴリズムにより拡大/縮小されます。これは、画像の処理過程で滑らかな色やぼかし効果が現れません。これは、ピクセルアートなどの画像を想定しています。
pixelated画像を拡大する時は、「最近傍 (nearest neighbor)」または類似のアルゴリズムが使用され、画像が大きなピクセルで構成されたように表示されます。縮小する時は、’
auto‘ と同じになります。
Chrome（v65）とFireFox（Quantum）ではcrisp-edgesは効きませんでした。そんなわけでしばらくは
image-rendering: pixelated;
を指定するのが実用的ですかね。
使い所は限定的ですがアイコン画像やQRコードの埋め込みをする際など大いに活躍してくれそうなCSSプロパティですね。
