CSS Tips: How to pixelate an image

The image-rendering property defines how the browser should render an image if it is scaled up or down from its original dimensions. By default, each browser will attempt to apply aliasing to this scaled image in order to prevent distortion, but this can sometimes be a problem if we want the image to preserve its original pixelated form.

img {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}