Quanto grande può essere il logo su un codice QR? L'abbiamo misurato
"Correzione degli errori al 30%" non è un budget per il logo. Abbiamo fatto buchi sempre più grandi nei codici a ogni livello EC finché un decoder reale non ha rinunciato, e abbiamo registrato dove si è rotto.
Novità qui: La patch centrata più grande che un codice QR ha tollerato a ogni livello di correzione degli errori, misurata facendo un buco sempre più grande in un simbolo reale e decodificandolo con jsQR — 4% a L, 7% a M, 12% a Q, 17% a H — più due risultati che nessuno pubblica: il danno sparso rompe un codice al 4% dove un blob contiguo sopravvive al 17%, e la stessa patch su uno schema di ricerca lo rompe all'1%.
Ogni guida su come inserire un logo su un codice QR dice le stesse due cose: utilizza il livello di correzione degli errori H e ricorda che può recuperare il 30% del codice. La seconda metà è ripetuta così spesso che è diventata un brief di design — copri fino al 30% — e non è quello che il numero significa.
Siamo andati a misurare cosa significhi veramente.
# Cosa significa veramente “correzione degli errori al 30%”
Un codice QR non memorizza i tuoi dati come pixel di cui puoi perdere qualcuno. Memorizza parole di codice: blocchi di otto moduli, protetti dalla correzione degli errori Reed–Solomon. La cifra principale del livello H descrive approssimativamente quante di quelle parole di codice possono essere ricostruite — e parte di quella capacità è consumata dal sovraccarico della codifica stessa prima che tu tocchi nulla.
Due conseguenze che importano più del numero:
- Il danno viene conteggiato per parola di codice, non per modulo. Danneggiare un modulo distrugge l’intera parola di codice a cui appartiene.
- I modelli di ricerca, i modelli di temporizzazione e le informazioni di formato non sono coperti dalla correzione degli errori. È come il decodificatore trova il simbolo in primo luogo, e non c’è nulla da cui ricostruirli.
Quindi “30%” è un fatto sulla matematica e non un permesso sulla foto. Ecco il permesso.
# Il budget del logo misurato, per livello
Il metodo, così puoi eseguirlo di nuovo: codifica https://mqr.sh/AB12CD con l’encoder che MostlyQR spedisce (buildMatrix, che avvolge node-qrcode MIT), fissato alla versione del simbolo 3 (29 moduli) a ogni livello di correzione degli errori in modo che EC sia l’unica variabile. Renderizza a 8 pixel per modulo con la completa zona silenziosa di 4 moduli. Cancella un quadrato centrato, iniziando dall’1% dell’area del simbolo e crescendo dell’1% alla volta, e passa i pixel a jsQR 1.4.0 dopo ogni passaggio. Il numero registrato è l’ultima dimensione che ha decodificato prima del primo fallimento.
| Correzione degli errori | Più grande patch bianca centrata ancora decodificabile |
|---|---|
| L | 4% dell’area del simbolo |
| M | 7% |
| Q | 12% |
| H | 17% |
Il livello H vale approssimativamente quattro volte il livello L — una vera differenza, e il motivo per cui ogni guida ti dice di usarlo. È anche tutt’altro che il 30%.
Come regola pratica da questi numeri: al livello H, un logo centrato che occupa circa 15% dell’area del codice — un quadrato approssimativamente il 39% della larghezza del codice — è dentro il limite misurato con un po’ di margine. Il limite misurato al livello M è 7%, che è un quadrato di circa il 26% della larghezza, quindi riducilo allo stesso modo e scendi a circa un quinto.
Abbiamo rieseguito tutto questo a 16 pixel per modulo e abbiamo ottenuto risultati identici, che è il risultato atteso: questa è una proprietà del simbolo, non del rendering.
# Perché un blob è più conveniente dei coriandoli
Ecco il risultato che non ci aspettavamo, ed è quello che spiega perché i logo centrati funzionano affatto.
Invece di una patch contigua, abbiamo invertito singoli moduli di dati a caso attraverso il simbolo — lasciando intatti tutti i modelli di ricerca, temporizzazione e allineamento — e aumentato il tasso fino al fallimento della decodifica. Stesso payload, stessa versione, stesso decodificatore, cinque semi diversi:
| Correzione degli errori | Danno massimo sparso (mediana di 5 esecuzioni) |
|---|---|
| L | 1% di 567 moduli di dati |
| M | 3% |
| Q | 3% |
| H | 4% |
(Il simbolo v3 ha 841 moduli, di cui 567 trasportano dati; il resto sono modelli di ricerca, temporizzazione, allineamento e informazioni di formato, che questo test ha lasciato intatti.)
Il quattro percento sparso, rispetto al diciassette percento in un blob, allo stesso livello.
Il motivo è la parola di codice. Un quadrato contiguo del 17% distrugge un piccolo numero di parole di codice completamente. La stessa quantità di danno distribuita uniformemente distrugge una porzione di molte parole di codice — e una parola di codice con un modulo errato è esattamente altrettanto rovinata di una parola di codice con otto. La correzione degli errori conta i difetti, non il danno.
Che inverte l’istinto usuale. Una singola forma pulita in un posto è il modo più conveniente per utilizzare la tua correzione degli errori. Un pattern punteggiato, una trama, una filigrana semi-trasparente o un filtro fotografico su tutto il codice è il più costoso, anche quando sembra causare meno danno.
# I tre angoli che non devi coprire
Stesso test, stesso quadrato crescente, spostato in due altre posizioni:
| Posizione della patch | Punto di rottura livello H |
|---|---|
| centro | 17% |
| angolo in basso a destra (sopra il modello di allineamento) | 5% |
| angolo in alto a sinistra (sopra un modello di ricerca) | 1% |
Al livello L il caso dell’angolo superiore sinistro è fallito al primo passaggio — sotto l’1%.
Quegli angoli sono struttura, non contenuto. I tre grandi quadrati concentrici sono i modelli di ricerca, e quello più piccolo incastonato vicino al basso a destra è un modello di allineamento; tra di loro il decodificatore determina dove si trova il simbolo, quanto è grande e come è ruotato o distorto. Coprire uno e non c’è un passaggio di decodifica da raggiungere. Il livello di correzione degli errori non fa quasi nessuna differenza, perché la correzione degli errori non li stava mai proteggendo.
Questo è il motivo per cui il posto sicuro per un logo è il centro, e perché “basta renderlo più piccolo e metterlo in un angolo” è esattamente il contrario.
# Cosa aggiunge una fotocamera che questo test non ha
Tutto quanto sopra è pulito, sintetico, il caso migliore:
- Un decodificatore. jsQR è un buon decodificatore ampiamente utilizzato, ma lo stack della fotocamera di uno smartphone non è jsQR. I lettori reali variano nel grado di aggressività con cui tentano di decodificare un codice danneggiato.
- Pixel perfetti. Nessuna sfocatura, nessun riflesso, nessuna prospettiva, nessuna stampa. Ognuno di questi riduce il budget.
- Un foro bianco pulito. Un vero logo ha colore, bordi e antialiasing rispetto ai moduli sottostanti. La piastra bianca dietro un logo non è decorazione — è ciò che rende l’area coperta inequivocabile.
Considera la tabella come un limite superiore misurato in condizioni ideali, non come un obiettivo a cui progettare. Il nostro consiglio è di utilizzare circa due terzi di esso.
# Eseguilo tu stesso di nuovo
Ogni numero qui sopra è stampato da uno script piuttosto che digitato nell’articolo: draft/mostlyqr/seo/benchmarks/logo.js nel nostro repository. Renderizza il simbolo a ogni livello, ingrandisce ogni patch dell’1% alla volta, esegue il confronto dei danni sparsi su cinque semi, e riesegue tutto a una seconda scala di pixel. Sonda anche il nostro validatore per il limite citato alla fine di questo articolo.
# Cosa fare veramente
- Utilizza il livello di correzione degli errori H quando c’è un logo. Moltiplica approssimativamente il tuo budget per quattro, e costa circa quattro moduli extra per lato su un link breve — che è una decisione di dimensione che puoi calcolare piuttosto che indovinare.
- Mantieni il logo centrato, e mantenilo sotto circa il 15% dell’area del codice. Questo è un quadrato di circa il 39% della larghezza del codice, al livello H.
- Mettilo su una piastra solida, in modo che l’area coperta sia pulita piuttosto che ambigua.
- Non lasciare mai che nulla tocchi i tre quadrati d’angolo — né il logo, né una cornice, né un ritaglio con angoli arrotondati.
- Prova la stampa effettiva con un telefono vecchio. Ogni numero qui indica quali design valgono la pena testare. Solo il test dirà se funziona.
Se vuoi che l’immagine sia l’intero codice piuttosto che una patch nel mezzo di esso, è una tecnica diversa con un budget diverso — abbiamo misurato codici QR fotografici separatamente, e risulta che non utilizzano correzione degli errori affatto. E se vuoi semplicemente un codice con il tuo logo su di esso, il generatore di MostlyQR forza la correzione degli errori al livello H non appena viene aggiunto un logo, mantiene la zona silenziosa di 4 moduli, e predetermina il logo al 22% della larghezza del codice — 4,8% della sua area, comodamente entro tutto ciò che è stato misurato sopra.
Una nota sincera sul nostro codice, poiché stiamo pubblicando i numeri: la guardia che rifiuta un logo troppo grande utilizza la cifra nominale di recupero del 30% con una riduzione del 15%, quindi accetterà un logo che copre circa il 25% dell’area al livello H. La nostra misurazione dice che il vero limite è più vicino al 17%. Il default che nessuno cambia è sicuro con un ampio margine, ma il limite è più permissivo di quanto le prove supportino, ed è un bug nel nostro validatore piuttosto che una sottigliezza dei codici QR, ed è nella lista di correzione.
Domande frequenti
Un logo può coprire il 30% di un codice QR?
No. Il "30%" nel livello di correzione degli errori H si riferisce alle parole di codice — blocchi di otto moduli che Reed-Solomon può ricostruire — e parte di quel budget è già spesa sulla codifica stessa, non tenuta in riserva per te. Nel nostro test, il quadrato centrato più grande che potevamo cancellare da un codice di livello H e ancora decodificare era il 17% dell'area del simbolo. Al livello L era il 4%. Tratta il 30% come una descrizione della matematica, non come un budget di progettazione.
Quale livello di correzione degli errori devo usare per un codice QR con un logo?
H, se puoi permetterti la dimensione. Nella nostra misurazione ha più che quadruplicato la patch centrata tollerabile rispetto al livello L (17% contro 4%) al costo di quattro moduli extra per lato su un collegamento breve. L'unica avvertenza è che la correzione degli errori e una piccola dimensione stampata competono per lo stesso budget — un codice di livello H con un logo deve essere stampato più grande, non più piccolo.
Perché il mio codice QR smette di funzionare quando copro un angolo?
Perché gli angoli non sono dati. I tre grandi quadrati sono modelli di ricerca, il quadrato più piccolo vicino in basso a destra è un modello di allineamento, e entrambi sono come un lettore localizza e allinea il simbolo prima di decodificare qualsiasi cosa. Non sono protetti dalla correzione degli errori — non c'è niente da cui ricostruirli. Nel nostro test una patch su un finder ha rotto la decodifica all'1% dell'area del simbolo, contro il 17% nel mezzo.
Un logo su un codice QR ha bisogno di un bordo bianco?
In pratica sì, e i nostri numeri ne presuppongono uno. Abbiamo testato cancellando un quadrato, che è il miglior caso: un buco pulito, ad alto contrasto con bordi netti che il decoder può trattare come uniformemente leggero. Un logo lasciato direttamente sui moduli senza una piastra dietro produce moduli mezzo scuri ambigui intorno al suo bordo, che costano più della stessa area di bianco pulito.
- I codici QR fotografici funzionano davvero? I nostri risultati del test di decodificaUn codice QR che è una fotografia potrebbe sembrare che funzioni peggio. Abbiamo misurato il nostro con un decoder reale — sfocato, ridimensionato e letto come legge un lettore.
- Quanto piccolo può essere stampato un codice QR? Le dimensioni, calcolateNon esiste un'unica dimensione minima per un codice QR. Abbiamo eseguito cinque payload reali attraverso il nostro encoder per i conteggi dei moduli, quindi li abbiamo convertiti in millimetri.