image-rendering: pixelated

15 November 2012

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


But one day, the web will be awesome!


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:

You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!


  1. Gravatar


    17 July 2016

    Great tutorial, but not diplay the map, can someone pls help me out ?

  2. Gravatar

    Phil Did,

    06 December 2012

    PIXELATE: Supported browsers; None.
    no comment but one day....