Rendering pixel art in any browser

Created: Mon Dec 17 08:15:01 CET 2018

Last mod­i­fied: Fri Feb 1 01:58:25 CET 2019


I tried in­sert­ing some pixel art in a web page.

It looked fine on Firefox but blurry on Safari, be­cause of some kind of optimization that tends to blur pix­e­lated im­ages.

You can eas­ily dis­able this in any browser by adding the css be­low to your stylesheet.

img.pixel-art {
  image-rendering: crisp-edges;
  image-rendering: -moz-crisp-edges;
}

(The sec­ond one looks bet­ter on Safari.)

Firefox needs a pre­fix up to ver­sion 65. (See this re­lated article.) You would write -moz-crisp-edges. For ref­er­ence, I still need the pre­fix as of December 2018 us­ing the de­fault ver­sion of Firefox shipped with Ubuntu 18.10.

source code