Scale of QR codes

tips & tricks
1

Many thanks to the developers @bep & @jmooring for adding QR codes in version 0.141.0. And of course for the shortcode that goes with it.

I found the Scale section of the documentation very interesting.

I’ll take this opportunity to give you a tip. If you want a large QR code on the screen, but a very light file, you can cleanly resize it using CSS.

With a code like this, it’s the smallest image for that content:

{{< qr text="https://gohugo.io" scale=2 level="low" class="qr" />}}

And now, the trick:

img.qr {
    image-rendering: pixelated; /* we like pixels! */
    width: 100%; /* to see the effect... */
    height: auto;
}

With pixelated, a png qr code enlarges very well.

6 Likes
2

Didn’t know about that one. Nice!

On screen this stuff is pretty easy, but where it can fall down is in print. We had a client a few years ago who printed thousands of full-color, glossy brochures with a QR code. Somebody decided it would look better if it were smaller with less margin. That was an expensive mistake.

3 Likes
3

One application for using this in print…

Place something like this in the footer:

{{ with images.QR .Permalink }}
  <img class="print-only"
    src="{{ .RelPermalink }}"
    width="{{ .Width }}"
    height="{{ .Height }}"
    alt="QR code linking to {{ $.Permalink }}"
  >
{{ end }}

Then add this to your CSS/Sass:

.print-only {
  display: none;
}

@media print {
  .print-only {
    display: block;
  }
}

When someone prints the page the QR code will be visible, linking back to the original page. Having said that, I think I’ve only printed 2 or 3 pages from the web in the last 12 months… but you never know.

3 Likes
4

Why not use SVG images?

5

On my site, I’ve added QR codes to the footer of each page, but not for print (the footer is non printed).

But I tell web users:

This QR code can be used to provide a direct link to this page in your printed matter.

1 Like
6

For a small QR code, an SVG file is several times heavier than a PNG.

And I think there’s a technical issue with Hugo, which doesn’t generate vector QR codes.

2 Likes
7
  1. We can use the images.Overlay filter to place a raster image on top of another raster image. We can’t do that with vector files.
  2. As @nfriedli pointed out, monochrome raster images like these are typically 3-10x smaller than SVGs. We’ve got black dots and white dots… single bit color. For a 100x100 image that’s 10,000 bits or 1250 bytes. And that’s before deflating, which reduces the file size another 30%-50%. And the author of the package we’re using, Russ Cox, wasn’t even optimizing for file size when he wrote the library… he was optimizing for speed.
5 Likes
8

Russ Cox is also the person who designed and implemented (other people have since contributed) the Go Modules system (which backs what we call Hugo Modules). There may be small details in that setup I don’t totally agree about, but it’s a pretty incredible engineering feat for one person. He interened at Google with Jeff Dean (the Chuck Norris of Google) during hist first summer break from college. That summer he implemented Google Code Search – Google recently closed down this index, but the code behind it is in use by others.