WebP gegenüber AVIF gegenüber PNG gegenüber JPEG Die Auswahl von Bildformaten für das Web

Die Auswahl des falschen Bildformats ist einer der leise leistungsschädlichen Faktoren. Ein PNG statt ein JPEG führt zu einer Erhöhung der Seitenlast um 3–5×. Die Bereitstellung von JPEG im Jahr 2025, wenn WebP die gleiche Aufgabe mit 30% geringeren Dateigrößen erledigen könnte, ist ein Verlust an Bandbreite. Die Entscheidungen sind nicht komplex – man benötigt nur eine klare Karte.

Hier wird erklärt, wie sich jeder Format funktioniert, wann es verwendet wird, und wie man zwischen ihnen umschaltet, mithilfe eines Bildformat-Konverters oder Befehlszeilentools.

JPEG

JPEG war seit den 1990er Jahren der Standardformat für Fotografien und hält diesen Status bis heute. Es verwendet eine verlustbehaftete Kompression: während der Kodierung werden einige Bildinformationen verworfen, aber bei Qualitätswerten von 75–85 ist der Unterschied für den Menschenaugen nicht sichtbar. JPEG unterstützt keine Transparenz.

Am besten für: Fotos, Produktbilder, Illustrationen mit komplexen Gradienten, jegliche fotografische Inhalte ohne Transparenzebedarf.

Vermeiden bei: Wenn ein transparenter Hintergrund erforderlich ist oder das Bild Text und scharfe Kanten enthält, bei denen Kompressionsfehler sichtbar werden.

PNG

PNG verwendet eine verlustfreie Kompression – jeder Pixel wird exakt wie kodiert erhalten. Es unterstützt einen vollständigen Alpha-Kanal, was es zur richtigen Wahl für alles macht, das Transparenz erfordert: Logos, UI-Screenshots, Icons, Overlays und Bilder mit Text.

Der Preis dafür ist die Dateigröße. PNG ist üblicherweise 2–5× größer als ein vergleichbares JPEG für fotografisches Inhalt. Der häufigste Fehler: ein Foto als PNG zu speichern, weil es „besser aussieht“. Es sieht nicht besser aus – es wurde nur noch nicht komprimiert. Wenn das Foto keine Transparenz benötigt, ist PNG das falsche Format.

Am besten für: Screenshots, UI-Assets, Logos, Icons, Bilder mit Text, alles, was Transparenz erfordert.

Vermeiden bei: Die Bereitstellung eines Fotos, das keine Transparenz benötigt.

WebP

WebP wurde 2010 von Google veröffentlicht und hat nun nahezu universelle Browserunterstützung (97%+ im Jahr 2025). Es unterstützt sowohl verlustbehaftete als auch verlustfreie Kompression, volle Transparenz und Animation – es ist grundsätzlich ein Superset der JPEG- und PNG-Funktionen in einem einzigen Format.

Die Kompression ist um 25–35% besser als JPEG bei vergleichbarer visueller Qualität. Bei verlustfreien Anwendungsfällen sind WebP-Dateien konsistenter kleiner als PNG. Es gibt keine mehrwertige Kompatibilitätsgrundlage, um WebP auf modernen Websites zu vermeiden.

Am besten für: Allgemeiner Ersatz für JPEG und PNG. Fotos, UI-Assets, an allen Stellen, wo zuvor die älteren Formate standardmäßig verwendet wurden.

AVIF

AVIF leitet sich vom AV1-Video-Codec ab und bietet die beste Kompression aller bekannten Web-Bildformate – typischerweise 20–50% kleiner als WebP bei vergleichbarer visueller Qualität. Es unterstützt HDR-Farben, breite Farbpalette und einen Alpha-Kanal für Transparenz.

Die Browserunterstützung liegt weltweit bei etwa 93%. Der Hauptwiderstand ist die Codierungsgeschwindigkeit: AVIF-Codierung ist erheblich langsamer als WebP, obwohl die Werkzeuge sich schnell verbessern. In der Regel generieren Sie AVIF offline und dienen sie statisch – die Codierungszeit beeinflusst nicht die Ladezeit der Seite.

Am besten für: Hochwertige Fotos, Hauptbilder, an allen Stellen, wo die Vorteile der Kompression die Offline-Codierungsdauer übersteigen.

GIF, SVG und die anderen

