Wie Bildkompression funktioniert: JPEG, PNG, WebP und AVIF erklärt

Die praktische Antwort

Bildkompression ist kein Wettbewerb, bei dem ein Format jedes Mal gewinnt. Sie ist ein Bündel von Kompromissen: welches Detail Sie verwerfen können, welches Detail exakt bleiben muss, wie viel CPU-Zeit Sie aufwenden können und wo die Datei nach dem Export funktionieren soll.

Nutzen Sie das als praktischen Ausgangspunkt:

• Nutzen Sie JPEG für Fotos, die maximale Kompatibilität benötigen, besonders bei E-Mail, Downloads, älteren Apps, Druckportalen und strengen Upload-Formularen.
• Nutzen Sie PNG für Screenshots, UI-Aufnahmen, Diagramme, Logos und transparente Grafiken, wenn Pixel exakt bleiben müssen.
• Nutzen Sie WebP als tägliches modernes Web-Format, wenn Sie kleinere Dateien als JPEG oder PNG mit breiter Browserunterstützung wollen.
• Nutzen Sie AVIF für große, stark frequentierte fotografische Bilder, wenn Ihre Seite WebP- oder JPEG-Fallbacks ausliefern kann und langsamere Kodierung verkraftet.

Das klingt einfach, aber die Details zählen. Ein Produktfoto, ein Passfoto, ein Software-Screenshot und ein transparentes Wasserzeichen sind alle „Bilder". Sie komprimieren sich nicht gleich.

Nach dem Zweck wählen, nicht nach der Dateiendung

Bevor Sie sich mit Codecs befassen, entscheiden Sie, was das Bild leisten soll:

Das ist auch der Grund, warum Format-Empfehlungen widersprüchlich wirken können. „Nutze AVIF, weil es kleiner ist" kann für ein Hero-Bild in einem Static-Site-Build ein guter Rat sein. Derselbe Rat kann schlecht sein für ein von Kunden hochgeladenes Bild, das von einem Behördenformular, einem E-Mail-Client oder einem älteren CMS akzeptiert werden muss.

Die zwei Kompressionsfamilien

Jedes Bildformat in diesem Leitfaden nutzt entweder verlustfreie Kompression, verlustbehaftete Kompression oder beides.

Verlustfreie Kompression entfernt mathematische Redundanz und rekonstruiert beim Dekodieren dieselben Pixel. Wenn ein Screenshot einen weißen Hintergrund, sich wiederholende Interface-Farben und wiederholte gerade Kanten hat, kann ein verlustfreies Format diese Muster kompakt beschreiben. PNG ist das klassische verlustfreie Web-Format. WebP hat ebenfalls einen verlustfreien Modus.

Verlustbehaftete Kompression verwirft dauerhaft Bildinformationen, um die Datei zu verkleinern. Der Trick besteht darin, jene Informationen zu verwerfen, die Menschen bei der endgültigen Anzeigegröße wahrscheinlich nicht bemerken. JPEG ist verlustbehaftet. WebP und AVIF können verlustbehaftet oder verlustfrei sein, aber die meisten Website-Auslieferungen nutzen ihre verlustbehafteten Modi für Fotos.

Der Fehler, den man vermeiden sollte, ist „verlustbehaftet" automatisch als schlecht und „verlustfrei" automatisch als professionell zu behandeln. Für ein 1600-px-Blogfoto kann ein sorgfältig komprimiertes verlustbehaftetes WebP auf der Seite unverändert aussehen und viel Bandbreite sparen. Für einen Software-Screenshot mit kleinem Menütext kann ein verlustbehafteter Export unscharf aussehen, auch wenn die Dateigröße toll wirkt.

Die vier Formate auf einen Blick

Das Muster ist nicht „neuer gewinnt immer". Neuere Formate können mehr Analyse betreiben und Daten effizienter packen, aber das kann Kodierungszeit, QA-Zeit und Fallback-Komplexität kosten.

Warum dieselbe Qualitätszahl nicht dieselbe Qualität ist

Ein JPEG mit Qualität 80 und ein WebP mit Qualität 80 nutzen nicht dieselbe Skala. Die Zahl wird an das jeweils eigene Modell des Encoders übergeben. Sie beeinflusst unterschiedliche interne Entscheidungen und wird von verschiedenen Werkzeugen unterschiedlich abgebildet.

