So funktioniert die Bildkomprimierung: JPEG, PNG und WebP erklärt

Letzte Aktualisierung: 27. Juni 2026

Durch die Bildkomprimierung werden Dateien verkleinert, indem Informationen entfernt werden, die Ihr Auge nicht erkennen kann. Wenn Sie verstehen, * welche * Informationen jedes Format wegwirft, erfahren Sie, warum JPEG den Text unscharf macht, warum PNG groß bleibt und warum WebP und AVIF bei Fotos gewinnen. Hierbei handelt es sich um eine praktische Anleitung der tatsächlichen Algorithmen für einen Praktiker, nicht um einen Marketingvergleich.

Kurze Antwort: Wie funktioniert die Bildkomprimierung?

Jedes Webbildformat erledigt zwei Aufgaben: Pixelwerte vorhersagen, sodass wiederholte Daten zusammenfallen, und dann die Vorhersagefehler effizient kodieren. Verlustbehaftete Formate (JPEG, WebP verlustbehaftet, AVIF) quantisieren ebenfalls – sie runden hochfrequente Details ab, die Menschen kaum wahrnehmen. Verlustfreie Formate (PNG, WebP verlustfrei) überspringen die Quantisierung und behalten jedes Pixel bei.

Die praktische Entscheidung:

Lesen Sie den AVIF vs. WebP vs. JPEG-Vergleich für die Formatentscheidung; Dieser Artikel konzentriert sich darauf, was in jedem Encoder passiert.

Was ist der Unterschied zwischen verlustbehaftet und verlustfrei?

Bei der verlustfreien Komprimierung wird das Original Pixel für Pixel wiederhergestellt. Es funktioniert, indem es Redundanz findet: Läufe mit identischer Farbe, wiederholte Muster, vorhersehbare Farbverläufe. PNG, GIF und WebP-lossless verwenden diesen Ansatz. Die Decke ist die Entropie des Bildes – zufälliges Rauschen wird kaum komprimiert.

Bei der verlustbehafteten Komprimierung werden Informationen dauerhaft verworfen. Der Trick besteht darin, die Informationen zu verwerfen, die Ihr visuelles System am wenigsten wahrnimmt: feine Hochfrequenztexturen und subtile Farbunterschiede. JPEG, WebP-verlustbehaftet und AVIF tun dies. Der Vorteil sind weitaus kleinere Dateien – oft 5–10 Mal kleiner als verlustfreie Dateien für Fotos.

Die Formate nutzen spezifische Techniken:

Wie funktioniert eigentlich die JPEG-Komprimierung?

JPEG ist die kanonische verlustbehaftete Pipeline. Fünf Etappen laufen der Reihe nach ab:

Der Grund JPEG verwischt Text und scharfe Kanten: Hochfrequenzkoeffizienten tragen Kanten und die Quantisierung eliminiert sie. Wenn die Kurbelqualität niedrig genug ist, sehen Sie 8×8 blockierende Artefakte.

Sie können sehen, wie die Quantisierung an einem einzelnen Ausschnitt mit Federdetails wirkt. Derselbe 500×280-Bereich, codiert mit drei Qualitätsstufen, zeigt genau, was der Qualitätsschieberegler wegnimmt:

Bei q95 bleiben die Federwiderhaken deutlich erkennbar. Ab q75 beginnen die feinen Strähnen miteinander zu verschwimmen. Bei q50 sind die 8×8-Blöcke deutlich sichtbar und die Textur ist verschmiert – die Datei ist kleiner, aber der Verlust ist jetzt etwas, was ein Betrachter bemerkt.

Wie funktioniert die PNG-Komprimierung?

PNG ist verlustfrei und funktioniert völlig anders. Zwei Stufen:

1. Zeilenfilterung. Vor der Komprimierung wird jede Scanlinie gefiltert, um sie vorhersehbarer zu machen. PNG definiert fünf Filter (None, Sub, Up, Average, Paeth); Der Encoder wählt das Beste pro Zeile aus.

2. DEFLATE-Komprimierung. Die gefilterten Bytes durchlaufen LZ77 (wiederholte Sequenzen finden, durch Rückverweise ersetzen) plus Huffman-Codierung (Kurzcodes für gemeinsame Werte) – derselbe Algorithmus, den ZIP verwendet.

