WebP, AVIF, JPG oder PNG: Welches Bildformat wofür?

Welches Bildformat das richtige ist, hängt vom Motiv ab: Fotos speichern Sie am besten als AVIF oder WebP mit JPG als Rückfall, Screenshots und Grafiken mit Transparenz als PNG oder verlustfreies WebP, Logos und Icons als SVG. AVIF und WebP sind bei Fotos meist deutlich kleiner als JPG bei gleicher sichtbarer Qualität und werden von allen aktuellen großen Browsern unterstützt. Mit dem picture-Element liefern Sie mehrere Formate aus, und der Browser nimmt das beste, das er kennt.

Grundbegriffe wie Pixel, Auflösung und verlustbehaftete Kompression erklärt der Ratgeber Pixel, Auflösung und Bildformate.

Die vier Formate auf einen Blick

JPG: der universelle Klassiker

JPG ist seit Jahrzehnten das Standardformat für Fotos und wird von jedem Programm, jedem Browser und jedem Gerät geöffnet. Es arbeitet verlustbehaftet: Beim Speichern werden Bildinformationen verworfen, die das Auge wenig vermisst. Bei Fotos mit weichen Übergängen funktioniert das gut. An harten Kanten, bei Text oder einfarbigen Flächen entstehen dagegen sichtbare Artefakte, kleine Blöcke und Schlieren.

Einsatz heute: als Rückfallformat und dort, wo maximale Kompatibilität zählt, etwa bei Bildern für E-Mails oder für Downloads.

PNG: verlustfrei und mit Transparenz

PNG speichert jedes Pixel exakt. Das ist ideal für Screenshots, Diagramme mit Schrift, Grafiken mit wenigen Farben und Bilder, die einen transparenten Hintergrund brauchen. Bei Fotos dagegen werden PNG-Dateien sehr groß, oft ein Vielfaches eines vergleichbaren JPG.

Ein Tipp für Grafiken: PNG mit reduzierter Farbpalette, auch PNG-8 genannt, kann Dateien bei einfachen Motiven stark verkleinern. Viele Optimierungswerkzeuge machen das automatisch.

Einsatz heute: Screenshots, Grafiken mit Text, Bilder mit Transparenz, wenn kein modernes Format möglich ist.

WebP: der Allrounder

WebP wurde von Google entwickelt und kann sowohl verlustbehaftet als auch verlustfrei komprimieren, unterstützt Transparenz und Animation. Bei Fotos erreicht es in der Regel kleinere Dateien als JPG, bei Grafiken oft kleinere als PNG. Es kodiert schnell und wird von allen aktuellen Browsern unterstützt.

Eine Einschränkung: Die maximale Bildgröße liegt bei etwas über 16.000 Pixeln pro Seite, was für Websites praktisch nie eine Rolle spielt. Ältere Bildbearbeitungsprogramme können WebP teilweise nicht öffnen, was beim Weiterverarbeiten stört.

Einsatz heute: Standardformat für Fotos und Grafiken, besonders dort, wo Bilder schnell erzeugt werden müssen.

AVIF: maximale Einsparung

AVIF basiert auf dem Videocodec AV1 und erreicht bei Fotos häufig die kleinsten Dateien, gerade bei mittleren und niedrigen Qualitätsstufen. Es unterstützt Transparenz, große Farbtiefen und HDR. Der Preis ist die Rechenzeit: Das Kodieren dauert deutlich länger als bei WebP oder JPG. Für Websites mit vielen Bildern, die beim Hochladen in Echtzeit umgewandelt werden, kann das ein Engpass sein. Bei vorab erzeugten Bildern, etwa in einem Build-Prozess, fällt es kaum ins Gewicht.

Bei sehr feinen Details und Texturen glättet AVIF auf niedrigen Qualitätsstufen manchmal sichtbar. Prüfen Sie das Ergebnis deshalb an Haut, Haaren, Stoffen und Laub.

Einsatz heute: erste Wahl für Fotos, besonders für große Titelbilder, mit WebP oder JPG als Rückfall.

Und SVG?

SVG ist kein Rasterformat, sondern beschreibt Formen, Linien und Text als Vektoren. Für Logos, Icons, Diagramme und einfache Illustrationen ist es fast immer die beste Wahl: gestochen scharf in jeder Größe, oft nur wenige Kilobyte groß und per CSS einfärbbar. Für Fotos eignet es sich nicht. Details erklärt der Artikel SVG im Webdesign.

