DEV Community

Cover image for How does a QR code work ?
Clément Gaudinière
Clément Gaudinière

Posted on

How does a QR code work ?

Hello everyone, as you have seen in the title, today we are going to go back to the origins of the QR code. Nowadays, QR codes are used all the time, they allow you to link something physical to something digital. For example, you can simply scan a QR code to access a link, rather than copying the whole link.
That's why it's important to understand how they work, and why not in a future article how to create one !

How long has it been around ?

Firstly, since when have qr codes existed ? They have been around longer than you might think, in fact they were invented in 1994 by the company Denso-Wave. They were used to track the transport of spare parts in Toyota factories. Denso Wave made the qr code free in 1999, but it was not really used until the rise of smartphones, about ten years later.

Principle

Now we will discuss the principle of qr code. To do this, we will use this qr code, which refers to the dev.to link :

dev.to qr code

To begin with, a qr code is made up of large white and black squares in three of its corners. These squares are called modules. Some of these modules must not be covered or modified, otherwise the code cannot be scanned. These are the position markers. They tell the scanner where the edges of the QR Code are. The modules are shown here with a red overlay :

dev.to qr code modul

Now we're going to take a slightly longer link and generate a qr code, so I've chosen to generate the qr code from youtube.com :

youtube.com qr code

One can notice inside this new qr code an alignment marker, in red in the image below :

youtube.com qr code alignment marker

It acts as a reference point for the scanner, ensuring that everything lines up correctly. On larger codes there are several reference points.

In this qr code, from the systemid.com website :

systemid.com qr code legende

Red stripes can be observed which are called timing patterns. They define the positioning of the rows and columns. In addition, the green sections indicate to the reader the format of the QR Code, whether it is a website, a text or other. Finally, the blue modules represent the version number, i.e. the more modules there are, the higher the version.Until v40 which represents 177 * 177 modules. Once all these modules are deconstructed we are left with the grey part :

systemid.com qr code grey part

The remaining modules are grouped in 8 groups, thus forming a byte. (A byte was composed of 8 bits).

Error correction

QR codes are practical, they are so fast that it sometimes takes less than a second to flash one, their secret ? They don't need to be scanned in full to be read. So if part of the code is damaged it doesn't matter, and the QR code can be read. But how does it do that ? The qr code has a self-correcting error system based on the Reed-Solomon code which is a so-called perfect code invented by mathematicians Irving S. Reed and Gustave Solomon. The fact that part of the code can be covered without preventing its correct reading allows us to make the Qr code more attractive by integrating graphic elements :

custom qr code

If you want to create your own qr code, I recommend the Unitag.io website, which allows you to manage many customization effects.

In a next tutorial, we will see how to create a QR code generator in javascript. I hope this tutorial has helped you understand the different processes behind QR codes, if you have any questions, feel free to ask me in the comments. 👍

Top comments (9)

Collapse
 
ayaanraj profile image
ayaanraj • Edited

It's awesome.
One question though, It's always a byte of data or more can be more

Collapse
 
clementgaudiniere profile image
Clément Gaudinière

Thanks, yes a qr code can contain several bytes.

Collapse
 
samuelnarciso28 profile image
Samuel Narciso

Dude!! It's an amazing post!!!

Collapse
 
clementgaudiniere profile image
Clément Gaudinière
Collapse
 
pandademic profile image
Pandademic

Thanks for the explanation!

Collapse
 
clementgaudiniere profile image
Clément Gaudinière • Edited

Glad I could be of help.

Collapse
 
trandinhhiep789 profile image
eltr

it's awesome and do you have any youtube channel?

Collapse
 
clementgaudiniere profile image
Clément Gaudinière

Thanks @trandinhhiep789 , and no, all my content is published on dev or on codepen.

Collapse
 
clementgaudiniere profile image
Clément Gaudinière

@babzbalaji Glad I could be of help.