QR codes without distortion

Posted on February 6th 2021 in CSS by Pim Debaere.

QR codes without distortion

Recently I came across a web page with a QR code. Unfortunately, the image was enlarged, causing distortion. However, there is a very simple trick to counter this.

Example

Below an example of such a QR code. I purposely saved it as a 50x50 pixel image and enlarged it on this page – so the bigger your screen, the better you'll see the distortion. If you would like to scan this QR code, especially with a device with a slightly inferior camera, you will have to have some patience or it may be that the scanning will not work at all. Makes sense, given that the image looks blurry.

Example of a scrambled QR code.
Fig. 1 – Example of a scrambled QR code.

image-rendering

This problem is easily solved with the help of CSS. The property image-rendering has the option to display an image pixalated. So, instead of just stretching the image, nearest-neighbor interpolation is used to keep the original pixelated style. Below you can see how this can be used.

1
2
3
.some-class {
  image-rendering: pixelated;
}
Fig. 2 – image-rendering in CSS.

As you can see below, after using this simple piece of CSS, the QR code is a lot brighter. Not only is it now easier to scan by (older) devices, it also looks a lot more professional.

Example of a QR code with image-rendering.
Fig. 3 – Example of a QR code with image-rendering.

It's definitely the same image – feel free to open both in a new tab or check the source code of this page if you're suspicious.