Pixelated Image Rendering Sample

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.

Live Output

CSS Snippet

.pixelated {
  image-rendering: pixelated;
}