image-renderingでピクセルアートのキレイに表示する

ピクセルアート（ドット絵）やQRコードのような小さな画像を拡大表示するとアンチエイリアスによって輪郭がぼやけてしまう。

image-renderingで画像の拡大縮小時のアルゴリズムを指定することでアンチエイリアスを無効化できる。

.pixel-art {
  image-rendering: pixelated;
}

デモ

デフォルト

image-rendering: pixelated;