The images above show Safari 5.2 with page zoom on at 300%, Firefox 11 at 200%, and Google Chrome Canary at 200% both default and with image-rendering altered, browsing Dribbble.

There are times you want to view something at actual pixels, regardless of your browser’s pixel ratio or your display’s pixel density. I went looking for something to turn off image interpolation in browsers and found the CSS image-rendering property on MDN.

Here is what it would look like in CSS to make sure only actual pixels are rendered in the viewport (It should be noted that this will only returns correct results when zoomed at whole multiples of the original image size.):

img.showPixels { image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; }

Versions 11+ of Firefox and Opera use -moz-crisp-edges and -o-crisp-edges respectively, while Safari 5.2+ uses the prefixed version: -webkit-optimize-contrast. The latest version of Google Chrome Canary seemed to recognize the property but does not return a crisp image.

My concern with incorrect image interpolation began the other day while testing a new MacBook Pro with Retina display. On this high-resolution machine, Safari renders everything in the viewport at -webkit-device-pixel-ratio: 2; by default. This means that even viewing standalone images results in a 200% zoom level, which does not let you see the actual pixels of the image, but instead a smoothed, interpolated result. For most use cases this is the correct thing to do. But sometimes it’s not.