do your pixels justice

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!)

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.

Now that’s better 👇