Deshalb braucht praktische Bildkompression zwei Prüfungen:

1. Betrachten Sie das Bild in der Größe, in der es erscheinen wird. Ein Produktkarten-Thumbnail sollte als Produktkarten-Thumbnail beurteilt werden, nicht bei 400 Prozent Zoom.
2. Vergleichen Sie Bytes, nachdem das Bild die richtigen Abmessungen hat. Ein 5000-px-Kameraoriginal auf ein 1600-px-Webbild zu verkleinern spart in der Regel mehr, als einen Qualitätsregler zu tief zu ziehen.

Wenn Sie einen Ordner im Batch umwandeln, testen Sie einige harte Fälle, bevor Sie alles exportieren: ein Gesicht, einen Himmel, einen dunklen Schatten, einen textreichen Screenshot, eine transparente Kante und ein rauschiges Innenraumfoto.

JPEG: warum Fotos klein werden und warum Text hässlich wird

JPEG ist das alte Arbeitspferd für fotografische Bilder, weil es um das Verhalten von Fotos herum gebaut ist. Die Library of Congress hält fest, dass die JPEG-Familie häufig für vollfarbige und Graustufenbilder mit kontinuierlichen Tönen verwendet wird und der klassische Prozess eine 8×8-Blocktransformation nutzt. Im Klartext: JPEG zerlegt das Bild in kleine Blöcke, wandelt jeden Block in Frequenzinformationen um und quantisiert dann Details, die der Betrachter weniger wahrscheinlich bemerkt.

Das funktioniert gut für:

• Gesichter, Kleidung, Gebäude, Landschaften und Food-Fotos;
• natürliche Verläufe wie Himmel, Schatten und Hauttöne;
• Bilder, die keine transparenten Pixel benötigen;
• Dateien, die sich fast überall öffnen lassen müssen.

Es funktioniert schlecht für:

• kleinen Text in Screenshots;
• Icons und Logos mit harten Kanten;
• einfarbige Diagramme;
• Dateien, die wiederholt bearbeitet und neu exportiert werden;
• transparente Bilder, weil JPEG keinen Alphakanal hat.

Die erkennbarsten JPEG-Artefakte sind Blockkanten, Ringing um Text, Moskito-Rauschen um kontrastreiche Details und Banding in weichen Verläufen. Sie sind nicht zufällig. Sie sind die sichtbaren Nebenwirkungen blockbasierter verlustbehafteter Kompression.

Stärken

• Sehr breite Unterstützung in Browsern, Betriebssystemen, Apps, E-Mail-Clients, Formularen und bei Dienstleistern
• Effizient für Kamerafotos und andere kontinuierlich-tonige Bilder
• Schnell zu kodieren und zu dekodieren in üblichen Abläufen
• Einfach zu betrachten, anzuhängen, hochzuladen und zu teilen

Schwächen

• Keine Transparenzunterstützung
• Artefakte um Text, Kanten und einfarbige Grafiken
• Wiederholte verlustbehaftete Exporte können Schäden aufhäufen
• Oft größer als WebP oder AVIF bei ähnlicher sichtbarer Qualität für Webfotos

Wann man JPEG nutzt

Nutzen Sie JPEG, wenn Kompatibilität wichtiger ist als die letzten Kilobyte: Passfoto-Uploads, Dokumentenportale, E-Mail-Anhänge, Vendor-Portale, Druckshops, ältere CMS-Systeme und Fallback-<img>-Quellen. Nutzen Sie es auch, wenn die Datei hauptsächlich ein Foto ist und Transparenz nicht benötigt wird.

PNG: warum Screenshots scharf bleiben und warum Fotos riesig werden

PNG wurde für portable, verlustfreie Rasterbilder entworfen. Die W3C-PNG-Spezifikation deckt statisches PNG und animiertes PNG ab, und das Format unterstützt indizierte Farben, Graustufen, Truecolor und optionale Alpha-Transparenz.

Für die tägliche Website-Arbeit ist der Kernpunkt einfach: PNG behält die Pixel. Es kann Bildzeilen filtern, um sie vorhersehbarer zu machen, und dann das Ergebnis mit DEFLATE komprimieren. Wenn das Bild wiederholte Farben und scharfe Ränder hat, funktioniert das wunderbar.

Gute PNG-Kandidaten:

