Zum Inhalt springen
checkfrei
Menü

WebP und AVIF: Bilder in moderne Formate umwandeln

Stand: 3. Oktober 2026 · CAZ Labs

Kurz gesagt

WebP und AVIF speichern Fotos bei gleicher sichtbarer Qualität deutlich kleiner als JPG und PNG, und alle aktuellen Browser können beide. Für Logos und Icons ist SVG meist die richtige Wahl. Am einfachsten wandelst du Bilder automatisch beim Hochladen um, mit einem Plugin oder dem Bild-Service deines Hosters.

Warum das wichtig ist

Auf vielen Seiten machen Bilder den größten Teil der Datenmenge aus. Ein Foto vom Handy hat schnell mehrere Megabyte, und auch ein ordentlich exportiertes JPG wiegt oft 200 KB oder mehr. Google gibt für WebP bei vergleichbarer Qualität 25 bis 34 Prozent kleinere Dateien als JPG an. AVIF schafft bei Fotos meist noch etwas mehr.

Kleinere Bilder laden schneller, und das wirkt direkt auf den Largest Contentful Paint, wenn das größte Element oben ein Foto ist. Bei Firmenseiten mit großem Titelbild ist das fast immer so.

Ehrlich gesagt bringt das Format aber weniger als die Abmessungen. Ein 4.000 Pixel breites Foto, das auf 800 Pixel angezeigt wird, ist auch als WebP viel zu groß. Erst verkleinern, dann umwandeln.

So prüfst du es selbst

checkfrei liest beim kostenlosen Check die Dateiendungen der eingebundenen Bilder. Ist weniger als die Hälfte WebP, AVIF oder SVG, gibt es eine Warnung. Einen Fehler gibt es hier nicht, weil auch gut komprimierte JPGs ordentlich laden können.

Diese Prüfung hat eine Grenze: Manche CDNs und Plattformen, Shopify zum Beispiel, liefern unter einer Adresse mit .jpg in Wirklichkeit ein modernes Format aus, wenn der Browser es kann. Die Endung verrät das nicht. Was wirklich ankommt, siehst du in den Entwicklertools: F12, Tab Netzwerk, Filter Img, Spalte Typ. Steht dort webp oder avif, ist alles gut.

So behebst du es

Als Faustregel: Fotos als WebP oder AVIF, Logos, Icons und einfache Grafiken als SVG. PNG brauchst du kaum noch, denn WebP kann auch Transparenz.

WordPress

WordPress kann seit Version 5.8 WebP-Dateien verarbeiten und seit 6.5 auch AVIF, vorausgesetzt, die Bildbibliothek auf dem Server (GD oder Imagick) unterstützt das Format. Ein hochgeladenes JPG wandelt WordPress von sich aus aber nicht um. Dafür brauchst du ein Plugin.

  1. Prüf unter Werkzeuge > Website-Zustand im Bericht den Abschnitt zur Medienverarbeitung. Dort steht, welche Formate GD oder Imagick auf deinem Server beherrschen. Fehlt WebP, frag deinen Hoster.
  2. Installier ein Plugin für die Umwandlung, etwa Modern Image Formats vom WordPress-Performance-Team, EWWW Image Optimizer, ShortPixel oder Imagify. Die drei letzten wandeln auch vorhandene Bilder nachträglich um, teils gegen Gebühr.
  3. Kontrollier danach im Netzwerk-Tab, ob wirklich WebP oder AVIF ausgeliefert wird.

Shopify

Shopify liefert Bilder über das eigene CDN aus und wählt das Format passend zum Browser. Umwandeln musst du nichts. Wichtiger ist, dass dein Theme passende Größen anfordert, etwa mit image_url: width: 800, statt immer das Original zu laden.

HTML

Mit dem <picture>-Element bietest du mehrere Formate an. Der Browser nimmt die erste Quelle, die er versteht. Das <img> am Ende ist der Rückfall für alle anderen und trägt alt, Breite und Höhe.

Zum Umwandeln einzelner Bilder reicht das kostenlose Web-Werkzeug Squoosh (squoosh.app). Für viele Dateien auf einmal gibt es Kommandozeilen-Tools wie cwebp und avifenc.

html
<picture>
  <source srcset="/bilder/team.avif" type="image/avif">
  <source srcset="/bilder/team.webp" type="image/webp">
  <img src="/bilder/team.jpg" alt="Unser Team vor der Werkstatt" width="1200" height="800">
</picture>

Next.js

Die Komponente next/image wandelt Bilder beim Ausliefern um, standardmäßig in WebP. AVIF schaltest du in der next.config dazu.

js
images: {
  formats: ['image/avif', 'image/webp'],
},

Typische Fehler

  • Umwandeln ohne Verkleinern. Die Pixelmaße sind der größere Hebel.
  • Qualität auf 100. Für Fotos reicht bei WebP eine Qualität um 75 bis 80. Darüber wächst die Datei, ohne dass man es sieht.
  • Logos als JPG. Schrift und Kanten werden unscharf, und die Datei ist trotzdem größer als ein SVG.
  • AVIF ohne Rückfall. Wer AVIF ohne <picture> einbindet, zeigt älteren Browsern ein kaputtes Bild.

So prüft checkfrei

Wir prüfen die Dateiendungen der eingebundenen Bilder. Ist weniger als die Hälfte WebP, AVIF oder SVG, gibt es eine Warnung.

Gewicht 1 von 3 im Bereich Ladezeit.

Häufige Fragen

WebP oder AVIF, was soll ich nehmen?

WebP ist der sichere Standard, schnell erzeugt und überall unterstützt. AVIF wird bei Fotos meist noch kleiner, das Umwandeln dauert aber länger. Kann dein Plugin oder CDN beides, biete beides an und lass den Browser wählen.

Unterstützen alle Browser WebP?

Ja, alle aktuellen Versionen von Chrome, Firefox, Safari und Edge. Safari kann WebP seit Version 14. Für sehr alte Geräte sorgt das <picture>-Element mit JPG-Rückfall vor.

Verliere ich beim Umwandeln Qualität?

Bei verlustbehafteter Kompression ein wenig, genau wie bei JPG. Mit vernünftigen Einstellungen siehst du keinen Unterschied. Wandle immer vom Original um, nicht von einem schon komprimierten JPG.

Jetzt deine Seite prüfen

checkfrei prüft Moderne Bildformate und 68 weitere Punkte in einem Durchgang. Kostenlos und ohne Anmeldung.