Elk OTT-platform heeft ergens eenzelfde onopvallende fout: een afbeelding die bijna klopt.
Een poster die een paar procent te breed is. Een hero-banner waarvan de randen op een tv worden afgekapt. Een miniatuurafbeelding die er op een laptop prima uitziet, maar op een telefoon net niet helemaal klopt. Niemand dient een ticket in, omdat niemand precies kan aangeven wat er mis is – het ziet er gewoon een beetje vreemd uit.
De oplossing is niet een beter oog. Het is een testafbeelding die niet kan liegen.
Waarom ‘ziet er goed uit’ geen test is
Fouten in de beeldverhouding blijven onopgemerkt omdat ze door de fotografie worden verborgen. Als je een landschap met vier procent uitrekt, merkt de kijker daar niets van. Maar als je een gezicht, een logo of een cirkel met vier procent uitrekt, valt dat iedereen op.
Dat is precies het idee achter een testkaart. Je plaatst vormen in het beeld waarvan de juistheid voor zich spreekt, zodat een foutieve weergave meteen opvalt in plaats van verborgen te blijven.
De Vodlix-testkaart
We hebben er zelf een gemaakt voor onze eigen kwaliteitscontrole en we geven hem gratis weg, want elk streamingteam heeft hem nodig en de meesten eindigen er op vrijdagmiddag toch maar iets slordigs bij te tekenen.
Alles wat erop staat, is een opzettelijke valstrik voor een specifieke bug:
Een cirkel ingeschreven in een vierkant, die de vier groene punten raakt. Een cirkel is slechts bij één beeldverhouding rond. Als je het kader samendrukt, wordt het een ovaal en raakt het twee van de punten niet meer.
Diagonalen onder een hoek van precies 45 graden. Bij elke niet-uniforme schaalverandering verandert de hoek, waardoor het gedrukte label niet meer overeenkomt met de lijn waarnaar het wijst.
Een dambordpatroon van exacte vierkanten. Zodra de verhouding afwijkt, veranderen de vierkanten in rechthoeken.
Een dunne lijn langs de werkelijke rand, hoekhaakjes bij de hoekpixels en vier EDGE-labels. Als er ook maar één ontbreekt, wordt het kader bijgesneden.
Een schaalverdeling van 0 tot 100 procent langs alle vier de zijden. Als deze na 0 begint of vóór 100 eindigt, heb je te maken met een uitsnede of een zoom.
Geen metingen, geen overlay, geen referentiebestand. Als de cirkel rond is en je alle vier de randen kunt zien, is de weergave correct.
Hoe zo’n kapotte weergave er eigenlijk uitziet
Hier zie je dezelfde afbeelding in vier verschillende weergaven. Alleen de eerste wordt correct weergegeven.
Het is de moeite waard om deze twee storingen van elkaar te onderscheiden, omdat ze verschillende oorzaken hebben en op verschillende manieren kunnen worden verholpen.
Geplet of uitgerekt betekent dat het beeld in een vak met de verkeerde vorm is geperst – een vaste breedte en hoogte in CSS, of een schaalmodus waarbij het beeld wordt opgevuld in plaats van aangepast. De cirkel verandert in een ovaal.
Bijknippen of inzoomen Dit betekent dat de verhouding behouden is gebleven, maar dat het kader buiten de container is gekomen. Merk op dat de cirkel in het bijgesneden voorbeeld perfect rond blijft. Dat is de valkuil: bij het bijsnijden wordt er niets vervormd, maar worden de randen stilletjes verwijderd. Zonder randmarkeringen zou je het nooit opmerken.
Portret is belangrijker dan landschap
16:9 blijft meestal in gebruik, omdat alles daarop is afgestemd. Bij verticale formaten gaan afbeeldingen vaak mis – Reels, Shorts, hero-afbeeldingen voor mobiel, vergrendelingsschermen van telefoons. Daarom is de kaart ook verkrijgbaar in 9:16.
Een 9:16-afbeelding die in een 16:9-vak wordt geplaatst met de modus ‘fill scale’ verliest ongeveer een derde van zijn hoogte. De kaart maakt dat in een oogwenk duidelijk, zonder dat er discussie over hoeft te ontstaan.
Downloaden
Gratis te gebruiken, geen bronvermelding vereist. PNG, exacte pixelafmetingen, licht en donker:
16:9 liggend, 1920 x 1080 – licht en donker
9:16 staand formaat, 1080 x 1920 – licht en donker
Referentiebladen met storingsmodi voor beide verhoudingen
16:9-beeldverhouding (1920 x 1080) · 16:9 donker · 9:16 licht (1080 x 1920) · 9:16 donker
Gebruik voor de test zelf liever PNG dan JPEG. Door de JPEG-compressie kan de haarfijne rand van twee pixels zo vervaagd raken dat deze bij kleine afmetingen niet meer zichtbaar is, waardoor je op zoek zou gaan naar een bijsnijfout die er helemaal niet is.
Hoe gebruik je het op de juiste manier?
Laat het door de echte pijplijn lopen, niet op een desktop. Upload het als afbeelding naar een testtitel, zodat het door je resizer, je CDN-bewerkingen en de lay-out van je app gaat – daar zit de fout.
Laad de app op echte apparaten. Een tv-app, een telefoon, een tablet en de webplayer zullen elk op een andere manier fouten vertonen.
Maak een foto of een screenshot van het resultaat en vergelijk dit met de checklist die op de kaart staat afgedrukt.
Laat de testtitel staan. Deze fungeert als een permanente regressie-canary: zodra iemand de schaalmodus wijzigt, zie je dat meteen.
Waarom dit voor ons belangrijk is
Vodlix is een white-label OTT-platform, wat betekent dat alle afbeeldingen erop van iemand anders zijn: de posters van onze klanten, hun huisstijl, hun thumbnails. Als de afmetingen niet kloppen, is dat geen louter esthetisch probleem, maar beschadigen we daarmee hun beeldmateriaal.
Deze kaart maakt dus deel uit van onze eigen kwaliteitscontrole. We publiceren deze omdat het probleem niet alleen bij ons voorkomt.
