Was sind Formate der nächsten Generation?
Bildformate der nächsten Generation sind neuere Formate wie WebP, AVIF und JPEG XL, die eine bessere Komprimierung, zusätzliche Funktionen oder beides anstreben. Der Begriff ist informell und verändert sich mit der Entwicklung der Formate und ihrer Unterstützung.
So funktionieren Formate der nächsten Generation
Der Ausdruck stammt größtenteils aus Lighthouse, wo viele Entwickler ihm in der Prüfung „Serve images in next-gen formats“ begegnen. Die Liste hinter der Bezeichnung hat sich verändert: Lighthouse 6 beschrieb die Formate als JPEG 2000, JPEG XR und WebP, während Lighthouse 12 WebP und AVIF nennt. Die Dokumentation von Chrome nennt die Prüfung inzwischen „Serve images in modern formats“ und erklärt, dass sie seit Lighthouse 13 Teil der Analyse „Improve image delivery“ ist. JPEG XL (ISO/IEC 18181) wird üblicherweise ebenfalls dazugezählt. Die Kandidaten unterscheiden sich erheblich bei verlustbehafteten und verlustfreien Modi, Alpha-Verarbeitung, Animation, hohem Dynamikumfang und Metadaten. Ihre Verbreitung hängt von Encodern, Browsern, Betriebssystemen und Bearbeitungsprogrammen ab, nicht allein vom Alter.
Wichtige Fakten
- In einem Lighthouse-Bericht hat die Bezeichnung eine präzise Bedeutung. Lighthouse 12 bewertet die Bildantworten, die der Browser tatsächlich geladen hat: Es untersucht nur solche mit dem Typ BMP, JPEG oder PNG und führt sie auf, wenn ihre geschätzte AVIF-Einsparung mindestens 8.192 Bytes beträgt. Ein als JPEG XL ausgeliefertes Bild verschwindet daher aus der Liste, weil es nicht untersucht wird, nicht weil es als modern gilt. Überspringt ein Browser
<source>mit JPEG XL und lädt den JPEG-Fallback, wird dieses JPEG untersucht. Die Einsparung ist die Größe des geladenen Bildes abzüglich einer geschätzten AVIF-Größe, die nicht von einem AVIF-Encoder stammt: Die Schätzung ist der Mittelwert aus der halben Größe eines erneuten JPEG-Encodings mit Qualität 0,92 und 80 Prozent der Größe eines erneuten WebP-Encodings mit Qualität 0,85. Beide werden beim Browser angefordert. Bei Bildern über 2.000 KiB oder sobald 5 Sekunden für erneutes Encoding aufgewendet wurden, wird die Schätzung allein aus den Pixelabmessungen berechnet. Betrachten Sie die gemeldeten Einsparungen als Anhaltspunkt, den Sie überprüfen sollten. - Die Formate sind unterschiedlich konzipiert und keine austauschbaren Hüllen. AVIF speichert mit AV1 codierte Bilder in einer HEIF-Datei. WebP ist ein RIFF-Container mit verlustbehafteten VP8-Daten oder verlustfreien WebP-Daten. JPEG XL hat einen eigenen Codestream und ein boxbasiertes Dateiformat. Als einziges der drei Formate kann es ein vorhandenes JPEG verlustfrei transkodieren und später die identische JPEG-Datei wiederherstellen.
- Die Browserunterstützung muss für jedes Format und jede Funktion geprüft werden. Laut caniuse wird WebP in Safari ab Version 16.0 vollständig unterstützt, während die Versionen 14.0 bis 15.6 macOS 11 oder neuer erfordern. AVIF wird seit Chrome 85 und Firefox 93 unterstützt, vollständig jedoch erst seit Safari 16.4 und Edge 121. MDN führt JPEG XL ab Chrome 155, Edge 155, Firefox 158 und Safari 17 auf. caniuse stimmt damit überein, führt allerdings Edge 155 noch nicht auf und kennzeichnet die Unterstützung durch Safari als teilweise: nur Standbilder, ohne progressives Decodieren. In einem Element namens
<picture>überspringt der Browser jeden Eintrag namens<source>, dessen Attributtypeeinen nicht unterstützten Typ angibt. Dadurch funktioniert ein JPEG- oder PNG-Fallback. - Das Decodieren in Browsern sagt wenig über den Rest einer Toolchain aus. Die Dokumentation von Pillow erklärt beispielsweise, dass Pillow AVIF nur mit 8 Bit speichert und jedes AVIF als RGB oder RGBA mit 8 Bit decodiert. Die Dokumentation von sharp erklärt, dass AVIF-Bildsequenzen nicht unterstützt werden. Prüfen Sie Editoren, Metadaten-Tools und serverseitige Bibliotheken separat auf jede Funktion, auf die Sie angewiesen sind.
- Eine kleinere Ausgabe hängt vom Inhalt ab. Laut MDN ist verlustbehaftetes WebP bei visuell ähnlichen Komprimierungsstufen im Mittel 25 bis 35 Prozent kleiner als JPEG und verlustfreies WebP typischerweise 26 Prozent kleiner als PNG. Durchschnittswerte lassen sich jedoch nicht auf jedes Bild übertragen: Mitwirkende von libavif beschreiben verlustfreies AVIF als effizient für fotoähnliche Bilder und erwarten bei grafischen Inhalten deutlich schlechtere Ergebnisse als mit verlustfreiem WebP. Vergleichen Sie die Kandidaten anhand Ihrer eigenen Fotos, Grafiken und transparenten Bilder mit der Qualität, die Sie ausliefern möchten.
Wann Formate der nächsten Generation relevant sind
Liefern Sie ein neueres Format aus, wenn die an Ihren eigenen Bildern gemessenen Vorteile bei Größe und Qualität das zusätzliche Encoding und den zusätzlichen Speicherbedarf rechtfertigen. Behalten Sie einen JPEG- oder PNG-Fallback bei, etwa mithilfe eines Elements namens <picture>, dessen Einträge namens <source> ihren Medientyp deklarieren. Die Unterstützung durch Browser, Decoder, Bearbeitungsprogramme und Metadaten-Tools kann unterschiedlich ausfallen.
So hilft Transloadit bei Formaten der nächsten Generation
Transloadits Tabelle der Bildformate führt WebP, AVIF und JPEG XL (JXL) als Formate auf, die seine ImageMagick-basierten Robots, darunter /image/resize, lesen und schreiben können. Der Parameter format dieses Robots akzeptiert jedes Format, das die Tabelle als schreibbar kennzeichnet.
Die Tabelle ist auf mehrere Seiten verteilt und nach Namen sortiert. Die WebP-Zeile steht daher auf einer späteren Seite. Die Dokumentation zu /image/resize beschreibt den Parameter quality nur für JPG und PNG. Vergleichen Sie deshalb Größe und Qualität der Ausgabe anhand Ihrer eigenen Bilder.
Entdecken Sie Transloadits Möglichkeiten für Dateiformate & Komprimierung
Quellen
- Chrome for Developers: Lighthouse-Prüfung „Serve images in modern formats“
- Lighthouse 12.8.2 modern-image-formats.js: Prüfungstitel, Überspringen moderner Formate, AVIF-Schätzungen, Schwellenwert
- Lighthouse 12.8.2 optimized-images.js: BMP-, JPEG- und PNG-Filter, Qualitätswerte für erneutes Encoding, Größen- und Zeitlimits
- Lighthouse 6.0.0 uses-webp-images.js: frühere Beschreibung mit JPEG 2000, JPEG XR und WebP
- Spezifikation des AV1 Image File Format (AVIF): Geltungsbereich
- WebP-Containerspezifikation (RIFF-Header, VP8- und VP8L-Daten)
- JPEG-Komitee: Überblick über JPEG XL (ISO/IEC 18181)
- MDN: Leitfaden zu Bilddateitypen und Bildformaten (WebP, AVIF, JPEG XL, Fallbacks)
- MDN: Das Element picture (das Attribut type)
- Can I use: WebP-Bildformat
- Can I use: AVIF-Bildformat
- Can I use: JPEG-XL-Bildformat
- Pillow-Handbuch: AVIF (Beschränkungen auf 8 Bit)
- sharp-Ausgabeoptionen: avif (Bildsequenzen nicht unterstützt)
- libavif-Issue #1244: Kommentare von Mitwirkenden zu verlustfreiem AVIF und grafischen Inhalten
- Lighthouse-Issue #5821: Frage zu Formaten der nächsten Generation, die Chrome nicht unterstützte