Rendering Pixel Art

A super simple one, but one I still see some people struggle with. Modern browsers make pixel art look blurry when scaled up. We can use the CSS image-rendering property to fix this.

No styling

With image-rendering: pixelated;

HTML

<img class="pixelated" src="image.png">

CSS (Minimum Compatibility)

Works on all major and modern browsers

img.pixelated {
    image-rendering: pixelated;
}

CSS (Maximum Compatibility)

Also works for older and more obscure browsers

img.pixelated {
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
}