The CSS Image Values Spec

I started looking at the CSS Image Values Specification recently and was fascinated by it, particularly the image rendering section.

Say you take a small image sprite, like one that you would use in a video game:

Now, when you decide to blow this picture up, something happens that’s not totally unexpected.

It’s all blurry and gross. As we expect.

But, there’s a better way to deal with it. Add the following into your CSS:

.image-class {

  /* Firefox */
  image-rendering: -moz-crisp-edges;

  /* Safari */
  image-rendering: -webkit-optimize-contrast;

  /* IE */
  -ms-interpolation-mode: nearest-neighbor;

  /* Everything Else */
  image-rendering: pixelated;

}

Yes, it’s a lot for one effect, but hey. It’s cross-browser.

Now check out your glorious image!

Whoa! Beautiful! So let’s dig into this. Why are there SO many different values? Well, put simply, each browser just hasn’t hit standard yet. But, it’s coming. The CSS Image Values spec is still being constantly updated and reviewed. It only just recently consolidated all of these values (crisp-edges, optimize-contrast, nearest-neighbor, and pixelated) by officially standardizing image-rendering to have either pixelated, crisp-edges, or auto as its values. As you can see in the example on the spec website, auto and crisp-edges have their own uses, but pixelated is best for this pixel art example.

One thing that will be interesting to look out for moving forward is the Microsoft Edge browser. They’re slowly phasing out all of the -ms prefixes, so I’m personally curious to see it they’re going to use the standard and use image-rendering: pixelated or if they’re going to stick to the nearest-neighbor idea. Only time will tell.

Enjoy making giant pixelated images, until next time!