• Software-Screenshots mit kleinem Text;
• UI-Diagramme und Vergleichstabellen, die als Bilder exportiert werden;
• Logos, wenn SVG nicht verfügbar ist;
• transparente Overlays, Stempel und Wasserzeichen;
• Grafiken, die möglicherweise erneut bearbeitet werden.

Schlechte PNG-Kandidaten:

• Kamerafotos;
• große Website-Hero-Bilder;
• Produktfotos mit natürlicher Textur;
• Galeriebilder, bei denen Dateigröße mehr zählt als exakte Pixel.

Ein PNG-Foto ist oft riesig, weil PNG seine Aufgabe erfüllt. Es bewahrt Rauschen, feine Textur, winzige Sensorvariationen und jede subtile Farbveränderung, die ein verlustbehafteter Fotocodec vereinfachen würde.

Stärken

• Verlustfreie Pixelreproduktion
• Alphakanal-Transparenz
• Knackiger Text und harte Kanten
• Starke Kompression für einfarbige und sich wiederholende Grafiken
• Verlässliches Format für Editiermaster und Transparenz-Workflows

Schwächen

• Große Dateien für Fotografien
• Kein verlustbehafteter Modus in normalen PNG-Workflows
• Kann schwerer sein als WebP für transparente Web-Grafiken, wo WebP akzeptiert wird

Wann man PNG nutzt

Nutzen Sie PNG, wenn exakte Pixel zählen: Screenshots, UI-Dokumentation, Diagramme, einfache Grafiken und transparente Assets, die vorhersehbare Unterstützung brauchen. Nutzen Sie PNG nicht als Standard für Kamerafotos, es sei denn, Sie brauchen bewusst eine verlustfreie Arbeitskopie.

WebP: der praktische moderne Web-Standard

WebP ist nützlich, weil es mehrere Aufgaben in einem Format abdeckt. Googles Dokumentation beschreibt WebP als Format, das verlustbehaftete Kompression, verlustfreie Kompression, Transparenz, Animation, Metadaten und Farbprofile unterstützt. Das macht es flexibler als JPEG und für die Web-Auslieferung oft kleiner als PNG.

Verlustbehaftetes WebP basiert auf einer VP8-artigen prädiktiven Kodierung statt auf JPEGs älterem, ausschließlich DCT-basiertem Ablauf. Verlustfreies WebP nutzt eine andere Menge von Transformationen und Entropiekodierung. Das wichtige praktische Ergebnis ist, dass WebP oft ein guter Standard für Website-Bildbibliotheken ist: Blogfotos, Produktraster, Thumbnails, leichte Illustrationen und viele transparente Assets.

Aber WebP ist keine Magie, und es ist nicht die beste Datei, um sie überallhin zu schicken. Ein Browser kann WebP unterstützen, während ein E-Mail-Client, ein Upload-Formular, eine ältere Design-App, eine Social-Plattform oder ein Druck-Workflow es ablehnt. Deshalb sind JPEG und PNG als Liefer- oder Kompatibilitätsformate weiterhin wichtig.

Stärken

• Bei Fotos mit ähnlicher sichtbarer Qualität oft kleiner als JPEG
• Unterstützt Alpha-Transparenz
• Unterstützt verlustbehaftete und verlustfreie Modi
• Breite moderne Browserunterstützung
• Schnelle Kodierung im Vergleich zu AVIF

Schwächen

• Wird weiterhin von einigen E-Mail-Clients, Formularen, älteren Apps, CMS-Plugins und Druck-Workflows abgelehnt
• Kein echter Ersatz für SVG-Logos oder editierbare Design-Quelldateien
• Kann bei einigen großen fotografischen Bildern größer als AVIF sein

Wann man WebP nutzt

Nutzen Sie WebP für die meiste moderne Website-Bildauslieferung, wenn Sie die Seite kontrollieren. Es ist ein starker Standard für Blogbilder, Produktkarten-Fotos, Thumbnails und viele transparente Web-Assets. Halten Sie JPEG oder PNG bereit, wenn das Bild Ihre Website verlässt und in das System eines anderen wandert.

AVIF: die Option mit hoher Kompression, die eine Pipeline braucht

AVIF speichert AV1-kodierte Bilddaten in einem HEIF-basierten Bildformat. Die AVIF-Spezifikation enthält Unterstützung für SDR- und HDR-Bilder, Wide-Color-Gamut-Anwendungsfälle, Hilfsbilder wie Alpha und weitere fortgeschrittene Bildkodierungs-Features. web.dev merkt außerdem an, dass AVIFs Kompressionsgewinne vom Bildinhalt, den Encoder-Einstellungen und dem Qualitätsziel abhängen.

Für normale Website-Teams sieht die praktische Geschichte so aus: AVIF kann bei großen Fotos exzellent sein, ist aber eher ein Pipeline-Format als ein Format für beiläufiges Teilen. Es kann länger zum Kodieren dauern, die Vorschau-Unterstützung in älteren Werkzeugen kann hinterherhinken und Fallback-Handling zählt mehr.

Gute AVIF-Kandidaten:

• große Hero-Fotos;
• fotolastige Landingpages;
• redaktionelle Galerien;
• häufig ausgelieferte Bilder, die nach einer Kodierung viele Male bereitgestellt werden;
• Bilder, bei denen HDR, hohe Bittiefe oder Wide-Color-Gamut Teil des Workflows sind.

Schwache AVIF-Kandidaten:

• strenge Upload-Formulare;
• E-Mail-Anhänge;
• Bilder, die Teammitglieder in älteren Werkzeugen öffnen müssen;
• winzige Thumbnails, bei denen die Ersparnisse die Pipeline-Komplexität möglicherweise nicht rechtfertigen;
• Screenshots mit kleinem Text, es sei denn, Sie testen sorgfältig.

Stärken

• Oft exzellente Kompression für Fotografien und komplexe Bilder
• Alpha-Transparenz, HDR und Wide-Color-Gamut
• Nützlich als erste Quelle in einem modernen <picture>-Stack
• Starke Passung für Build-Zeit oder CDN-Bildgenerierung

Schwächen

• Kodierung kann langsam sein, besonders bei großen Stapeln
• Werkzeugunterstützung ist weniger vorhersehbar als bei JPEG, PNG oder WebP
• Braucht WebP-, JPEG- oder PNG-Fallback für sicherere Produktion

Wann man AVIF nutzt

Nutzen Sie AVIF, wenn das Bild groß und häufig genug ist, dass kleinere Bytes den zusätzlichen Pipeline-Aufwand rechtfertigen. Ein Hero-Bild auf einer stark frequentierten Startseite ist ein guter Kandidat. Ein 90-px-Icon, ein einmaliger E-Mail-Anhang oder ein Behörden-Upload-Formular normalerweise nicht.

Warum PNG bei Screenshots JPEG schlagen kann

Eine häufige Überraschung: Ein PNG-Screenshot kann kleiner und sauberer sein als ein JPEG-Screenshot.

Das passiert, weil Screenshots oft voller wiederholter Struktur sind. Ein weißer Dokumenthintergrund, eine graue Werkzeugleiste, gerader schwarzer Text, ein paar Icon-Farben und wiederholte UI-Abstände sind für verlustfreie Kompression leicht zu beschreiben. JPEG weiß nicht, dass der Text exakt bleiben soll. Es versucht, das Bild wie ein Foto zu vereinfachen, und das Ergebnis kann eine Datei sein, die nicht viel kleiner ist, aber um Buchstaben und Kanten schlechter aussieht.

Wenn der Screenshot überwiegend ein Foto ist, kann WebP oder JPEG gewinnen. Ist er überwiegend Interface, Text und einfarbig, beginnen Sie mit PNG oder verlustfreiem WebP.

Warum Fotos verlustbehaftete Kompression brauchen

Kamerafotos sind anders. Sie enthalten Sensorrauschen, feine Textur, weiche Schatten, unregelmäßige Verläufe und Millionen winziger Änderungen von Pixel zu Pixel. Verlustfreie Kompression hat weniger Wiederholung zum Ausnutzen und kann die Datei daher oft nicht ausreichend für die Web-Auslieferung reduzieren.

Verlustbehaftete Fotoformate funktionieren, weil einem Betrachter meist Motiv, Komposition, Farbe und wahrgenommene Schärfe wichtig sind, nicht jeder einzelne Originalpixel. Ein sorgfältig komprimiertes JPEG, WebP oder AVIF kann Informationen entfernen, die bei der endgültigen Anzeigegröße schwer zu erkennen sind.

Die Gefahr ist, zu weit zu gehen. Niedrige Qualitätseinstellungen können Haut flachdrücken, Stoff verwischen, Blattdetail zerstören, Blockkanten hinzufügen oder Banding in Himmel und Schatten erzeugen. Wenn diese Bereiche für das Bild wichtig sind, nutzen Sie eine höhere Qualitätseinstellung oder eine größere Anzeigedatei.

Fallbacks für moderne Web-Auslieferung nutzen

Wenn Sie eine Website kontrollieren, müssen Sie nicht nur ein Format wählen. Das übliche Produktionsmuster ist, das kleinste moderne Format zuerst auszuliefern und sicherere Fallbacks dahinter zu halten.

<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img
    src="/images/hero.jpg"
    alt="Nahaufnahme eines Produktfotos im natürlichen Licht"
    width="1200"
    height="800"
  >
</picture>

Der Browser nutzt die erste Quelle, die er unterstützt. AVIF-fähige Browser können die AVIF-Datei bekommen. Browser ohne AVIF können WebP versuchen. Ältere oder strengere Clients haben immer noch den JPEG-Fallback.

Nutzen Sie PNG statt JPEG als Fallback, wenn das Bild Transparenz oder exakten Text benötigt.

Ein praktischer Kompressions-Workflow

Für ein Bild:

1. Beginnen Sie mit der hochwertigsten Quelle, die Sie haben.
2. Verkleinern Sie zuerst auf die größte reale Anzeigegröße.
3. Wählen Sie das Format nach dem Bildzweck.
4. Exportieren Sie eine oder zwei Qualitätseinstellungen.
5. Vergleichen Sie das Ergebnis auf der tatsächlichen Seite oder am Upload-Ziel.
6. Behalten Sie die Master-Datei, damit Sie die veröffentlichte Kopie nicht neu komprimieren müssen.

Für einen Website-Ordner:

1. Wählen Sie einen repräsentativen Satz aus, bevor Sie den gesamten Stapel umwandeln.
2. Nehmen Sie Fotos, Screenshots, transparente Grafiken, Thumbnails und ein schwieriges dunkles Bild auf.
3. Testen Sie WebP als modernes Basisformat.
4. Testen Sie AVIF nur dort, wo Byte-Einsparungen zählen würden.
5. Behalten Sie JPEG- oder PNG-Fallbacks für Stellen, die sie brauchen.
6. Prüfen Sie die Dateigröße nach dem Verkleinern, nicht vorher.

PhotoTools kann bei den mittleren Schritten helfen. Nutzen Sie Größe ändern, wenn die Quelle für die Seite zu groß ist, Komprimieren, um Dateigröße und Qualität einzustellen, und die Format-Konverter, wenn ein Ziel einen bestimmten Dateityp verlangt. Die Umwandlung und Kompression geschehen in Ihrem Browser, das Bild wird während des Werkzeug-Workflows also nicht auf einen Server hochgeladen.

Wie man zwischen Formaten umwandelt

PhotoTools wandelt zwischen JPG, PNG, WebP, AVIF und HEIC direkt in Ihrem Browser um. Werfen Sie Ihre Bilder hinein, wählen Sie das Zielformat, sehen Sie sich das Ergebnis in der Vorschau an und laden Sie die neue Datei herunter.

Nutzen Sie den Konverter nach dem Ziel:

• Brauchen Sie eine Datei, die in fast jedem Formular oder jeder App funktioniert? Wandeln Sie in JPEG um.
• Brauchen Sie Transparenz oder exakte Screenshot-Pixel? Wandeln Sie in PNG oder verlustfreies WebP um.
• Brauchen Sie ein kleineres Webbild und die Seite akzeptiert es? Wandeln Sie in WebP um.
• Brauchen Sie maximale Kompression für eine kontrollierte Website-Pipeline? Testen Sie AVIF mit einem Fallback.

Eine letzte Regel rettet viel Bildqualität: Springen Sie nicht wiederholt zwischen verlustbehafteten Formaten hin und her. Wenn ein Foto als hochwertiges JPEG begann, kann die Umwandlung von JPEG in WebP für die Auslieferung in Ordnung sein. Dieses WebP zurück in JPEG zu wandeln, zu bearbeiten und erneut zu wandeln — dort häufen sich die Artefakte. Gehen Sie nach Möglichkeit auf das Original zurück.