This is a little reminder that there is a CSS property for helping control what happens to images as they scale up: image-rendering.
We’re quite used to the idea that scaling an image larger than its natural size (upscaling) causes it to be blurry. As awful as that is, it’s the browser doing the best it can to algorithmically smooth out an image over more pixels than it has data. But let’s say you’d really rather not it do that. Say the image is already pixel-y (pixel art), or you prefer the look of a pixelated upscaling.
You can do it!
img {
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
It’s a bit awkward in that the spec offers three values: auto
, pixelated
, and crisp-edges
. Both pixelated
and crisp-edges
, for pixel art, appear to do the same thing to me, although the spec talks about them slightly differently (pixelated
recommends the “nearest neighbor” or similar algorithm while crisp-edges
isn’t as specific).
Adding to the awkwardness, Chrome only supports pixelated
and Firefox only supports crisp-edges
, and for the deepest browser support, you gotta prefix it to -moz-crisp-edges
. Fortunately, you can smash them all together and it seems fine.
Here’s an example with and without, using an image from James T. I found on Tumblr:
See the Pen pixelated images by Chris Coyier (@chriscoyier) on CodePen.
That’s funny. This works on almost all browsers, and can be emulated in IE with -ms-interpolation-mode: nearest-neighbor, but it doesn’t work on Edge.
Apparently you can also use this on backgrounds and canvases. (Cellular automata, anyone?) Except, of course, on MS products.
Note that
image-rendering: pixelated
is already handled by Autoprefixer; the generated code is:If somebody notices an issue with this output, please file an issue on Autoprefixer’s GitHub repo.
Is this possible also with background images?
yes, apply to element
On the documentation says “This property applies to the element itself, as well as any images supplied in other properties for the element.” So i guess it does, but testing is the best way to know it
Now I wanna build a pixel art website with this. :D