JPEG, PNG, WebP, AVIF: Wähle das richtige Bildformat
Jedes Format hat Kompromisse. Hier erfährst du, wie du das richtige für deine Bilder wählst.
Du exportierst ein Bild. Die Optionen sind JPEG, PNG, WebP, GIF, AVIF, SVG und mehr.
Sie alle produzieren Bilder. Sie sind nicht austauschbar.
JPEG: Der Foto-Standard
Am besten für: Fotografien, komplexe Bilder mit Verläufen, alles mit vielen Farben.
Vermeiden für: Text, Logos, Screenshots, alles mit scharfen Kanten.
JPEG verwendet verlustbehaftete Kompression. Es verwirft Daten, die du wahrscheinlich in Fotos nicht bemerkst. Aber es kämpft mit scharfen Kanten – Text sieht verschwommen aus, Logos bekommen Artefakte.
Die Qualitätseinstellung ist wichtig. 80-85% ist normalerweise der Sweet Spot. Unter 60% werden Kompressionsartefakte offensichtlich.
PNG: Scharfe Kanten und Transparenz
Am besten für: Screenshots, Logos, Grafiken mit Text, Bilder, die Transparenz brauchen.
Vermeiden für: Große Fotografien (Dateien werden riesig).
PNG verwendet verlustfreie Kompression. Jedes Pixel wird exakt erhalten. Großartig für scharfe Kanten, schrecklich für Dateigröße bei komplexen Bildern.
PNG-8 (256 Farben) vs. PNG-24 (Millionen Farben). Verwende 8, wenn du damit durchkommst.
WebP: Der moderne Kompromiss
Am besten für: Fast alles im Web.
Vermeiden für: Wenn du maximale Kompatibilität mit alten Browsern brauchst.
WebP macht sowohl verlustbehaftete als auch verlustfreie Kompression, oft 25-35% kleiner als JPEG oder PNG bei derselben Qualität.
Browser-Unterstützung ist jetzt ausgezeichnet. Verwende WebP mit JPEG/PNG-Fallback für uralte Browser.
AVIF: Neuestes und Kleinstes
Am besten für: Maximale Kompression bei guter Qualität.
Vermeiden für: Browser-Unterstützungsanforderungen, Kodierungsgeschwindigkeits-Bedenken.
AVIF erreicht noch bessere Kompression als WebP. Aber Kodierung ist langsamer und Browser-Unterstützung wächst noch.
Wenn du Formate im Voraus generieren kannst (statische Seiten), verwende AVIF mit Fallbacks.
GIF: Bewegte Bilder, begrenzte Farben
Am besten für: Einfache Animationen, sehr einfache Grafiken.
Vermeiden für: Fotos (256-Farben-Limit), große Animationen (riesige Dateien).
GIFs Animations-Unterstützung hält es am Leben. Aber maximal 256 Farben bedeutet, dass Fotos schrecklich aussehen.
Für Animationen ist MP4- oder WebM-Video oft kleiner und bessere Qualität.
SVG: Vektorgrafiken
Am besten für: Icons, Logos, Illustrationen, alles, was skalieren muss.
Vermeiden für: Fotografien, komplexe Bilder.
SVG ist kein Bitmap-Format. Es ist XML, das Formen beschreibt. Skaliert auf jede Größe ohne Qualitätsverlust.
Für Icons und Logos ist SVG fast immer die richtige Wahl.
Schneller Entscheidungsleitfaden
| Inhaltstyp | Format | |------------|--------| | Foto fürs Web | WebP (JPEG-Fallback) | | Screenshot | PNG | | Logo/Icon | SVG | | Einfache Animation | GIF oder animiertes WebP | | Komplexe Animation | MP4/WebM-Video | | Maximale Qualität Archiv | PNG |
Häufige Fehler
PNG für alle Fotos. Ein 10MB-PNG könnte ein 500KB-JPEG ohne sichtbaren Unterschied sein.
JPEG für Screenshots. Text wird verschwommen. Verwende PNG.
WebP 2026 nicht verwenden. Browser-Unterstützung ist ausgezeichnet. Verwende es.
JPEG wiederholt speichern. Jedes Speichern fügt Kompressionsartefakte hinzu. Behalte Quelldateien und exportiere einmal.
Formatwahl ist bildspezifisch. Fotos sind JPEG/WebP. Grafiken sind PNG/SVG. Verstehe die Kompromisse und wähle entsprechend.