Welches Format für welches Motiv?

Mehrere Formate mit dem picture-Element

Sie müssen sich nicht für ein Format entscheiden. Das picture-Element bietet dem Browser mehrere Quellen an, er nimmt die erste, die er unterstützt:

<picture>
  <source srcset="/bilder/farbkreis.avif" type="image/avif">
  <source srcset="/bilder/farbkreis.webp" type="image/webp">
  <img src="/bilder/farbkreis.jpg" alt="Zwölfteiliger Farbkreis"
       width="1200" height="800" loading="lazy">
</picture>

Kombiniert mit srcset für verschiedene Bildbreiten bekommt jedes Gerät das passende Format in der passenden Größe. Viele Content-Management-Systeme, Bilddienste und Build-Werkzeuge erzeugen diese Varianten automatisch.

Die richtige Qualitätsstufe

Die Qualitätswerte der Formate sind nicht direkt vergleichbar. Ein Wert von 80 bei JPG entspricht nicht einem Wert von 80 bei AVIF. Gehen Sie deshalb pragmatisch vor:

1. Ein typisches Bild in mehreren Stufen exportieren.
2. Die Ergebnisse bei 100 Prozent Ansicht nebeneinander vergleichen, besonders an Kanten, Verläufen und Hauttönen.
3. Die niedrigste Stufe wählen, bei der kein Unterschied auffällt.
4. Diese Einstellung als Vorlage für alle Bilder dieser Art speichern.

Bei JPG und WebP liegt dieser Punkt bei vielen Fotos im Bereich zwischen 70 und 85. AVIF erreicht eine vergleichbare Wirkung meist mit niedrigeren Zahlenwerten.

Bestehende Bilder umstellen

Wer eine bestehende Website auf moderne Formate umstellt, muss nicht jedes Bild von Hand neu exportieren:

• Content-Management-Systeme bieten oft eine eingebaute Umwandlung oder Erweiterungen, die beim Hochladen WebP- oder AVIF-Varianten erzeugen und das HTML anpassen.
• Build-Werkzeuge statischer Websites wandeln Bilder beim Erstellen der Seite automatisch um und schreiben passende picture-Elemente.
• Bilddienste und CDNs liefern auf Wunsch das Format aus, das der jeweilige Browser unterstützt, ohne dass Sie mehrere Dateien pflegen.
• Kommandozeilen-Werkzeuge wie die Referenz-Encoder der Formate oder verbreitete Bildbibliotheken eignen sich für die Stapelverarbeitung vieler Dateien.

Wichtig beim Umstellen: Wandeln Sie möglichst aus dem Original um, nicht aus einem bereits stark komprimierten JPG. Jede weitere verlustbehaftete Kompression verstärkt vorhandene Artefakte.

Transparenz, Farbtiefe und Farbraum

Transparenz war lange ein Hauptgrund für PNG. Heute beherrschen WebP und AVIF sie ebenfalls, bei Fotos mit freigestelltem Motiv oft bei einem Bruchteil der Dateigröße. Für Bilder mit hoher Farbtiefe oder HDR-Inhalten ist AVIF derzeit das am breitesten unterstützte Webformat.

Unabhängig vom Format sollten Bilder fürs Web im Farbraum sRGB gespeichert werden. Bilder in größeren Farbräumen wie Adobe RGB wirken in Browsern und Apps ohne Farbmanagement sonst blass. Wer bewusst mit dem erweiterten Farbraum Display P3 arbeitet, sollte das Profil einbetten und das Ergebnis auf mehreren Geräten prüfen.

Format und Ladezeit

Bilder sind auf den meisten Websites die größten Dateien. Ein Wechsel von JPG zu WebP oder AVIF ist deshalb einer der wirksamsten Schritte für eine schnellere Seite, besonders beim Titelbild, das über den Messwert Largest Contentful Paint entscheidet. Wie Bildformat, Bildgröße und Schriften zusammen auf die Core Web Vitals wirken, erklärt der Artikel Wie Bilder und Schriften die Ladezeit beeinflussen.

Kurz zusammengefasst

• Fotos: AVIF oder WebP, JPG als Rückfall.
• Grafiken mit Text oder Transparenz: PNG oder verlustfreies WebP.
• Logos, Icons, Diagramme: SVG.
• Animationen: Video statt GIF.
• Qualität am eigenen Material prüfen, nicht nach Zahlen.