Responsive Web Design

image-rendering: pixelated

The new CSS property image-rendering allows you to choose an alternative mode of image scaling.

What does this mean?  Well Paul Kinlan does a great job of explaining this in the article itself but essentially it provides you with some more flexibility about the way an image looks when scaling. By default the browser tries to help us out by smoothing out raster images as they scale larger or smaller because raster images are effectively set to be an exact size (unlike vector images that look amazing at any size because they are set of instructions rather than a set of pixels).

Smooth scaling is most often a blessing, but sometimes we want to keep the blocky-ness of the image we are rendering on the screen. Pac-man for example should never be smoothed and should retain his blocky-ness. Another good example is when printing QR codes on the screen, they look blurry when the browser scales them when instead they should remain blocky.