GIF in WebM umwandeln

Ein animiertes Werbebanner oder eine Produktanimation im eigenen Onlineshop ist häufig noch ein GIF, weil es früher das einzige Format war, das im Browser lief. Ein Tool wie PageSpeed Insights oder Lighthouse listet genau diese Datei zuverlässig als eines der größten Elemente der Seite, und wer die Bewertung verbessern will, kommt an dieser Zeile kaum vorbei.

Der Wechsel lohnt sich nur, wenn man das HTML selbst bearbeiten kann — bei einem eigenen Shopsystem oder einer selbst gepflegten Landingpage ist das der Fall, und genau dafür ist diese Seite gedacht. Ein GIF, das an einen Kunden verschickt oder in eine Präsentation eingebettet wird, hat diese Möglichkeit nicht.

Ein `<video>`-Element kann mehrere `<source>`-Einträge auflisten, und der Browser wählt den ersten, den er abspielen kann. WebM zuerst und MP4 danach bedeutet: Jeder Besucher bekommt die kleinere Datei, wo sein Browser sie unterstützt, und eine funktionierende Datei, wo nicht — eine Zeile Mehraufwand im Markup.

Ohne diese Möglichkeit ist MP4 die sicherere Einzelwahl. Das gilt für alles, was den eigenen Seitenquellcode verlässt: ein GIF in einer E-Mail-Kampagne oder auf einem Marktplatz-Listing hat keine zweite Quelle, auf die es zurückfallen könnte.

Nicht jede alte Bannerdatei mit der Endung `.gif` bewegt sich tatsächlich — manche wurden nur aus Gewohnheit als GIF exportiert. Für eine ruhende Datei ist diese Seite die falsche Wahl: Ohne Bewegung bringt eine Umwandlung zu Video keinen Vorteil gegenüber einem einfachen Bild, und WebP wäre dann das richtige Ziel statt WebM.

Ein kurzer Blick genügt meist: Läuft die Vorschau im Dateimanager oder im Browser-Tab sichtbar, ist die Umwandlung zu WebM die richtige Wahl; bleibt sie unverändert stehen, spart die Bild-Seite unnötige Arbeit.

Beide Codecs arbeiten im Prinzip gleich: ein vollständiges Bild speichern, danach nur die Unterschiede. VP9 wurde rund ein Jahrzehnt nach H.264 entwickelt und investiert deutlich mehr Rechenaufwand darin, wo im Bild sich Muster wiederholen — ein Aufwand, der sich einmalig beim Kodieren auszahlt, nicht bei jedem Seitenaufruf.

Genau darauf ist ein typisches Werbebanner zugeschnitten: flache Flächen, harte Kanten, große unveränderte Bereiche. Bei einem 448-KB-Test-GIF kam die WebM-Version in eigenen Messungen auf 19 KB gegenüber 23 KB für dieselbe Animation als MP4 — der Unterschied ist auf synthetischem Material größer als bei Kamerabildern.

Der Container gilt als streamfähig, und das ist die zweite Ersparnis auf einer Produktseite: Der Browser kann eine WebM-Datei abspielen, sobald die ersten Bytes angekommen sind, während der Rest noch nachlädt.

Ein GIF kann das in keiner brauchbaren Weise. Erste Bilder werden zwar angezeigt, sobald sie eintreffen, aber die Schleife läuft erst sauber, wenn die gesamte Datei geladen ist — bei einer langsamen Verbindung bedeutet das ein statisches erstes Bild über mehrere Sekunden. Der Wechsel zu WebM verändert also nicht nur die Größe, sondern auch, wie sich das Warten anfühlt.

WebM gehört zu den wenigen Videoformaten, die überhaupt Transparenz speichern können, und genau deshalb greift man auf WebM zurück, wenn eine Animation frei über einem Seitenhintergrund schweben soll.

Diese Umwandlung nutzt das nicht: Die Bildspur ist opak, ein GIF mit transparentem Hintergrund verliert diese Transparenz auf dem Weg. Für ein Werbebanner mit festem, weißem oder farbigem Untergrund ist das folgenlos; soll die Animation freistehend über einem Bild liegen, ist animiertes WebP mit erhaltener Transparenz die ehrlichere Empfehlung.

