The Two Limits of Our QR Code Maker: Module Scale Caps at 32 px, the Quiet Zone at 16 Modules
I work on OnePassApps, the team behind app.onepassapps.com. Our QR Code Maker draws a static code in your tab and hands back a PNG or an SVG. This post is about the three numbers that decide how big that file comes out, and about the two limits the panel applies without ever telling you they are there. I typed them in, read the panel back and checked the arithmetic outside the browser. You can try it on the QR Code Maker, or read what it does in the guide. The page's own opening line is "Make a static QR code for a link, text, Wi-Fi, contact, email, phone or SMS, then download it as PNG or SVG." The three numbers behind the file size The Appearance stage carries three inputs that feed the size of the exported image, and the Details block prints the result back as "PNG size" with both pixel dimensions. The rule the panel follows is: PNG size = (modules + 2 × quiet zone) × module scale The default case checks out. Version 2 is a 25 × 25 module code, the quiet zone ships at 4 modules and the module scale at 10 pixels, so (25 + 2 × 4) × 10 = 330, and the panel reads "330 × 330 px". Every other figure below comes from the same arithmetic. Limit one: the module scale stops at 32 pixels per module Type 999 into the field labelled "Module scale in pixels" and the field keeps 999. The panel still prints 1056 × 1056 px, and (25 + 2 × 4) × 32 = 1056, so the size readout follows from 32 pixels per module. That 32 is a ceiling, not a coincidence. With the quiet zone also pushed up and a version 3 code in play, the same 999 gives 1952 × 1952 px, and (29 + 2 × 16) × 32 = 1952. A different module count, the same 32. So the input box never warns you. You type a number, the field shows your number, and the ceiling shows up only in the size readout. Limit two: the quiet zone stops at 16 modules Type 99 into "Quiet zone in modules" and, at 10 pixels per module, the panel prints 570 × 570 px. (25 + 2 × 16) × 10 = 570, which is 16 modules of margin on each side. Zero is accepted too, and that one is worth reading before you use it. At 1 pixel per module with the quiet zone set to 0, the size readout says 29 × 29 px - the grid and nothing around it. The QR format (ISO/IEC 18004) asks for a four-module quiet zone, and the panel ships at 4. The contrast readout is live, and it names the fix The foreground ships at #111111 on a #ffffff background and the panel says "Contrast is 18.9:1, which suits scanners." Change the foreground to #ffe066 and the same line becomes "Contrast is 1.3:1, which is too low for most scanners. Darken the foreground or lighten the background." I recomputed both ratios outside the browser with the WCAG relative-luminance formula: 18.8831 for the default pair and 1.3039 for the yellow-on-white pair, which are the 18.9 and 1.3 the panel prints. The warning is the useful part, because it tells you which end of the pair to move. Error correction changes the version, not just the label With a 19-character address in the field, level M gives "Version 2 of 40 (25 × 25)", mask 1 and "19 bytes · 73% of 28 data bytes". Level H gives "Version 3 of 40 (29 × 29)", mask 3 and "19 bytes · 79% of 26 data bytes". Those percentages are not the payload share. 19 out of 28 is 67.9%, and 19 out of 26 is 73.1%. Add the byte-mode header - 4 bits of mode plus 8 bits of length, 1.5 bytes - and 20.5 out of 28 comes to 73.2% and 20.5 out of 26 to 78.8%, which round to the two figures the panel prints. The honest limits of these numbers Every size above is the panel's own PNG size readout. I did not download the PNG or the SVG this time, so I am not claiming byte counts for the exported files. The two inputs never show the clamp. Both still read the numbers I typed, so the ceiling is only visible in the size readout. The contrast ratio covers the two colours you picked. It does not know how the code will be printed, lit or displayed. The panel ends its own advice with: "Always test a printed or on-screen code with the phones and apps your audience uses." The stage heading under Appearance is the promise the rest of the panel keeps: "Nothing leaves this tab."
This is a summary aggregated from Dev.to. Read the complete article on the original site:
Read full article at Dev.to