Eine kostenlose Testkarte im Format 16:9 und 9:16 zur Erkennung von Fehlern beim Seitenverhältnis und beim Bildausschnitt bei OTT-Diensten

Jede OTT-Plattform birgt irgendwo denselben versteckten Fehler: ein Bild, das fast perfekt ist.

Ein Poster, das ein paar Prozent zu breit ist. Ein Hero-Banner, dessen Ränder auf dem Fernseher abgeschnitten sind. Ein Vorschaubild, das auf einem Laptop gut aussieht, auf einem Smartphone aber irgendwie nicht ganz stimmt. Niemand meldet das Problem, weil niemand genau sagen kann, was daran falsch ist – es sieht einfach nur ein bisschen seltsam aus.

Die Lösung ist nicht ein besseres Auge. Es ist ein Testbild, das nicht lügen kann.

Warum „sieht gut aus“ kein Test ist

Fehler im Seitenverhältnis bleiben unbemerkt, weil die Fotografie sie kaschiert. Dehnt man ein Landschaftsbild um vier Prozent, fällt das dem Betrachter nicht auf. Dehnt man hingegen ein Gesicht, ein Logo oder einen Kreis um vier Prozent, fällt das jedem auf.

Das ist der Sinn einer Testkarte. Man platziert Formen im Bildausschnitt, deren Richtigkeit auf den ersten Blick erkennbar ist, sodass eine fehlerhafte Darstellung sofort auffällt, anstatt verborgen zu bleiben.

Die Vodlix-Testkarte

Wir haben eines für unsere eigene Qualitätssicherung erstellt und verschenken es nun, denn jedes Streaming-Team braucht so etwas, und die meisten zeichnen am Freitagnachmittag am Ende etwas noch Schlechteres.

Alles darauf ist eine gezielte Falle für einen bestimmten Fehler:

• Ein Kreis, der in ein Quadrat eingeschrieben ist und die vier grünen Punkte berührt. Ein Kreis ist nur bei einem bestimmten Seitenverhältnis rund. Wenn man den Rahmen zusammenzieht, wird er zu einem Oval und entfernt sich von zwei der Punkte.

• Diagonalen im Winkel von genau 45 Grad. Jede ungleichmäßige Skalierung verändert den Winkel, und das gedruckte Etikett passt nicht mehr zu der Linie, auf die es zeigt.

• Ein Schachbrettmuster aus exakten Quadraten. Sobald sich das Seitenverhältnis ändert, werden aus den Quadraten Rechtecke.

• Eine feine Linie entlang der tatsächlichen Kante, Eckklammern an den Eckpixeln und vier EDGE-Beschriftungen. Fehlt eines dieser Elemente, wird der Rahmen beschnitten.

• Ein Maßstab von 0 bis 100 Prozent entlang aller vier Seiten. Wenn er nach 0 beginnt oder vor 100 endet, handelt es sich um einen Ausschnitt oder einen Zoom.

Kein Messen, kein Überlagern, keine Referenzdatei. Wenn der Kreis rund ist und man alle vier Kanten erkennen kann, ist das Rendering korrekt.

So sieht ein fehlerhafter Render tatsächlich aus

Hier ist dasselbe Bild in vier verschiedenen Zuständen. Nur das erste wird korrekt angezeigt.

Es lohnt sich, diese beiden Fehler voneinander zu unterscheiden, da sie unterschiedliche Ursachen haben und unterschiedlich behoben werden können.

Gezwängt oder gedehnt Das bedeutet, dass das Bild in einen Bereich mit falscher Form gezwängt wurde – entweder durch festgelegte Breite und Höhe im CSS oder durch einen Skalierungsmodus, der das Bild ausfüllt, anstatt es anzupassen. Der Kreis wird zu einem Oval.

Beschnitten oder vergrößert Das bedeutet, dass das Seitenverhältnis erhalten blieb, der Rahmen jedoch über seinen Container hinausragte. Beachten Sie, dass der Kreis im beschnittenen Beispiel perfekt rund bleibt. Das ist der Haken: Durch das Zuschneiden wird nichts verzerrt, sondern lediglich die Ränder werden unauffällig entfernt. Ohne Randmarkierungen würde man das nie bemerken.

Das Hochformat ist wichtiger als das Querformat

Das 16:9-Format hat sich in der Regel durchgesetzt, da alles darauf ausgelegt ist. Im Hochformat hingegen kommt es häufig zu Darstellungsfehlern – bei Reels, Shorts, mobilen Hero-Grafiken und Sperrbildschirmen von Smartphones. Daher ist die Karte auch im Format 9:16 erhältlich.

Ein 9:16-Bild, das im Füllskalierungsmodus in einen 16:9-Bereich eingefügt wird, verliert etwa ein Drittel seiner Höhe. Die Karte macht dies sofort deutlich, ohne dass eine Diskussion darüber entstehen muss.

Herunterladen

Kostenlos nutzbar, keine Quellenangabe erforderlich. PNG, exakte Pixelabmessungen, hell und dunkel:

• 16:9 Querformat, 1920 x 1080 – helle und dunkle Version

• 9:16 Hochformat, 1080 x 1920 – helle und dunkle Version

• Referenzblätter zu den Fehlerbildern für beide Seitenverhältnisse

16:9, helle Version (1920 × 1080) · 16:9, dunkle Version · 9:16, helle Version (1080 × 1920) · 9:16, dunkle Version

Verwenden Sie für den Test selbst lieber PNG als JPEG. Durch die JPEG-Komprimierung kann die zwei Pixel breite Haarlinie an der Kante so stark verwischt werden, dass sie bei kleinen Abmessungen nicht mehr zu erkennen ist – was dazu führen würde, dass Sie einem Schnittfehler nachjagen, der gar nicht vorhanden ist.

So verwenden Sie es richtig

• Leiten Sie es durch die eigentliche Pipeline, nicht auf einen Desktop. Laden Sie es als Bilddatei in einen Testtitel hoch, damit es Ihren Resizer, Ihre CDN-Transformationen und Ihr App-Layout durchläuft – genau dort liegt der Fehler.

• Laden Sie die App auf echte Geräte. Eine TV-App, ein Smartphone, ein Tablet und der Webplayer weisen jeweils unterschiedliche Fehler auf.

• Machen Sie ein Foto oder einen Screenshot vom Ergebnis und vergleichen Sie es mit der auf der Karte abgedruckten Checkliste.

• Behalten Sie den Testtitel bei. Er dient als permanenter Regressions-Canary – sobald jemand den Skalenmodus ändert, werden Sie dies sofort bemerken.

Warum uns das wichtig ist

Vodlix ist eine White-Label-OTT-Plattform, was bedeutet, dass jedes Bild darauf jemand anderem gehört – die Poster unserer Kunden, deren Markenzeichen, deren Vorschaubilder. Eine falsche Geometrie ist kein rein optisches Problem, sondern bedeutet, dass wir deren Bildmaterial beschädigen.

Die Karte ist also Teil unserer eigenen Qualitätssicherung. Wir veröffentlichen sie, da das Problem nicht nur bei uns auftritt.