Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Retinize

Dependency Status devDependency Status

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
};

About

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.

Topics

Resources

License

Packages

No packages published