GIF ist funktional veraltet. Sein Grenzwert von 256 Farben und schlechte Kompression machten es für Animationen mittelmäßig und für Fotografien völlig nutzlos. WebP-Animation, CSS-Animation, und <video> erzeugen bessere Ergebnisse mit kleineren Größen. Verwenden Sie GIF nicht in neuen Projekten.

SVG ist kein Rasterformat – es ist XML-Markup, das Vektorformen beschreibt. Verwenden Sie es für Symbole, Logos und linienbasierte Illustrationen, die sich bei beliebigen Größen klar skalieren und nicht verschwimmen. Es ist nicht geeignet für Fotografien oder photorealistische Bilder.

Überblick über die Format-Vergleiche

Format	Verlustbehaftet	Transparenz	Browserunterstützung	Am besten für	Dateigröße im Vergleich zu JPEG
JPEG	Ja	NEIN	100%	Fotos, Gradienten	Grundlage
PNG	NEIN	Ja	100%	Screenshots, UI, Icons	2–5× größer
WebP	Beide	Ja	97%+	Allgemeiner moderner Ersatz	ca. 30% kleiner
AVIF	Beide	Ja	93%+	Hochwertige Fotos	ca. 45% kleiner
GIF	NEIN	Ja (1-Bit)	100%	Nur für Legacy-Animationen	Vermeiden
SVG	N / A	Ja	100%	Symbole, Logos, Illustrationen	N / A

Wie man zwischen den Formaten umschaltet

Der schnellste Weg, um Bilder ohne Installation umzuwandeln: der IO Tools Bildkonverter behandelt JPEG, PNG, WebP, AVIF, GIF und mehr – laden Sie Ihre Datei hoch, wählen Sie das Ausgabeformat, laden Sie herunter. Er funktioniert vollständig im Browser für Formate, die clientseitig unterstützt werden, und verwendet Serverseitige Verarbeitung für AVIF.

Für Batch-Verarbeitung oder Build-Pipelines, ffmpeg und ImageMagick sind die Standardwerkzeuge:

# Convert to WebP (ffmpeg)
ffmpeg -i input.jpg -quality 85 output.webp

# Convert to AVIF (ffmpeg)
ffmpeg -i input.jpg -c:v libaom-av1 -crf 30 output.avif

# Convert to WebP (ImageMagick)
convert input.png -quality 85 output.webp

# Batch convert all JPEGs to WebP
for f in *.jpg; do convert "$f" -quality 85 "${f%.jpg}.webp"; done

Nach der Umwandlung können Sie die Dateigröße weiter reduzieren mit dem IO Tools Bildkompressor – nützlich, um zusätzliche Bytes vor der Bereitstellung zu sparen, ohne eine weitere Umwandlungs-Runde durchzuführen.

Modernes Format bereitstellen mit Fallback

Der <picture> Element ermöglicht es, AVIF und WebP an Browsern mit entsprechender Unterstützung zu liefern und auf JPEG zurückzufallen, falls diese nicht unterstützt werden. Der Browser wählt das erste <source> Format, das es unterstützt:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero image" width="1200" height="600">
</picture>

So erhalten Sie maximale Kompression, wo sie unterstützt wird, ohne Kompatibilität zu beeinträchtigen. AVIF für Browser, die es unterstützen, WebP als zweite Wahl, JPEG als sichere Rückkehr. Der <img> Tag wird von Suchmaschinen und Screenreadern gelesen – füllen Sie den Text entsprechend aus. alt Die Entscheidung im Überblick

Foto ohne Transparenz

• → WebP (oder AVIF + WebP-Fallback, falls Sie hart optimieren) Transparenter Hintergrund
• → WebP (PNG, falls maximale Kompatibilität erforderlich ist) Logo, Icon, Illustration
• → SVG UI-Screenshot oder Diagramm
• → PNG Maximale Browserkompatibilität
• → JPEG + PNG Maximale Leistung
• → AVIF + WebP-Fallback über Die kurze Antwort: Standardmäßig WebP für Fotos und UI-Assets, SVG für alles, was Vektor ist. Fügen Sie AVIF hinzu, wenn Leistung kritisch ist. Wählen Sie JPEG und PNG, wenn ein spezifisches Argument vorliegt – nicht als Standard. <picture>

WebP gegenüber AVIF gegenüber PNG gegenüber JPEG: Die Auswahl von Bildformaten für das Web 1 <source> bei kritischen Leistungsanforderungen. Wählen Sie JPEG und PNG, wenn Sie einen konkreten Grund haben – nicht als Standardwahlen.

Das könnte Ihnen auch gefallen