A (cross-browser) CSS utility class for preserving pixels when scaling up images

_README.md

See Demo.

example.html

<h1>Resize images with CSS without blurring</h1>

<p>Using <code>image-rendering: pixelated;</code></p>

<p>See <a href="https://gist.github.com/renestalder/06c9a52a1cf0a5f2ff32" title="Go to Gist">Gist here</a> for more informations</a>

<h2>Test file</h2>

<img alt="X pixelart" src="https://dl.dropboxusercontent.com/u/569168/share/misc/x_pixelart.gif">

<h2>Resized</h2>

<img style="width: 100px; height: auto;" alt="X pixelart" src="https://dl.dropboxusercontent.com/u/569168/share/misc/x_pixelart.gif">

<h2>Resized with preserve pixel CSS attributes (may not work in all browsers)</h2>

<img style="width: 100px; height: auto; -ms-interpolation-mode: nearest-neighbor; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: pixelated;" alt="X pixelart" src="https://dl.dropboxusercontent.com/u/569168/share/misc/x_pixelart.gif">

preserve-pixels.css

.u-preserve-pixels {

  /* IE */
  -ms-interpolation-mode: nearest-neighbor;

  /* Firefox */
  image-rendering: -moz-crisp-edges;

  /* Safari */
  image-rendering: -webkit-optimize-contrast;

  /* Chrome and Opera */
  image-rendering: pixelated;

}

x_pixelart.gif