MOV in WebP umwandeln

Öffentliche Stellen in Deutschland sind über die BITV inzwischen verpflichtet, ihre Websites barrierefrei zu gestalten, und dazu gehört auch, dass ein Video nicht als schwarzes Rechteck startet, bevor irgendjemand geklickt hat. Ein Vorschaubild vor dem Video ist dabei kein Detail, sondern das, was jede Besucherin sieht, während die Datei lädt, was ein Screenreader beschreiben kann, und was bei deaktiviertem Autoplay das Einzige bleibt, was ankommt.

Diese Seite zieht genau dieses Bild aus dem eigenen MOV — demselben Video, das gleich darunter oder daneben eingebettet wird —, sodass beide Dateien zueinander passen, statt aus zwei unabhängigen Quellen zusammengesucht zu werden.

Der nützlichste Kniff auf dieser Seite. Den Moment suchen, den das Video zeigen wird, sobald es zu spielen beginnt — bei den meisten Schnitten eine oder zwei Sekunden nach dem Start, nach einer Blende oder einem Standbild am Anfang —, und von dort das Vorschaubild nehmen statt von der ersten Sekunde.

Dann ist der Übergang unsichtbar: Der Browser zeichnet das Vorschaubild, danach ein fast identisches erstes Bild, und nichts springt. Wird das Vorschaubild dagegen aus dem ersten Bild einer Schwarzblende genommen, sieht die Besucherin ein schwarzes Rechteck, bis die Wiedergabe beginnt, und dann ein plötzliches Bild.

Das Standbild kommt in der eigenen Auflösung des Videos heraus, bei einer modernen Kamera oder einem Handy also 3.840 Pixel breit. Ein Vorschaubild wird aber in der Breite des Video-Elements angezeigt, auf den meisten Seiten zwischen 640 und 1.280 Pixeln.

Wer das WebP in voller Auflösung ausliefert, lässt Besuchende ein Megabyte laden, um ein Bild in einem Drittel der Größe zu sehen. Auf etwa das Doppelte der angezeigten Breite verkleinert, bringt ein Vorschaubild üblicherweise 60 bis 200 Kilobyte statt weit über einem Megabyte. Diese Extraktion ist bewusst kein Verkleinerungswerkzeug — das gehört in die Software, mit der Bilder sonst für die Seite vorbereitet werden.

Die Standbildextraktion hat genau eine Einstellung, den Zeitpunkt, also wird das WebP mit einer festen Qualität von 82 kodiert. Das ist ein gut gewählter Mittelwert: bei normaler Ansichtsgröße vom Original nicht zu unterscheiden und deutlich kleiner als jeder höhere Wert.

Wer einen bestimmten Wert braucht, nimmt vom gleichen Zeitpunkt ein PNG und kodiert das WebP selbst. Für ein Vorschaubild auf einer Seite ist 82 fast immer die Wahl, die man ohnehin getroffen hätte, und der anschließende Verkleinerungsschritt wirkt sich stärker auf die Dateigröße aus als jede Qualitätszahl.

Am Handy gedrehte Aufnahmen werden als Querformat mit Rotationsflag gespeichert, und das Flag wird beim Lesen des Bildes berücksichtigt, sodass ein Hochformat-Clip ein Hochformat-WebP mit demselben Seitenverhältnis ergibt, das der Player später verwendet.

Das ist bei einem Vorschaubild wichtiger als bei jedem anderen Standbild. Es wird in die Box des Video-Elements gezeichnet, also erzeugt ein Querformat-Bild hinter einem Hochformat-Video schwarze Balken, die im Moment der Wiedergabe verschwinden — ein sichtbarer, unschöner Sprung, der wie ein Fehler auf der Seite wirkt. Vor dem Einbinden die Maße des WebP gegen die des Videos prüfen.

Ein aus einer komprimierten Aufnahme gezogenes Bild trägt diese Kompression mit sich. Schnelle Bewegung erzeugt Unschärfe und Blockartefakte, feine Struktur wirkt gröber als im bewegten Bild, und Schattenpartien können sichtbar gestuft sein. Ein besserer Encoder kann nicht zurückholen, was das Video nie gespeichert hat.

In der Praxis heißt das: ein ruhiger Moment ergibt ein deutlich besseres Vorschaubild als ein bewegter — praktischerweise ist ein ruhiger Moment ohnehin meist die bessere Wahl fürs Vorschaubild. Besteht der ganze Clip aus Bewegung, hilft nur ein bewusst aufgenommenes Foto, was die meisten Kameras während der Aufnahme zusätzlich anbieten.

Das Bild wird ohne ICC-Profil geschrieben. Ein Browser behandelt ein Bild ohne dieses Tag als sRGB, was für das Web die richtige Annahme ist und nicht zwangsläufig das, was die Aufnahme tatsächlich war.

Das zeigt sich bei Quellen mit weitem Farbraum. iPhone-Video liegt in Display P3, und ein gesättigtes Bild — ein Sonnenuntergang, eine Leuchtreklame — kann als ungetaggtes Standbild etwas matter wirken als im laufenden Video, das der Browser mit den eigenen Farbinformationen des Videos zeigt. Wo exakte Farbe zählt, hilft ein Vergleich zwischen Vorschaubild und laufendem Video und eine Korrektur im Bildbearbeitungsprogramm.

Das poster-Attribut auf dem video-Element nimmt das Bild direkt entgegen, und preload auf metadata statt auto verhindert, dass der Browser das Video lädt, bevor jemand danach gefragt hat — genau diese Kombination sorgt dafür, dass das Vorschaubild seinen Platz verdient, statt ein zweiter Download neben dem vollständigen Video zu sein.

Für eine Übersichtsseite oder Karte dient meist dieselbe Datei, und Breite und Höhe auf dem img-Element verhindern einen Sprung im Layout beim Laden. Bei mehreren Videos auf einer Seite ist ein Vorschaubild je Video in sinnvoller Größe insgesamt kleiner als eine einzelne autoplay-Vorschau.

Dekodierung und WebP-Kodierung laufen beide in diesem Tab. Nichts, was das Video trägt, wird irgendwohin geschickt, und der Netzwerk-Tab bestätigt es während der Umwandlung.

Das passt genau zur Aufgabe: Das Video ist noch nicht live, das Vorschaubild entsteht als Teil der Veröffentlichung, und der extrahierte Moment ist per Definition eines der aussagekräftigsten Bilder aus dem ganzen Stück. Den Master zu diesem Zweck bei einem unbekannten Konverter hochzuladen wäre die eine vermeidbare Lücke in einer sonst kontrollierten Veröffentlichung.