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 image-rendering and the value pixelated are 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.

An excerpt from image-rendering: pixelated

View original article

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.