WebP in AVIF konvertieren Online

AVIF (AV1 Image File Format) ist ein Bildformat, das vom AV1-Video-Codec abgeleitet ist und von der Alliance for Open Media (AOMedia) entwickelt wurde; die Spezifikation wurde im Februar 2019 veröffentlicht. AOMedia wurde 2015 von Amazon, Apple, ARM, Cisco, Google, Intel, Microsoft, Mozilla, Netflix und Nvidia gegründet, mit dem Ziel, lizenzfreie Video- und Bild-Codecs zu schaffen. AVIF verwendet den AV1-Codec für die Komprimierung von Standbildern und bietet damit für viele Inhaltstypen eine deutlich überlegene Komprimierungseffizienz gegenüber WebP. In vergleichenden Benchmarks erzeugt AVIF Dateien, die etwa 20 % kleiner sind als WebP bei gleicher subjektiver Bildqualität (SSIM/DSSIM), und 50–60 % kleiner als JPG. AVIF unterstützt zudem Transparenz (Alpha-Kanal), HDR (hohen Dynamikumfang), 10- und 12-Bit-Farbtiefe und animierte Sequenzen.

AVIF hat native Unterstützung in allen großen modernen Browsern: Chrome 85 (August 2020) war der erste mit voller Unterstützung für statische AVIF-Bilder; Firefox 93 (Oktober 2021) fügte AVIF-Unterstützung ohne Flags hinzu; Opera 71 (August 2020, basierend auf Chromium 85) übernahm Chromes Unterstützung. Safari 16 (September 2022, verfügbar auf iOS 16 und macOS Ventura) war der letzte große Browser, der AVIF-Unterstützung hinzufügte. Edge 121 (Januar 2024) fügte Unterstützung für animiertes AVIF hinzu. Für Nutzer in Browsern ohne AVIF-Unterstützung (Safari 15 und früher, älteres Edge, IE) ist das empfohlene Muster, das HTML-picture-Element mit einer source type='image/avif' und einem Fallback-img in WebP oder JPG zu verwenden.

Core Web Vitals, die Sammlung von Nutzererfahrungsmetriken, die Google seit Mai 2021 als Ranking-Signal verwendet, enthält LCP (Largest Contentful Paint) als einen der drei Hauptindikatoren. LCP misst die Zeit, bis das größte sichtbare Inhaltselement – häufig ein Hero-Bild – fertig gerendert ist. Kleinere Bilder laden schneller und reduzieren damit den LCP. Wenn das LCP-Bild deiner Seite ein 200-KB-WebP-Bild ist, das in AVIF 160 KB wiegt, übersetzt sich die 20-prozentige Größenreduzierung direkt in schnellere Ladezeiten, besonders auf langsamen mobilen Verbindungen (3G, schwaches 4G). Google PageSpeed Insights und Lighthouse bewerten die Verwendung von Next-Gen-Formaten bereits als positives Signal in ihrem Audit 'Bilder in Next-Gen-Formaten bereitstellen'.

WebP wurde von Google entwickelt und im September 2010 angekündigt als effizientere Alternative zu JPG und PNG. Bei der Einführung bot WebP eine 25–34-prozentige Reduzierung gegenüber JPG bei gleichwertiger Qualität. WebP basiert jedoch auf derselben Basiskomprimierungstechnologie wie der VP8-Video-Codec (2010), die von den Fortschritten in der Informationstheorie und Videokodierung des letzten Jahrzehnts überholt wurde. AVIF verwendet AV1 (2018), einen deutlich moderneren Codec mit besserer Modellierung von visuellen Inhalten. Für Bild-Pipelines auf CDNs (Cloudflare Images, Fastly, Imgix, Cloudinary) maximiert die Konvertierung von Master-Bildern in AVIF die Auslieferungseffizienz an moderne Browser. Die Einsparungen bei der Bandbreite auf Websites mit Millionen von Seitenaufrufen sind erheblich.

Ja. Sowohl WebP als auch AVIF unterstützen Alpha-Kanäle (Transparenz). Wenn dein WebP transparente Bereiche hat (WebP mit Alpha-Kanal, häufig aus PNG oder rasterisierten SVG-Grafiken generiert), bleibt die Transparenz im resultierenden AVIF vollständig erhalten. Im Gegensatz zur WebP→JPG-Konvertierung (bei der Transparenz verloren geht und mit Weiß gefüllt wird) behält WebP→AVIF die Transparenz vollständig bei. Das macht AVIF besonders wertvoll für Logos, Icons, Produktbilder mit transparentem Hintergrund und UI-Elemente, die über variable Hintergründe gelegt werden müssen.

Die browserbasierte Konvertierung verwendet die HTML5-Canvas-API (canvas.toBlob() oder canvas.toDataURL() mit type 'image/avif') und die eigene Rendering-Engine des Browsers für die AVIF-Kodierung. Das hat mehrere Implikationen: Die AVIF-Kodierungsqualität hängt vom Encoder des Browsers ab (Chrome/Chromium verwendet libaom, AV1s Referenzimplementierung, das Kompatibilität gegenüber Geschwindigkeit priorisiert); der Prozess kann langsamer sein als JPG-zu-JPG-Konvertierungen, da AVIF rechnerisch komplexer ist; animierte WebP-Bilder werden nur auf den ersten Frame konvertiert (animiertes AVIF erfordert vollständige Sequenzkodierung, die über die Canvas-API nicht verfügbar ist). Für Batch-Konvertierungen oder bei maximaler Geschwindigkeit und Optimierung bieten Befehlszeilen-Tools wie avifenc (aus AOMedias libavif-Bibliothek) oder squoosh-cli mehr Kontrolle über Encoder-Parameter.