Ogni piattaforma OTT nasconde da qualche parte lo stesso bug silenzioso: un'immagine che sembra quasi perfetta.
Un poster che è troppo largo di qualche punto percentuale. Un banner principale i cui bordi risultano tagliati sullo schermo della TV. Una miniatura che sembra a posto su un portatile ma leggermente storta su uno smartphone. Nessuno apre un ticket, perché nessuno riesce a individuare con precisione cosa non va: sembra semplicemente un po’ storto.
La soluzione non sta in un occhio più acuto. Sta in un’immagine di prova che non può mentire.
Perché dire "sembra a posto" non è un test
I difetti legati alle proporzioni passano inosservati perché la fotografia li nasconde. Se si allunga un paesaggio del quattro per cento, chi guarda non se ne accorge. Se invece si allunga un volto, un logo o un cerchio del quattro per cento, tutti se ne accorgono.
È proprio questo il principio alla base di una scheda di prova. Si inseriscono nell’inquadratura delle forme la cui correttezza è evidente, in modo che un rendering errato si riveli immediatamente invece di passare inosservato.
La scheda di prova Vodlix
Ne abbiamo creato uno per il nostro controllo qualità e lo mettiamo a disposizione gratuitamente, perché ogni team che si occupa di streaming ne ha bisogno e la maggior parte finisce per disegnare qualcosa di ancora peggiore il venerdì pomeriggio.
Tutto ciò che contiene è una trappola studiata appositamente per un bug specifico:
Un cerchio inscritto in un quadrato, che tocca i quattro punti verdi. Un cerchio è perfettamente rotondo solo con un determinato rapporto di aspetto. Se si restringe la cornice, diventa un ovale e si allontana da due dei punti.
Diagonali a 45 gradi esatti. Qualsiasi variazione non uniforme della scala modifica l'angolo e l'etichetta stampata non coincide più con la linea verso cui punta.
Una scacchiera di quadrati perfetti. I quadrati si trasformano in rettangoli non appena il rapporto cambia.
Una linea sottile lungo il bordo vero e proprio, parentesi angolari sui pixel agli angoli e quattro etichette EDGE. Se manca uno qualsiasi di questi elementi, la cornice viene tagliata.
Una scala da 0 a 100% lungo tutti e quattro i lati. Se inizia dopo lo 0 o finisce prima del 100, significa che si tratta di un ritaglio o di uno zoom.
Nessuna misurazione, nessuna sovrapposizione, nessun file di riferimento. Se il cerchio è rotondo e si riescono a distinguere tutti e quattro i bordi, il rendering è corretto.
Ecco come si presenta effettivamente un rendering difettoso
Ecco la stessa immagine in quattro versioni. Solo la prima viene visualizzata correttamente.
È importante distinguere questi due tipi di errore, poiché hanno cause diverse e richiedono soluzioni diverse.
Schiacciato o allungato significa che qualcosa ha costretto l'immagine a inserirsi in uno spazio dalla forma sbagliata: una larghezza e un'altezza fisse nei CSS, oppure una modalità di ridimensionamento che riempie lo spazio anziché adattarsi ad esso. Il cerchio si trasforma in un ovale.
Ritagliata o ingrandita significa che le proporzioni sono state mantenute, ma l'immagine è uscita dai bordi del contenitore. Si noti che, nell'esempio ritagliato, il cerchio rimane perfettamente rotondo. È proprio questa la trappola: il ritaglio non distorce nulla, si limita semplicemente a rimuovere i bordi senza dare nell'occhio. Senza gli indicatori dei bordi non te ne accorgeresti mai.
Il formato verticale è più importante di quello orizzontale
Il formato 16:9 di solito è quello che va per il verso giusto, perché tutto è progettato per esso. È nel formato verticale che le immagini si rompono: Reels, Shorts, immagini principali per dispositivi mobili, schermate di blocco dei telefoni. Quindi la scheda è disponibile anche nel formato 9:16.
Un elemento 9:16 inserito in uno spazio 16:9 con la modalità di riempimento a scala perde circa un terzo della sua altezza. La scheda lo rende evidente in un secondo, evitando qualsiasi discussione.
Scarica
Utilizzo gratuito, non è richiesta l'attribuzione. Formato PNG, dimensioni esatte in pixel, versione chiara e scura:
16:9 orizzontale, 1920 x 1080 - chiaro e scuro
9:16, formato verticale, 1080 x 1920 - chiaro e scuro
Schede di riferimento sulle modalità di guasto per entrambi i rapporti
Formato 16:9 (1920 x 1080) · 16:9 scuro · 9:16 luce (1080 x 1920) · 9:16 buio
Per il test vero e proprio, usa il formato PNG anziché JPEG. La compressione JPEG può attenuare la linea sottile di due pixel lungo il bordo al punto da farla sembrare assente alle dimensioni ridotte, il che ti porterebbe a cercare un errore di ritaglio che in realtà non esiste.
Come utilizzarlo correttamente
Inseriscilo nel flusso di lavoro effettivo, non sul desktop. Caricalo come grafica su un titolo di prova in modo che passi attraverso il tuo strumento di ridimensionamento, le trasformazioni del tuo CDN e il layout della tua app: è lì che si nasconde il bug.
Provala su dispositivi reali. Un’app per TV, uno smartphone, un tablet e il lettore web presenteranno ciascuno errori diversi.
Scatta una foto o fai uno screenshot del risultato e confrontalo con la lista di controllo stampata sulla scheda.
Lascia il titolo del test così com’è. Diventerà un “canary” permanente per il controllo delle regressioni: la prossima volta che qualcuno modificherà una modalità di scala, te ne accorgerai immediatamente.
Perché ci sta a cuore questa questione
Vodlix è una piattaforma OTT white label, il che significa che ogni immagine presente su di essa appartiene a qualcun altro: i poster dei nostri clienti, il loro marchio, le loro miniature. Un errore nella geometria non è un problema estetico, ma significa che stiamo danneggiando la loro grafica.
Quindi la scheda fa parte del nostro processo di controllo qualità. La pubblichiamo perché il problema non riguarda solo noi.
