MatthewCallis / retinize

Retinize will upscale (using nearest neighbor) images to look correctly on retina screens. This is particularly useful for pixel art when you don't want to store an upscaled version.

Retinize

Retinize will upscale (using nearest neighbor) images to look correctly on retina screens. This is particularly useful for pixel art when you don't want to store an upscaled version. Here's a demo.

Update 2016

The blurring issue has been mostly resolved with CSS now. The jQuery version remains the same, but this is only really needed if you need older browser support or just want use a canvas anyway so the class is canvas only.

Use the below:

canvas, img {
  image-rendering: optimizeSpeed;
  image-rendering: -o-crisp-edges;
  image-rendering: -moz-crisp-edges;
  image-rendering: optimize-contrast;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated; /* CSS4 */
  image-rendering: crisp-edges; /* CSS4 */
  -ms-interpolation-mode: nearest-neighbor; /* IE */
}

How to Use

Vanilla JavaScript

// Construct an instance of Retinize, passing the element
var el = document.querySelectorAll("img.pixelart");
var retinize  = new Retinize(el);

// Construct an instance of Retinize, passing the element
var el = document.querySelector("img#pixelart");
Retinize.convertToCanvas(el);

jQuery

To enable on all images with the class of 'retinize' simply call

$('img.retinize').retinize();

If you want to force the effect on all images regardless of need use

$('img.retinize').retinize({ forceCanvas: true });

All available settings

var options = {
  forceCanvas: false
};