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.
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.
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.
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.