Available in Chrome 41+ | View on GitHub | Browse Samples
The original image is a 2x2 pixel PNG. Squint or zoom into this dot:
When you blow the image up in size (for example, to 100x100 pixels) without editing the original source image, the browser will apply anti-aliasing. Like so:
To instead use a nearest-neighbor interpolation resulting in sharper edges, add
image-rendering: pixelated to the image. This can be applied to image and canvas
elements, along with any images loaded via
background-image in CSS.