Jedes Bild eines GIF stammt aus einer Palette von höchstens 256 Farben. Was ursprünglich ein weicher Verlauf oder ein sanfter Schatten war, wurde bei der GIF-Erstellung darauf reduziert, oft mit Dithering, um die Stufen zu kaschieren.

VP9 gibt weiter, was es bekommt, und legt keine eigene Palette darüber — die Animation wird also nicht schlechter. Sie wird aber auch nicht besser, und das Dithering kostet zusätzlich Bytes, weil es aus Sicht eines Videocodecs Rauschen ist, das seine Mustersuche genau dort erschwert, wo eigentlich gespart werden sollte.

GIF-Verzögerungen stehen pro Bild und in Hundertstelsekunden im Dateiformat, sodass eine Animation oft mit Bildraten läuft, die keine Kamera je produziert hat. Die Umwandlung überträgt jede einzelne Bilddauer in das Video, statt sie auf eine feste Rate zu vereinheitlichen.

Ein gespeicherter Wert von null bedeutet „so schnell wie möglich" und wird wie in Browsern üblich als hundert Millisekunden behandelt. Eine Animation, die von Auge im GIF-Editor getimt wurde, läuft dadurch in der WebM genauso schnell wie zuvor.

Beide auf dieser Seite verwendeten Videocodecs verlangen gerade Pixelmaße, ein GIF kennt diese Einschränkung nicht. Breite und Höhe werden deshalb vor dem ersten Bild auf die nächste gerade Zahl aufgerundet — ein 405 Pixel breites GIF ergibt eine 406 Pixel breite WebM.

Aufgerundet wird nach oben, es geht also keine Bildkante verloren. Bei einer festen CSS-Breite im Layout fällt das eine zusätzliche Pixel nie auf; wer die Animation pixelgenau gegen ein Hintergrundbild ausrichtet, sollte die Verschiebung kennen.

Ein Bild-Element durch ein Video-Element zu ersetzen, ist kein reiner Austausch — dieser Schritt geht am häufigsten schief. Ohne feste Breite und Höhe oder eine `aspect-ratio`-Angabe verschiebt sich beim Laden das Layout, und aus einem Datenvolumen-Problem wird ein Layout-Verschiebungs-Problem, was den Bericht nicht besser aussehen lässt.

Ein Vorschaubild lohnt sich zusätzlich: Ohne eines steht bis zur Decodierung der ersten Bilder eine leere Fläche, wo das GIF wenigstens etwas zeigte. Das erste Bild als kleines WebP oder PNG zu exportieren deckt das ab.

Läuft eine Werbekampagne mit mehreren Formaten gleichzeitig — Skyscraper, Rechteck, mobile Ansicht — lassen sich alle GIF-Varianten in einem Durchgang ablegen, bis zu 100 auf einmal, jede bis 100 MB in der kostenlosen Stufe. Alle WebM-Dateien kommen als ein ZIP zurück, jede mit dem Namen der Ausgangsdatei und ausgetauschter Endung.

Weil die Kodierung auf dem eigenen Rechner läuft, gibt es keine Warteschlange hinter fremden Aufträgen — bei einer Kampagne mit fünf oder sechs Bannerformaten ist das der Unterschied zwischen einem Arbeitsschritt und mehreren einzelnen.

Die Bilder werden vom eingebauten Bild-Decoder gelesen und vom eingebauten Video-Encoder im selben Tab kodiert. Es gibt keinen Server im Ablauf, keine Warteschlange, kein Konto und kein Tageslimit, und ein Durchgang nimmt bis zu 100 Dateien gleichzeitig an.

Dieser Decoder ist nicht in jedem Browser vorhanden. Fehlt er, meldet die Seite das mit Namen der Browser, die ihn mitbringen, statt die Datei irgendwo anders fertigstellen zu lassen — genau das würde die Aussage oben zunichtemachen.