Tipps zur PNG-Optimierung, die tatsächlich helfen:

• Verwenden Sie PNG-8 (indiziert, ≤256 Farben) für flache Grafiken – weitaus kleiner als PNG-24.
• Entfernen Sie nicht benötigte Teile: EXIF, nicht verwendete ICC-Profile, den Alphakanal, wenn das Bild undurchsichtig ist.
• Komprimieren Sie erneut mit optipng oder pngquant (Letzteres konvertiert in 8-Bit mit Dithering für große Einsparungen bei Fotos, die PNG bleiben müssen).

Warum ist WebP kleiner als beide?

WebP verfügt über zwei unabhängige Modi:

• Verlustbehaftetes WebP leiht sich vom VP8-Videocodec. Es verwendet eine Blockvorhersage über den gesamten Frame (nicht nur innerhalb von 8×8-Blöcken wie JPEG), 4×4- und 8×8-Transformationen und eine bessere arithmetische Entropiekodierung. Das Ergebnis ist bei gleicher Qualität ungefähr 25–34 % kleiner als JPEG.
• Lossless WebP verwendet bis zu 13 Vorhersagemodi, eine Farbraumtransformation zur Dekorrelation von Kanälen und eine LZ77-Variante. Bei gleichem Inhalt ist es typischerweise ~20–26 % kleiner als PNG.

AVIF geht noch einen Schritt weiter, indem es die Intra-Frame-Tools des AV1-Videocodecs nutzt und die verlustbehaftete WebP um weitere 20–30 % übertrifft. Der Preis liegt in der Kodierungsgeschwindigkeit – AVIF ist langsam zu produzieren. Informationen zu Tools, die WebP und AVIF ausgeben, finden Sie im Leitfaden zu TinyPNG-Alternativen.

Wie misst man die Komprimierungsqualität?

Zwei Kennzahlen dominieren. Keines von beiden ist perfekt; beides nutzen.

PSNR ist leicht zu berechnen, ignoriert jedoch, was Menschen bemerken; SSIM korreliert besser mit der Wahrnehmung, unterschätzt jedoch ablenkende Artefakte (Klingeln in der Nähe von Text). Bei echten Produktentscheidungen beobachten Sie das Ergebnis bei der beabsichtigten Anzeigegröße, anstatt sich auf eine einzelne Zahl zu verlassen.

Die JPEG-Qualitätsstudie von Mozilla und die WebP-Komprimierungsstudie von Google veröffentlichen Methoden und Beispielbilder, wenn Sie Vergleiche reproduzieren möchten.

Welche Qualitätseinstellungen sollten Sie verwenden?

Beginnen Sie mit diesen Standardwerten und passen Sie sie dann an Ihre Inhalte an. Dabei handelt es sich um Richtlinien, nicht um Gesetze.

Zwei Regeln, die wichtiger sind als die Zahl:

• Vergleichen Sie mit übereinstimmender visueller Qualität, nicht mit übereinstimmenden Qualitätszahlen. AVIF q60, WebP q75 und JPEG q85 sehen ungefähr ähnlich aus. Ein Vergleich aller drei bei „q80“ ist bedeutungslos.
• Größe vor dem Komprimieren ändern. Ein auf JPEG q80 komprimiertes 4000-Pixel-Kameraoriginal ist immer noch ein 4000-Pixel-Download. Verkleinern Sie zunächst die Anzeigegröße – das spart mehr Bytes als jede Qualitätsoptimierung.

Die Größen-Qualitäts-Kurve zeigt, warum das 75–85-Band die übliche Empfehlung ist. Bei demselben Ausschnitt mit Federdetails nimmt die Dateigröße zunächst stark ab, wird dann flacher – und der sichtbare Qualitätsabfall beschleunigt sich unter q75. Über diesen Punkt hinaus zu gehen spart kleine Bytes, kostet aber echte Details:

Wie komprimiert man Bilder in der Praxis gut?

