This is the multi-page printable view of this section. Click here to print.
Miscellaneous / Unsorted
1 - Icons for Hugo/Docsy/Bootstrap
Bootstrap Icons
FontAwesome Icons
SVG Code Optimizer
SVG to Font Converter
SVG URL Encoder
2 - QR Code Optimization
Using QR Codes for URLs?
Most likely, you are doing it wrong there is room for improvement…
QR Codes are encoded in different sizes, called versions in the standard. The smallest ones are 21x21 pixels (version 1), the largest ones are 177x177 pixels (version 40). More information regarding the standard can be found on QRcode.com , or in Thonky’s QR Code Tutorial
Obviously, you want to use the lowest version possible: It occupies less of the surface, and scanning is more reliable.
The version used depends on the data being encoded, the encodings used, as well as the error correction level. The error correctlion level can be set to the Level L (7%) to save some bits. But it gets more complicated regarding the actual data and encodings.
As an example, let’s create a QR code for this URL:
https://j3w5.de/kb/misc/qr-codes/
Despite this not being an exordinary long url, the resulting QR code still uses quite some pixels (29x29 pixels, version 3):
URL Shortening
This is one of the reasons to use URL shortening . There are services like Bitly , but it’s also possible to setup an own forwarding, and thereby avoid data protection implications (EU-GDPR).
For this example case, I’ve simply created an .htaccess file in the root directory of the site, with the following content:
<IfModule mod_rewrite.c>
RewriteEngine On
Redirect /QRCD /kb/misc/qr-codes/
</IfModule>
This configuration instructs the webserver to forward the path /QRCD to /kb/misc/qr-codes/.
I’ve kept the short path /QRCD in uppercase for a reason, I will get to that below.
This is the new, shortened URL:
Now that we use a shortened url, the resulting QR code uses less pixel (25x25 pixels, version 2):
However, there is still room for improvement ;-)
QR Code Data Encoding
In addition to the Byte Mode encoding, the standard defines special encoding modes for Numeric, Alphanumeric and Kanji data, that use less bits per character than the Byte Mode.
The numeric encoding uses 10 bits for 3 digits (instead of 24 bits), the alphanumeric one uses 11 bits for 2 chars (instead of 16 bits). That could safe quiet a lot of bits for an encoded URL!
Unfortunately the Alphanumeric encoding does not support lowercase characters. But we do need lowercase character, at least for the URL protocol scheme.
One should always include the https:// (or http://, if encryption is really not required) prefix in the encoded URL, otherwise most QR code scanners won’t automatically open it in a browser. I’ve tested HTTPS:// and HTTP:// in uppercase, those were NOT recognized. So, the scheme has to be represented in lowercase.
But contrary to popular belief, URLs are not fully case sensitive. The domain part is definitely case-insensitive in the standard, and may be represented in uppercase without any negative effect. And the interpretation of the path of the URL is up to the actual webserver. So this is technically exactly the same short URL like the one above (only the domain has been changed to uppercase):
As QR codes support mixed encodings within a single instance, it’s possible to encode the scheme part of an URL using the Byte encoding, and the domain and path parts using the Alphanumeric encoding:
As long as the length of the URL does not exceed 20 characters, it’s finally possible to crunch the URL into a 21x21 pixel code, version 1:
This one needs about half of the surface area, compared to the original one (version 3).
QR Code generators supporting mixed encodings
Most QR Code generators that I found do not optimize the encoding, resulting in codes with higher pixel counts. Those here seem to work correctly: