🗜️
← Zurück zu Anleitungen

Ein vollständiger Leitfaden zu Web-Bildformaten – PNG, JPEG, WebP, AVIF

· Tags: image-formats, png, jpeg, webp, avif, web-development, compression

Ein vollständiger Leitfaden zu Web-Bildformaten

Die Wahl des richtigen Bildformats ist eine der einfachsten und zugleich wirkungsvollsten Entscheidungen, die Sie für die Performance Ihrer Website treffen können. Jedes Format gewichtet Dateigröße, visuelle Qualität, Feature-Unterstützung und Browserkompatibilität unterschiedlich. Dieser Leitfaden erläutert die vier wichtigsten Web-Bildformate, damit Sie für jedes Bild, das Sie veröffentlichen, eine fundierte Wahl treffen können.

JPEG: Der universelle Allrounder

JPEG, kurz für Joint Photographic Experts Group, ist seit über drei Jahrzehnten das dominierende Web-Bildformat. Es verwendet verlustbehaftete Komprimierung, um kleine Dateigrößen zu erreichen, indem Farbinformationen verworfen werden, die das menschliche Auge kaum wahrnimmt.

Stärken:

  • Universelle Browserunterstützung auf jedem Gerät und in jedem Browser, der je hergestellt wurde.
  • Hervorragende Komprimierung für fotografische Inhalte mit sanften Farbverläufen.
  • Einstellbare Qualität von 0 bis 100 ermöglicht eine fein abgestufte Kontrolle über die Dateigröße.
  • Hardware-Dekodierungsbeschleunigung auf praktisch allen Geräten verfügbar.

Schwächen:

  • Keine Transparenzunterstützung. JPEG kann keine Bilder mit transparenten Hintergründen rendern.
  • Verlustbehaftete Komprimierung erzeugt bei niedrigen Qualitätseinstellungen sichtbare Artefakte, insbesondere Blockbildung an Kanten und Banding in Farbverläufen.
  • Schlechte Leistung bei Bildern mit scharfem Text, einfarbigen Flächen oder harten Kanten.

Beste Anwendungsfälle: Fotos, komplexe Illustrationen mit vielen Farben, Produktbilder, Hero-Banner und jedes Bild, bei dem universelle Kompatibilität entscheidend ist.

PNG: Präzision und Transparenz

PNG, oder Portable Network Graphics, wurde als freie und offene Alternative zu GIF entwickelt. Es verwendet verlustfreie Komprimierung, was bedeutet, dass jedes Pixel exakt so reproduziert wird, wie es im Original erschien.

Stärken:

  • Verlustfreie Komprimierung garantiert null Qualitätsverlust, selbst nach wiederholtem Speichern.
  • Vollständige Alpha-Transparenzunterstützung ermöglicht weiche Kanten und durchsichtige Hintergründe.
  • Hervorragende Komprimierung für Bilder mit großen einfarbigen Flächen, wie Screenshots und flache Grafiken.
  • Unterstützt 24-Bit-Farbe (16,7 Millionen Farben) und 8-Bit-indizierte Farbe (256 Farben) für kleinere Dateigrößen.

Schwächen:

  • Dateigrößen sind für fotografische Inhalte deutlich größer als bei JPEG – oft zwei bis fünf Mal größer.
  • Keine native Animationsunterstützung. Für animierte Inhalte verwenden Sie stattdessen GIF oder WebP.
  • Als PNG gespeicherte Kamera- und Handyfotos verschwenden erhebliche Bandbreite.

Beste Anwendungsfälle: Logos, Icons, Screenshots, UI-Mockups, Bilder mit Text, Grafiken, die Transparenz benötigen, und jedes Szenario, in dem pixelgenaue Reproduktion unverhandelbar ist.

WebP: Der moderne Alleskönner

WebP ist ein modernes Bildformat, das von Google entwickelt wurde. Es wurde entwickelt, um JPEG, PNG und GIF durch ein einziges Format zu ersetzen, das alle wichtigen Anwendungsfälle effizienter abdeckt.

Stärken:

  • Unterstützt sowohl verlustbehaftete als auch verlustfreie Komprimierung in einem einzigen Format.
  • Verlustbehaftetes WebP ist bei gleichwertiger visueller Qualität typischerweise 25 bis 35 Prozent kleiner als JPEG.
  • Verlustfreies WebP ist 20 bis 25 Prozent kleiner als PNG.
  • Unterstützt Alpha-Transparenz in sowohl verlustbehaftetem als auch verlustfreiem Modus.
  • Unterstützt Animation und ist damit ein direkter Ersatz für GIF mit deutlich kleineren Dateigrößen.
  • Breite Browserunterstützung: Chrome, Firefox, Edge und Safari 14 und neuer.

Schwächen:

  • Ältere Browser, einschließlich Internet Explorer und Safari 13 und älter, unterstützen WebP nicht.
  • Die Encodierungsgeschwindigkeit ist langsamer als bei JPEG, obwohl die Dekodierungsgeschwindigkeit vergleichbar ist.
  • Nicht alle Bildbearbeitungswerkzeuge unterstützen WebP nativ.

Beste Anwendungsfälle: Web-Bilder, bei denen die Dateigröße Priorität hat, moderne Webanwendungen, Ersatz von JPEG und PNG durch ein einziges Format für Browser, die es unterstützen.

AVIF: Die nächste Generation

AVIF (AV1 Image File Format) ist der neueste Teilnehmer und basiert auf dem AV1-Video-Codec. Es bietet die beste Komprimierungseffizienz aller breit unterstützten Bildformate.

Stärken:

  • Bis zu 50 Prozent kleiner als JPEG bei gleicher visueller Qualität.
  • Bis zu 30 Prozent kleiner als WebP.
  • Unterstützt verlustbehaftete und verlustfreie Komprimierung.
  • Vollständige Transparenz- und HDR-Unterstützung mit großem Farbraum.
  • Lizenzfrei und offener Standard.

Schwächen:

  • Die Browserunterstützung wächst noch. Chrome und Firefox unterstützen AVIF; Safari fügte Unterstützung in Version 16 hinzu.
  • Das Encodieren ist rechenintensiv, wodurch die Komprimierung langsamer ist als bei JPEG oder WebP.
  • Begrenzte Unterstützung in Bildbearbeitungs- und Design-Tools.
  • Ohne dedizierte Hardware nicht für Echtzeit- oder Hochvolumen-Encodierungsszenarien geeignet.

Beste Anwendungsfälle: Modernste Web-Projekte, die auf moderne Browser abzielen, Szenarien, in denen maximale Komprimierung erforderlich ist, HDR-Inhalte und großflächige Bildauslieferung, bei der Encodierungszeit akzeptabel ist.

Seitenvergleichender Formatvergleich

| Feature | JPEG | PNG | WebP | AVIF | |---------|------|-----|------|------| | Komprimierungstyp | Verlustbehaftet | Verlustfrei | Verlustbehaftet und verlustfrei | Verlustbehaftet und verlustfrei | | Transparenz | Nein | Ja (Alpha) | Ja (Alpha) | Ja (Alpha) | | Animation | Nein | Nein | Ja | Ja | | HDR-Unterstützung | Nein | Nein | Nein | Ja | | 24-Bit-Farbe | Ja | Ja | Ja | Ja | | Relative Dateigröße | Ausgangsbasis | 200-500% von JPEG | 65-80% von JPEG | 50-70% von JPEG | | Browserunterstützung | Universell | Universell | 95%+ der Nutzer | 85%+ der Nutzer | | Encodierungsgeschwindigkeit | Schnell | Mäßig | Mäßig | Langsam |

So wählen Sie ein Format

Befolgen Sie diesen Entscheidungsbaum für jedes Bild, das Sie veröffentlichen:

  • Ist es ein Foto ohne Transparenzanforderungen? Verwenden Sie JPEG oder AVIF für maximale Komprimierung.
  • Benötigt es Transparenz oder enthält es Text und scharfe Kanten? Verwenden Sie PNG für universelle Unterstützung oder WebP für moderne Browser.
  • Ist Animation erforderlich? Verwenden Sie WebP anstelle von GIF für deutlich kleinere Dateien.
  • Ist absolut maximale Komprimierung das Ziel? Verwenden Sie AVIF, wenn Ihr Publikum moderne Browser verwendet.

Komprimieren Sie Ihre Bilder im ursprünglichen Format

Sobald Sie das richtige Format für Ihren Anwendungsfall gewählt haben, optimieren Sie die Dateigröße, ohne in ein anderes Format zu konvertieren. Unser kostenloser Online-Bildkomprimierer unterstützt PNG, JPEG, WebP und AVIF – laden Sie Ihr Bild hoch und laden Sie eine komprimierte Version herunter, die dem ursprünglichen Format treu bleibt. Keine qualitätszerstörenden Konvertierungsketten, keine unnötigen Schritte.