In dieser Anleitung
Alle drei können Transparenz enthalten, bedienen aber unterschiedliche Lieferstufen. Nutze WebM Alpha für kompakte Webausgaben, ProRes 4444 für Schnitt und Compositing und eine RGBA-PNG-Sequenz für verlustfreien Zugriff auf jeden Frame.
Offen bleiben Größe bei identischer Animation und Alpha-Erhalt beim echten Codieren/Decodieren. Wir exportierten alle drei aus derselben AnimGen-Animation, maßen Dateien, decodierten beide Videos zu Frames und stellen die Originale unten bereit.
Nach Lieferziel wählen
| Ziel | Guter Ausgangspunkt | Warum | Wichtigster Nachteil |
|---|---|---|---|
| Website oder kompatible Browserlaufzeit | WebM Alpha | Eine kompakte transparente Videodatei | Alpha-Wiedergabe nicht in allen Browsern konsistent |
| Videoeditor, Motion Graphics, Compositing | ProRes 4444 | Hochwertiges Austauschformat mit Alpha | Viel größer, ungeeignet für gewöhnliche Webauslieferung |
| Frame-Prüfung, Archiv, eigene Pipeline | RGBA-PNG-Sequenz | Jedes Bild unabhängig und verlustfrei | Viele Dateien, mehr Speicher, Reihenfolge/Timing separat erhalten |
| Echtzeit-2D-Spiel | Sprite-Sheet oder Engine-Paket | Frames und Timing passend zur Engine | Andere Struktur; Texturgröße, Drehpunkt, Filter und Metadaten prüfen |
Kontrollierst du die gesamte Pipeline, behalte PNGs als portable Quelle und leite Lieferformate ab. Brauchst du nur einen Export, wähle fürs Ziel, nicht nach der fortschrittlichsten klingenden Endung.
Eine transparente Animation, drei echte Dateien
Der Test nutzt den öffentlichen isometrischen Taktikerhieb. Die Quelle enthält 96 RGBA-PNG-Frames mit 512 × 512, bei 24 FPS für 4,00 Sekunden. Feste Leinwand, kein Loop und transparente Ecken ermöglichen eine einfache Alpha-Plausibilitätsprüfung.
Die exakten Testdateien:
- 96-Frame-RGBA-PNG-ZIP herunterladen
- WebM-Alpha-Export herunterladen
- ProRes-4444-MOV herunterladen
- Messmanifest und SHA-256-Prüfsummen öffnen
Beide Videos entstanden mit aktuellen AnimGen-Exportencodern aus denselben 96 Frames. WebM meldet VP8 mit ALPHA_MODE=1, MOV ProRes-Profil 4444, Codec-Tag ap4h und Pixelformat yuva444p12le. Vor dem Vergleich decodierten wir jedes wieder in 96 PNGs.
Mit FFmpeg kannst du dieselben Container-/Streamfelder an beiden Downloads prüfen:
ffprobe -v error -show_entries "stream=codec_name,profile,codec_tag_string,pix_fmt,width,height,r_frame_rate:stream_tags=ALPHA_MODE:format=duration" -of json your-export.webm
Metadaten allein sind kein endgültiger Transparenznachweis; deshalb prüfen wir auch decodierte Frames und Hintergrundkompositionen.
Gemessene Dateigrößen
Für dieses Beispiel:
| Ausgabe | Exakte Größe | Ungefähre Größe | Relativ zu WebM |
|---|---|---|---|
| WebM Alpha | 828.010 Bytes | 0,79 MiB | 1× |
| PNG-Sequenz-ZIP | 14.427.494 Bytes | 13,76 MiB | 17,42× |
| ProRes 4444 MOV | 20.052.159 Bytes | 19,12 MiB | 24,22× |
Dieses Verhältnis gehört zu einer Messung. Auflösung, Dauer, Details, Bewegung, Encoder und ZIP-Gruppierung verändern Ergebnisse. WebM ist hier deutlich kleiner; PNG-Sequenz und ProRes erhalten produktionsfreundliche Strukturen bei höherem Speicherbedarf. Die Messgrafiken behalten ihre englischen Originalbeschriftungen.
Hat Alpha die Videoumwandlung überlebt?
Ja, in diesem Test. Beide decodierten Videos enthalten 96 Frames mit Alpha 0–255; alle vier Eckproben bleiben vollständig transparent. Derselbe Frame lässt sich ohne eingebranntes Rechteck auf helle, dunkle und gesättigte Hintergründe setzen.
Wir maßen auch mittlere absolute Abweichung von den ursprünglichen RGBA-Frames auf einer Kanalskala 0–255:
| Decodierte Ausgabe | Mittlerer Alpha-Fehler | Höchster mittlerer Alpha-Fehler eines Frames | Mittlerer sichtbarer RGB-Fehler |
|---|---|---|---|
| WebM Alpha | 0,0497 | 0,0911 | 2,5984 |
| ProRes 4444 | 0,0016 | 0,0038 | 0,4524 |
„Sichtbar“ bedeutet Quellpixel mit Alpha größer 8. Null wäre exakte Übereinstimmung. Beide behielten brauchbare Transparenz; ProRes blieb näher an Quellpixeln. Das passt zu ihren Rollen, beweist aber nicht, dass jeder ProRes-Export überall sichtbar besser aussieht.
Die PNG-Sequenz braucht keinen Videoumweg: Das ZIP enthält unabhängige Original-RGBA-Frames. Sie ist die klarste Basis, um generierte Frames, Encoder oder Zieldecoder als Fehlerquelle zu unterscheiden.
WebM Alpha für kompakte Webauslieferung
WebM Alpha ist eine gute erste Wahl für transparente Figuren, Effekte oder Maskottchen in kompatiblen Browsern/Weblaufzeiten. Hier unter 1 MiB vermeidet es 96 Bildanfragen und deutlich größere Gesamtdaten der Quellsequenz.
Zwei Einschränkungen sind wichtig.
Erstens garantiert „WebM unterstützt“ kein Alpha für den konkreten Codec. AnimGen exportiert derzeit VP8 Alpha. MDNs Codec-Anleitung nennt fehlende VP8-/VP9-Alpha-Unterstützung in Safari. Teste tatsächlichen Browser, OS, Gerät, Webview und Player.
Zweitens behalte ein echtes transparentes PNG-Poster/Ersatzbild. Moderne Browser können <video> verstehen, aber Alpha nicht korrekt decodieren oder zusammensetzen. Am sichersten ist ein separates <img> mit Wechsel zum nachweislich nutzbaren Video. Die Website-Anleitung enthält HTML, CSS, Ersatzverhalten, reduzierte Bewegung und vollständigen Download.
Nutze WebM Alpha, wenn:
- Downloadgröße wichtig ist;
- die Animation als Video statt frameweise geliefert wird;
- Browser-/Laufzeitmatrix bekannt und getestet ist;
- ein PNG nicht unterstützte Fälle abdecken kann.
Behalte es nicht als einzige Masterkopie, wenn später einzelne Frames bearbeitet werden sollen.
ProRes 4444 für Schnitt und Compositing
ProRes 4444 dient Motion Graphics, Compositing und Austausch mit Alpha in hochwertigem Video. Apples ProRes-Whitepaper beschreibt für 4444 und 4444 XQ 4:4:4:4-Bildquellen und Alpha bis 16 Bit.
Unser decodiertes ProRes lag bei Alpha und sichtbarem RGB näher am Original als WebM. Der Preis ist Größe: 19,12 MiB für vier Sekunden, etwa 24-mal WebM. Als Schnittmaster kann das sinnvoll, als Seitenasset verschwenderisch sein.
Nutze ProRes 4444, wenn:
- als Nächstes Editor, Compositor, Broadcast oder Motion-Graphics-Pipeline folgt;
- eine timelinefähige Datei einem Frame-Verzeichnis vorzuziehen ist;
- hochwertige Farbe und Alpha wichtiger als Downloadgröße sind;
- die konkrete Zielanwendung mit ProRes-4444-Alpha getestet wurde.
Lade einen großen ProRes-Master nicht nur wegen Transparenz auf eine Website. Erstelle eine kleinere Lieferfassung.
RGBA-PNG-Sequenzen für Kontrolle und Diagnose
Eine PNG-Sequenz ist besonders eindeutig: Jedes Frame ist ein unabhängiges RGBA-Bild, direkt prüfbar und austauschbar, ohne die übrige Bewegung neu zu codieren. PNG ist ein verlustfreies Bildformat der W3C-PNG-Spezifikation.
Das hilft besonders, wenn:
- jemand ein oder zwei Frames retuschiert;
- eigene Tools direkt Pixel, Masken oder Rechtecke lesen;
- portable Quellen für spätere WebM-, ProRes-, Sheet- oder Engine-Exporte nötig sind;
- eine defekte Transparenzstrecke eingegrenzt werden muss.
Der Nachteil ist organisatorisch: 96 Dateien müssen geordnet bleiben, Wiedergaberate ist externe Metadaten, Speicher/Transfer wachsen schnell. ZIP erleichtert Lieferung; Spiel oder Editor müssen Frames trotzdem entpacken und interpretieren.
Prüfe beim Import Dateireihenfolge, FPS, Leinwand, Drehpunkt, Farbverarbeitung, Filterung und erwartetes Straight- oder Premultiplied-Alpha. Perfekte Quellpixel können mit falschem Import dennoch falsch aussehen.
Für Spiele Sprite-Sheet oder Engine-Paket erwägen
WebM, ProRes und PNGs sind nicht die einzigen Möglichkeiten. 2D-Spiele profitieren oft von Sheets mit Timing-/Drehpunktdaten oder Engine-Paketen. Diese sind weniger allgemein, dafür leichter importierbar und benötigen weniger Texturwechsel.
Dieser Vergleich hält alle drei Quellen bewusst bei 512 × 512 je Frame. Öffentliche Engine-Beispiele nutzen andere laufzeitorientierte Packung; ihre Größen gehören nicht als vierter Balken in diesen Codec-Test. Vergleiche sie als Workflowentscheidung.
Der Godot-4-Praxistest zeigt vollständiges Paket, 96 Frame-Bereiche, Timing und reproduzierbares Projekt. Die Formatreferenz behandelt Sheets, Unity, Godot, Unreal Paper2D, Cocos Creator und API-Formatnamen.
Warum transparentes Video manchmal schwarz erscheint
Ein schwarzes Rechteck beweist keinen Alpha-Verlust. Prüfe in dieser Reihenfolge:
- Passendes PNG auf hellem und dunklem Hintergrund öffnen.
- Bei transparentem PNG das Video mit bekannt kompatiblem Decoder/Compositor prüfen.
- WebM als
video/webm, ProRes-MOV alsvideo/quicktimeausliefern. - Die genaue Zielanwendung statt Betriebssystem-Miniaturansicht testen.
- Bei überall undurchsichtiger Ausgabe Quell-Alpha und transparente Exporteinstellungen prüfen.
Der Dreihintergrundvergleich ist bewusst einfach: Echte transparente Kanten sollten vor mehr als einer passenden Farbe funktionieren. Haare, Glühen, Bewegungsunschärfe, Schatten und Farben nahe dem Key-Hintergrund verdienen mehr Prüfung als leere Ecken. Siehe Formatkompatibilität und Export-Fehlersuche.
Eine praktische Exportstrategie
Du musst nicht für das ganze Projekt nur ein Format wählen:
- Nützliche Bewegung generieren und zuschneiden.
- Zuerst PNG-Frames exportieren und auf mehreren Hintergründen prüfen.
- PNG-Sequenz oder ProRes 4444 als Produktionsquelle behalten, je nach frame- oder timelineorientierter Arbeit.
- WebM Alpha für getestete Webziele erzeugen.
- Sprite-Sheet/Engine-Paket für Echtzeitspiele erstellen.
- FPS, Reihenfolge, Leinwand und Drehpunkt bei den Assets speichern.
AnimGens kostenloser PNG-Frame-Export erlaubt Prüfung vor Wahl eines Produktionsformats. WebM Alpha, ProRes 4444, Sprite-Metadaten, Engine-Pakete und kommerzielle Nutzung folgen aktuellen bezahlten Tarif-/Credit-Paketberechtigungen. Prüfe aktuellen Export- und kommerziellen Zugang statt alter Artikelpreise.
Beginne mit vorhandenem transparenten Figuren-PNG im transparenten Workflow, generiere und exportiere fürs tatsächliche Ziel. Wähle, was das nächste Werkzeug prüfen, bearbeiten und ausliefern kann; beeindruckende Spezifikationen helfen wenig bei unzuverlässiger Zielunterstützung.