Blowing up pixel art on the Web

If we take an image representing pixel art, for instance this 16×32 pixel Mario GIF:

Mario

and blow it up (e.g. by setting width: 160px on the image in CSS), the browsers’ default scaling algorithm (bilinear interpolation, I think) will not preserve the image’s pixels:

Mario

In order to retain the pixelated look, in a cross-browser fashion, we need to set these four CSS declarations on the image:

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

}

The result:

Mario with preserved pixels

What does the spec say?

Have you noticed that each browser engine uses a completely different keyword value (nearest-neighbor, crisp-edges, optimize-contrast, and pixelated) for this functionality? The CSS Image Values spec has recently been updated to consolidate this mess by standardizing image-rendering: pixelated. (There is also a crisp-edges value, but as the example in the spec demonstrates, this value does not necessarily preserve the original look of pixel art.)

What about Edge?

As you may have heard, Microsoft’s Edge browser/engine has started removing legacy -ms- prefixes and it looks like -ms-interpolation-mode: nearest-neighbor has stopped working. I have suggested image-rendering: pixelated for Edge on Microsoft’s feedback forum (UserVoice). Vote here!

comments powered by Disqus