1. Beginnen Sie mit dem richtigen Master. Nehmen Sie RAW- oder hochwertige JPEG-Aufnahmen auf; Komprimierungsverbindungen, vermeiden Sie daher die Neukodierung einer Datei, die bereits verlustbehaftet ist.
2. Ändern Sie zuerst die Größe. Passen Sie vor jedem anderen Schritt das Feld auf der Seite an den Image Resizer an.
3. Format nach Inhalt auswählen. Foto → WebP/AVIF verlustbehaftet; Text/UI → PNG oder WebP verlustfrei.
4. Kodieren Sie mit einer vernünftigen Qualität. Beginnen Sie bei 75–80 für Fotos im Bildkompressor.
5. Metadaten für das öffentliche Web entfernen (EXIF für Archive beibehalten); Der Bildkonverter führt Formatierung und Metadaten in einem Durchgang durch.
6. Überprüfen Sie die Anzeigegröße und stellen Sie einen <picture>-Fallback bereit, damit alte Clients JPEG erhalten.

Häufige Fehler

• Erneutes Komprimieren bereits komprimierter JPEGs. Jede verlustbehaftete Kodierung fügt Artefakte hinzu. Behalten Sie einen Meister.
• Chroma-Unterabtastung für Text wird ignoriert. 4:2:0 ist für Fotos in Ordnung, verwischt jedoch farbigen Text. Verwenden Sie 4:4:4 (oder PNG) für textlastige Grafiken.
• Vertrauen Sie einer Qualitätsnummer über alle Formate hinweg. Die Nummer bedeutet in JPEG, WebP und AVIF unterschiedliche Bedeutungen.
• Optimierung vor der Größenänderung. Ändern Sie immer zuerst die Größe – das ist die größte Byte-Einsparung.
• Bereitstellung von AVIF/WebP ohne JPEG-Fallback. Alte Browser und E-Mail-Clients rendern nichts.

Verwandte Anleitungen

• AVIF vs. WebP vs. JPEG: Welches Format sollten Sie verwenden?
• Bilder ohne Qualitätsverlust komprimieren
• TinyPNG-Alternativen im Vergleich
• Checkliste zur Bild-SEO-Optimierung
• Vollständige Checkliste zur Bildoptimierung

Häufig gestellte Fragen

Wie funktioniert die Bildkomprimierung?

Die verlustfreie Komprimierung (PNG) findet und kodiert sich wiederholende Muster, ohne die Pixel zu verändern. Bei der verlustbehafteten Komprimierung (JPEG, WebP) werden hochfrequente Details verworfen, die das Auge am wenigsten wahrnimmt, und der Rest wird kodiert. Die Qualitätseinstellung steuert, wie viel verlustbehaftete Komprimierung verworfen wird.

Was ist der Unterschied zwischen verlustbehaftet und verlustfrei?

Lossless bewahrt jedes Pixel exakt und kehrt es perfekt um (PNG, verlustfreies WebP). Verlustbehaftet verwirft Details, um die Datei zu verkleinern, und kann nicht rückgängig gemacht werden (JPEG, verlustbehaftetes WebP). Verlustbehaftete Größengewinne bei Fotos; Verlustfreie Qualitätsgewinne für Grafiken und Master.

Welches Format komprimiert Fotos am besten?

AVIF (kleinste, moderne Browser), dann WebP, dann JPEG. PNG ist für Fotos am größten, da es verlustfrei ist. Für die Webbereitstellung ist WebP die sichere Standardeinstellung; AVIF, wenn Sie es kodieren können und Ihr Publikum moderne Browser verwendet.

Reduziert die Komprimierung die Qualität?

Verlustbehaftet ist das, aber bei einer Qualität von 80–85 ist der Verlust in der Anzeigegröße unsichtbar. Die Falle komprimiert eine verlustbehaftete Datei wiederholt neu (Generationsverlust), was zu Artefakten führt. Einmal von einem verlustfreien Master komprimieren.

Bildnachweis

• Cover – Quellcode auf einem Monitor, Foto von Leonid Altman auf Pexels (konvertiert in WebP).
• JPEG-Qualitätsleiter und Größen-zu-Qualitäts-Kurve – vom Autor anhand eines Ara-Federfotos (Pexels #36720663, Foto von Kaca Skok) erstellt, um die tatsächlich gemessene JPEG-Ausgabe über Qualitätsstufen hinweg anzuzeigen.