Moderne Bildformate wie WebP und AVIF sind neuere Dateiformate für Webbilder, die bei gleicher oder besserer Qualität deutlich kleinere Dateien erzeugen als ältere Formate wie JPEG oder PNG. Sie unterstützen Transparenz, teils Animationen und effiziente Komprimierung. Dadurch laden Websites schneller, ohne sichtbar an Bildqualität zu verlieren.
Was zeichnet WebP und AVIF aus?
WebP wurde von Google entwickelt und kombiniert verlustbehaftete und verlustfreie Komprimierung mit Unterstützung für Transparenz und Animationen. Gegenüber JPEG und PNG erreicht es bei vergleichbarer Qualität spürbar kleinere Dateien und wird heute von allen gängigen Browsern unterstützt.
AVIF basiert auf moderner Videokompressionstechnik und komprimiert in vielen Fällen noch effizienter als WebP, besonders bei Fotos mit weichen Farbverläufen. Es bietet ebenfalls Transparenz und einen großen Farbumfang. Die Browserunterstützung ist inzwischen breit, wenngleich AVIF etwas neuer ist als WebP.
Warum sind moderne Bildformate wichtig?
Da Bilder oft den größten Anteil am Datenvolumen einer Seite ausmachen, wirken sich kleinere Dateien direkt auf die Ladezeit aus. Der Umstieg von JPEG auf WebP oder AVIF kann das Bildvolumen erheblich senken und verbessert damit die Core Web Vitals, insbesondere den größten sichtbaren Inhalt (Largest Contentful Paint).
Schnellere Seiten steigern die Nutzerzufriedenheit, senken Absprünge und werden von Suchmaschinen bevorzugt. Der Wechsel zu modernen Formaten gehört deshalb zu den wirksamsten technischen Optimierungen für Pagespeed.
Moderne Bildformate in der Praxis
Damit auch ältere oder nicht unterstützende Browser ein Bild anzeigen, wird häufig ein Fallback bereitgestellt: Über das picture-Element liefert der Server bevorzugt AVIF oder WebP aus und greift bei Bedarf auf JPEG zurück. Viele Content-Management-Systeme und Plugins erzeugen diese Varianten automatisch beim Hochladen.
In der Praxis empfiehlt es sich, Bilder zunächst auf die passende Größe zu skalieren, sie dann in ein modernes Format zu wandeln und mit einem sinnvollen Qualitätswert zu komprimieren. So entstehen scharfe, kleine Dateien, die auf allen Geräten schnell laden.
Bei aller Optimierung sollten begleitende Angaben nicht vergessen werden. Ein aussagekräftiger Alternativtext beschreibt das Motiv für Screenreader und Suchmaschinen und ist unabhängig vom Bildformat wichtig für Barrierefreiheit und die Bildersuche. Auch das verzögerte Laden weiter unten liegender Bilder harmoniert gut mit modernen Formaten, weil dann nur die tatsächlich sichtbaren, ohnehin kleinen Dateien sofort geladen werden. Zusammen ergibt sich eine Seite, die schnell erscheint und zugleich zugänglich bleibt.