Dual-Pass Error Diffusion for Scannable Dithered Image QR Codes
A novel QR generation method uses dual-pass Floyd-Steinberg error diffusion to merge 1-bit dithered photos directly with QR data modules. By pre-masking required data bits and diffusing error across surrounding pixels, the algorithm preserves image contrast while keeping finder patterns valid.
Impact: Medium
Why it matters
You can generate custom high-aesthetic branded QR codes programmatically without relying on heavy AI diffusion pipelines or sacrificing scan reliability.
TL;DR
- 01Dual-pass Floyd-Steinberg dithering isolates payload bits and diffuses quantization errors before thresholding.
- 02Sub-dividing QR modules into 3x3 grids isolates data bits while preserving 8 sub-pixels for image midtones.
- 03Disabling image interpolation with CSS pixelated rendering prevents camera scanner read failures on small displays.
Key facts
- Sub-pixel Grid Layout
- 3x3 sub-grid per QR data module
- Color Depth
- 1-bit monochrome
- Max Quantization Error
- Up to 95% diffused on inverted data modules
- Resolution Example
- 147x147 pixels
Architecture of Dithered QR Modules
QR codes consist of mandatory finder patterns and modified data modules. In this implementation, each module pixel is represented as a 3x3 sub-grid where the center sub-pixel encodes the payload data and the outer eight sub-pixels render the image. Standard single-pass thresholding yields noticeable salt-and-pepper noise due to random data bits.
Dual-Pass Error Diffusion Algorithm
To eliminate visual noise, the generator runs two separate error diffusion steps:
1. Data Masking Pass: Pre-assigns center sub-pixels to required data values. Calculates quantization error against the source image (up to 95% error for inverted pixels) and diffuses this error across the surrounding eight sub-pixels. 2. Image Dithering Pass: Executes standard Floyd-Steinberg error diffusion across remaining image pixels to maintain local luminance balance.
Scannability Trade-offs and CSS Formatting
When deploying dithered QR codes, preserve quiet zone margins matching the opposite color of the outer finder patterns. Disable browser image smoothing via image-rendering: pixelated in CSS to prevent blurred pixel edges from degrading scanner capture.
Try it in 2 minutes
img.qr-dithered {
image-rendering: pixelated;
image-rendering: crisp-edges;
}css
✓ When to use
- When generating stylized, branded QR codes for high-resolution digital displays or large posters.
- When wanting custom QR art without running resource-heavy Stable Diffusion controlnet pipelines.
✕ When NOT to use
- When printing small QR codes on physical flyers or materials subject to crumpling.
- When target scan environments suffer from extreme low light or potato phone cameras.
What to do today
- Apply image-rendering: pixelated to inline SVG or canvas elements rendering dithered QR codes.
- Enforce standard quiet zones around dithered QR outputs to avoid edge finder pattern detection drops.
- Test custom dithered QR codes on low-end smartphone cameras under poor ambient lighting before print production.
What the community says
“These are also very cool: https://antfu.me/posts/ai-qrcode Diffusion image generation constrained to also be a valid QR code”
“QR codes were made to be robust in the face of errors, but over time this has been eaten into for aesthetic purposes.”
Sources