title: How to stretch images with no antialiasing
body: <p>So I ran across this recently: <a href="http://www.nicalis.com/" rel="nofollow noreferrer">http://www.nicalis.com/</a></p>
  
  <p>And I was curious: Is there a way to do this sort of thing with smaller images? I mean, it's pixel art, and rather than using an image with each pixel quadrupled in size couldn't we stretch them with the code? So I started trying to make it happen.</p>
  
  <p>I tried CSS, Javascript, and even HTML, none of which worked. They all blur up really badly (like this: <a href="http://jsfiddle.net/nUVJt/2/" rel="nofollow noreferrer">http://jsfiddle.net/nUVJt/2/</a>), which brings me to my question: Can you stretch an image in-browser without any antialiasing?</p>
  
  <p>I'm open to any suggestions, whether it's using a canvas, jQuery, CSS3, or whatever.</p>
  
  <p>Thanks for the help!</p>
  
  <p><strong>EDIT:</strong> There's a better way to do this now! A slightly less hackish way! Here's the magic:</p>
  
  <pre><code>.pixelated {
      image-rendering: -moz-crisp-edges;
      image-rendering: -o-crisp-edges;
      image-rendering: -webkit-optimize-contrast;
      -ms-interpolation-mode: nearest-neighbor;
      image-rendering: pixelated;
  }
  </code></pre>
  
  <p>And that'll stop the anti-aliasing in all the modern browsers. It'll even work in IE7-8, but not in 9, and I don't know of any way of doing it in 9, unfortunately (aside from the canvas hack outlined below). 
  It's not even funny how much faster it is doing it this way than with JS. Here's more info on those: <a href="https://developer.mozilla.org/en-US/docs/CSS/Image-rendering" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/CSS/Image-rendering</a></p>
  
  <p><strong>EDIT2:</strong> Because this isn't an official spec yet, it's not very reliable. Chrome and FF both seem to have stopped supporting it since I wrote the above (according to <a href="http://vaughnroyko.com/state-of-nearest-neighbor-interpolation-in-canvas/" rel="nofollow noreferrer">this article</a> which was mentioned below), which is really annoying. We're probably going to have to wait a few more years before we really can start using this in CSS, which is really unfortunate.</p>
  
  <p><strong>FINAL EDIT:</strong> There is an official way to do this now! There's a new property called <code>image-rendering</code>. It's in the <a href="http://dev.w3.org/csswg/css-images-3/#the-image-rendering" rel="nofollow noreferrer">CSS3 spec</a>. Support is <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering#Browser_compatibility" rel="nofollow noreferrer">super spotty</a> right now, but <a href="https://www.chromestatus.com/feature/5118058116939776" rel="nofollow noreferrer">Chrome just added support</a> so before too long we’ll be able to just say <code>image-rendering: pixelated;</code> and it’ll work all the places (yaayy evergreen browsers!)</p>