image-rendering: pixelated

A very insignificant addition to the CSS specs is the new image-rendering property. It defines how scaled images should be handled by the browser.

There are three values available:
"auto" : This is the default value. This scales the image with an algorithm that optimizes the image.
"crisp-edges" : This value optimizes the scaling for pixel-based images like pixel art and such.
"pixelated" : This value just enlarges the pixels. If you multiple the image size, it doubles the every pixel in the image.

So, what about the pixelated value?

Well, if you look at the background image of a site like fronteers.nl you'll see a pixelated image. If you'd create a very small image and let the browser upscale it. But if you do that, the browser will try to optimize the image and it will be one blurry mess.

If you'd use the "pixelated" value, the effect will be as desired. The pixels will be upscaled and the image will be pixelated as you'd expect.

Why is this so great?

If this pixelated effect suits your design, you can create beautifull fullscreen background images without all the load. A high resolution background image can easily be over 1mb in size. If you'd use a 100x100 image and stretch it to fit the window, it will be just a few kb's. Ideal for mobile solutions and websites that should load very quickly.

Supported browsers

None.

But one day, the web will be awesome!

crisp-edges

The "crisp-edges" value looks like "pixelated" and ís available in some browsers already. This is an example of an upscaled image of the lego logo in Opera. Top image is default upscaling algorythm, the second one is the "crisp-edges" edition: