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.
Chrome 41 (Beta in January 2015) introduces a new CSS property
image-rendering: pixelated(Spec) that gives you a little more control over how the browser renders a scaled up image.The CSS property
An excerpt from image-rendering: pixelatedimage-renderingand the valuepixelatedare interesting because they turn off the browser’s standard smooth scaling (normally bi-linear interpolation) and replaces it with another scaling algorithm (nearest neighbor in most cases) when resizing the images.
