do your pixels justice

Feb 16, 2020
1 minute to read

This is a quick one. A small CSS rule that will come in super handy when you need to blow up a pixel image (QR code is an excellent example of this) or you don’t know in what size it’ll be displayed.

image-rendering: pixelated;

This is a QR code in its original size (note how small we can keep the images with this technique!)

A small QR code, sharp quality

And now this is the same image scaled up (both are full-width, so make sure to stretch out your browser to see how the effect scales), but the second image has image-rendering set to pixelated.

A very large QR code, with blurry quality

Now that’s better 👇

A very large QR code, but still with sharp quality thanks to the pixelated CSS property