Bilder machen auf den meisten Websites den größten Teil der übertragenen Datenmenge aus. Wer das richtige Bildformat wählt, kann eine Seite deutlich schneller machen, ohne dass die Qualität sichtbar leidet. Die klassischen Formate JPEG und PNG begleiten das Web seit Jahrzehnten, doch mit WebP und AVIF stehen zwei modernere Kandidaten bereit, die bei vergleichbarer Bildqualität oft erheblich kleinere Dateien erzeugen. Dieser Ratgeber erklärt die Unterschiede praxisnah, zeigt, wann welches Format sinnvoll ist, und wie Sie mit dem picture-Element auch ältere Browser sauber bedienen.
Die vier Formate im Überblick
Jedes Format wurde für einen bestimmten Zweck entworfen. JPEG ist seit den frühen 1990er-Jahren der Standard für Fotos, weil es fließende Farbverläufe stark verkleinern kann. PNG kam etwas später als verlustfreies Format für Grafiken mit klaren Kanten und vor allem mit Transparenz. WebP und AVIF sind die jüngere Generation: Beide beherrschen sowohl verlustbehaftete als auch verlustfreie Kompression, Transparenz und Animation in einem einzigen Dateityp.
- JPEG: verlustbehaftet, ideal für fotorealistische Bilder mit vielen Farbnuancen.
- PNG: verlustfrei, stark bei Logos, Screenshots, Icons und Transparenz.
- WebP: moderner Allrounder, der JPEG und PNG in den meisten Fällen ablösen kann.
- AVIF: die effizienteste Kompression, basierend auf moderner Videocodec-Technik.
Kompression: Wer spart am meisten?
In der Praxis erzeugt AVIF bei gleicher wahrgenommener Qualität in der Regel die kleinsten Dateien. Gegenüber einem klassischen JPEG sind oft Einsparungen in der Größenordnung von rund der Hälfte möglich, in günstigen Fällen sogar mehr. WebP liegt typischerweise dazwischen und spart gegenüber JPEG häufig grob ein Viertel bis ein Drittel ein. Die genauen Werte hängen stark vom Motiv ab: Flächige Grafiken, Fotos mit viel Himmel oder Bilder mit weichen Verläufen profitieren anders als detailreiche Texturen.
Wichtig ist die Unterscheidung zwischen verlustbehafteter und verlustfreier Kompression. Verlustbehaftet bedeutet, dass Bildinformationen weggelassen werden, die das Auge kaum bemerkt. Verlustfrei behält jedes Pixel exakt bei, ist aber bei Fotos deutlich weniger sparsam. Faustregel: Fotos verlustbehaftet speichern, Grafiken mit harten Kanten und Text eher verlustfrei.
Sinnvolle Qualitätsstufen
Bei verlustbehafteten Formaten steuert ein Qualitätswert zwischen Dateigröße und Bildschärfe. Es lohnt sich, nicht blind die höchste Stufe zu nehmen, denn die letzten Prozentpunkte kosten überproportional viele Bytes.
- JPEG: Werte zwischen etwa 70 und 85 liefern für Webfotos meist einen guten Kompromiss.
- WebP: Qualität um 75 bis 80 ist für die meisten Fotos ausreichend.
- AVIF: bereits niedrigere Werte um 50 bis 65 wirken oft erstaunlich sauber, da der Codec effizienter arbeitet.
Am Ende entscheidet immer der direkte Sichtvergleich am echten Motiv. Stark verkleinerte Vorschaubilder vertragen aggressivere Kompression als große Hero-Bilder, bei denen Artefakte sofort auffallen.
Transparenz und Animation
Nicht jedes Format kann alles. PNG war lange die erste Wahl, wenn ein Bild einen durchsichtigen Hintergrund brauchte, etwa ein Logo über farbiger Fläche. WebP und AVIF beherrschen Transparenz ebenfalls und liefern dabei oft kleinere Dateien als PNG. JPEG dagegen kennt keine Transparenz, ein freigestelltes Motiv erhält bei JPEG immer einen festen Hintergrund.
Für Animationen war früher das betagte GIF üblich, das aber große Dateien und begrenzte Farben mit sich bringt. WebP und AVIF unterstützen animierte Inhalte deutlich effizienter. Für echte, längere Bewegtbilder ist allerdings ein Videoformat fast immer die bessere Wahl als ein animiertes Bild.
Browsersupport und das picture-Element
WebP wird heute praktisch von allen aktuellen Browsern verstanden. AVIF ist ebenfalls breit unterstützt, kann aber auf sehr alten Geräten oder Nischenbrowsern noch fehlen. Damit niemand vor einem kaputten Bild steht, liefert man modernere Formate mit einem Rückfallweg auf JPEG oder PNG aus. Das picture-Element ist dafür gemacht: Der Browser nimmt die erste Quelle, die er versteht.
<picture>
<source srcset="bild.avif" type="image/avif">
<source srcset="bild.webp" type="image/webp">
<img src="bild.jpg" alt="Beschreibung" width="800" height="500">
</picture>So bekommt ein moderner Browser das schlanke AVIF, ältere Geräte fallen auf WebP und schließlich auf das zuverlässige JPEG zurück. Die Angaben width und height am img verhindern dabei Layoutsprünge beim Laden.
Vergleichstabelle der Bildformate
| Format | Kompression | Transparenz | Animation | Browsersupport | Bester Einsatzzweck |
|---|---|---|---|---|---|
| JPEG | verlustbehaftet | nein | nein | universell | Fotos, Hero-Bilder |
| PNG | verlustfrei | ja | nein | universell | Logos, Icons, Screenshots |
| WebP | beides | ja | ja | sehr breit | Allround-Ersatz für JPEG/PNG |
| AVIF | beides | ja | ja | breit, wenige Ausnahmen | maximale Einsparung bei Fotos |
Praktische Empfehlung für den Alltag
Für die meisten Projekte ergibt sich eine einfache Strategie. Erzeugen Sie Bilder als AVIF und WebP und legen Sie ein JPEG oder PNG als Fallback bereit. Fotos werden verlustbehaftet gespeichert, Grafiken mit Text und harten Kanten verlustfrei. Wer keine Build-Pipeline mit automatischer Konvertierung hat, kann Bilder vor dem Hochladen einzeln umwandeln und optimieren.
- Große Fotos zuerst auf die tatsächlich benötigte Pixelgröße verkleinern, bevor man sie komprimiert.
- Verschiedene Qualitätsstufen testen und die kleinste ohne sichtbare Artefakte nehmen.
- Mehrere Auflösungen per
srcsetausliefern, damit Smartphones keine riesigen Dateien laden. - Bilder mit
loading="lazy"erst laden, wenn sie ins Sichtfeld kommen.
Wer einzelne Dateien schnell umwandeln oder die Größe prüfen möchte, findet im Bereich Webtools passende Helfer dafür. Weitere Beiträge rund um schnelle, saubere Websites gibt es in den News, und einen Überblick über alle Projekte bietet die Startseite.
Häufige Fragen
Soll ich JPEG komplett durch WebP ersetzen?
In den meisten Fällen ja, denn WebP liefert bei gleicher Qualität kleinere Dateien und wird von allen aktuellen Browsern unterstützt. Es ist trotzdem ratsam, ein JPEG als Fallback für sehr alte Geräte bereitzustellen, was über das picture-Element problemlos funktioniert.
Ist AVIF immer die beste Wahl?
AVIF komprimiert in der Regel am stärksten, das Kodieren dauert aber länger und die Unterstützung ist minimal geringer als bei WebP. Für maximale Einsparung bei Fotos ist AVIF ideal, in Kombination mit WebP und einem klassischen Fallback ist man auf der sicheren Seite.
Welches Format nehme ich für Logos und Icons?
Für Grafiken mit harten Kanten und Transparenz eignet sich PNG oder verlustfreies WebP. Bei einfachen Vektorgrafiken ist SVG oft die beste Wahl, weil es bei jeder Größe scharf bleibt und sehr klein sein kann.
Verliert ein Bild Qualität, wenn ich es mehrfach umwandle?
Bei verlustbehafteter Kompression entstehen mit jeder erneuten Speicherung zusätzliche Artefakte. Bewahren Sie daher immer eine verlustfreie Originaldatei auf und exportieren Sie die Webformate stets aus diesem Original, nicht aus einer bereits komprimierten Version.
Brauche ich noch GIF für Animationen?
Für kurze Bewegtbilder sind animiertes WebP oder AVIF fast immer kleiner und farbtreuer als GIF. Für längere oder hochwertige Animationen ist ein echtes Videoformat die deutlich effizientere Lösung.
Wie finde ich die beste Qualitätsstufe?
Speichern Sie das Motiv in mehreren Stufen und vergleichen Sie sie direkt nebeneinander in Originalgröße. Wählen Sie die niedrigste Stufe, bei der Sie keine störenden Artefakte sehen, denn so erreichen Sie die kleinste Datei ohne sichtbaren Qualitätsverlust.