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](/_astro/qrcode.CkxOj56O_6OUYs.webp)
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](/_astro/qrcode.CkxOj56O_6OUYs.webp)
Now that’s better 👇
![A very large QR code, but still with sharp quality thanks to the pixelated CSS property](/_astro/qrcode.CkxOj56O_6OUYs.webp)