Ein Bild „ohne Qualitätsverlust“ zu komprimieren kann zwei Dinge bedeuten. Technisch kann es verlustfrei komprimiert werden, sodass nach dem Dekodieren exakt dieselben Pixelwerte wiederhergestellt werden. Im Alltag meint man oft etwas anderes: Die Datei soll deutlich kleiner werden, ohne dass der Qualitätsverlust für das Auge störend sichtbar ist.
Für Webbilder ist die zweite Frage häufig wichtiger. Das Ziel lautet nicht „maximale Kompression“, sondern die kleinste Datei, die im tatsächlichen Nutzungskontext noch gut aussieht.
Vor der Kompression: Abmessungen prüfen
Eine 6.000 Pixel breite Kameradatei für ein 800 Pixel breites Artikelbild zu komprimieren ist ineffizient. Selbst ein modernes Format muss unnötige Pixel speichern.
Deshalb sollte zuerst die benötigte Bildauflösung bestimmt und das Bild mit dem Bildgrößen-Werkzeug auf realistische Abmessungen gebracht werden.
Oft spart dieser Schritt mehr Daten als eine aggressive Qualitätsreduktion.
Verlustfreie Kompression
Verlustfreie Verfahren erhalten die dekodierten Pixel exakt.
Typische Einsatzfälle:
- Screenshots,
- Diagramme,
- Logos als Rasterbild,
- Grafiken mit Text,
- Zwischenstände für weitere Bearbeitung.
PNG ist ein klassisches verlustfreies Format. WebP und AVIF können ebenfalls verlustfreie Modi unterstützen.
Verlustfrei heißt allerdings nicht automatisch „klein“. Ein Foto mit Millionen feiner Farbunterschiede kann verlustfrei sehr groß bleiben.
Verlustbehaftete Kompression
Verlustbehaftete Verfahren reduzieren Informationen, die für den vorgesehenen Gebrauch weniger wichtig erscheinen.
Bei Fotos ist das sehr effizient, weil natürliche Motive viele feine Details und Farbvariationen enthalten.
JPEG, WebP und AVIF können verlustbehaftet arbeiten.
Je stärker komprimiert wird, desto wahrscheinlicher werden sichtbare Artefakte.
Welche Artefakte können auftreten?
Typische Symptome sind:
- Blockstrukturen,
- Schmieren an Kanten,
- Verlust feiner Texturen,
- Farbsäume,
- Banding in Verläufen,
- unscharfe Schrift,
- „Matsch“ in Haaren oder Blättern.
Die Art der Artefakte hängt vom Codec und vom Motiv ab.
Fotos reagieren anders als Screenshots
Eine Landschaft mit Himmel, Wolken und Vegetation verträgt häufig moderate verlustbehaftete Kompression.
Ein UI-Screenshot enthält dagegen scharfe Kanten, kleine Schrift und flache Farbflächen. Dort fallen Artefakte schneller auf.
Für Screenshots kann PNG oder verlustfreies WebP deshalb besser sein als stark komprimiertes JPEG.
Der Leitfaden PNG, JPEG, WebP oder AVIF: Welches Format wählen? vergleicht die wichtigsten Formate.
Eine sinnvolle grobe Orientierung:
- Foto → JPEG, WebP oder AVIF;
- Screenshot/UI → PNG oder verlustfreies WebP;
- transparente Rastergrafik → PNG/WebP/AVIF;
- Logo/Icon → möglichst SVG.
„Qualität 80“ in JPEG ist nicht exakt dasselbe wie „Qualität 80“ in WebP oder AVIF. Auch verschiedene Encoder interpretieren Skalen unterschiedlich.
Darum sollten Werte nicht als universelle Messgröße behandelt werden.
Entscheidend ist der Vergleich von Dateigröße und sichtbarem Ergebnis.
Mit einer hochwertigen Quelle starten
Wird ein bereits stark komprimiertes JPEG erneut gespeichert, arbeitet der neue Encoder auf einem Bild, das schon Artefakte enthält.
Mehrfache verlustbehaftete Generationen können Qualitätsverlust kumulieren.
Ein guter Workflow ist:
- hochwertige Quelle behalten;
- endgültige Abmessungen bestimmen;
- Zielvarianten direkt aus der Quelle erzeugen;
- nur die Auslieferungsdateien komprimieren.
Nicht nur auf 100-%-Zoom schauen
Ein Bild wird auf einer Website selten dauerhaft bei 100 % in einem Bildeditor betrachtet.
Prüfe es in der echten Anzeigebreite. Kleine Artefakte, die bei 400 % auffallen, können im Layout irrelevant sein.
Umgekehrt können feine Schrift und Icons bereits bei normaler Größe sichtbar beschädigt sein.
Himmel und Verläufe
Große glatte Verläufe können bei starker Kompression zu Banding führen.
Das ist besonders bei:
- Himmel,
- Studiohintergründen,
- Schattenverläufen,
- Illustrationen mit sanften Farbflächen
sichtbar.
Hier kann eine etwas höhere Qualität oder ein geeigneterer Codec nötig sein.
Texturen
Haare, Gras, Stoff und Blätter enthalten viele hochfrequente Details.
Ein Encoder kann diese Strukturen stark vereinfachen, weil sie statistisch teuer sind.
Bei Produkt- oder Portfoliofotos sollte deshalb geprüft werden, ob wichtige Texturen erhalten bleiben.
Transparenz und Kompression
Transparente Kanten sind empfindlich. Bei falscher Konvertierung können helle oder dunkle Säume entstehen.
Ein klassisches JPEG speichert keine Alpha-Transparenz. Wird ein transparentes PNG zu JPEG konvertiert, muss ein Hintergrund festgelegt werden.
Bilddateien können EXIF-, XMP- oder andere Zusatzdaten enthalten. Das Entfernen kann Dateigröße reduzieren und Datenschutz verbessern.
Der Metadaten-Entferner verarbeitet Bilder lokal. Im Leitfaden Bildmetadaten und Datenschutz wird erklärt, wann Metadaten sinnvoll sind und wann nicht.
Chroma-Subsampling
JPEG und andere Verfahren können Farbinformation mit geringerer räumlicher Auflösung speichern als Helligkeitsinformation.
Bei Fotos ist das oft kaum sichtbar. Bei farbigem Text oder harten Farbkanten können jedoch Unschärfen entstehen.
Darum sollten UI-Grafiken anders behandelt werden als Fotografien.
Progressive JPEGs
Progressive JPEGs können beim Laden zunächst eine grobe, dann eine feinere Darstellung zeigen.
Das verändert nicht grundsätzlich die Bildqualität, kann aber die wahrgenommene Ladeerfahrung beeinflussen.
Bei modernen Formaten und Browsern ist die konkrete Wirkung vom gesamten Auslieferungsstack abhängig.
Responsive Bilder sparen mehr als ein einziger Codec
Auch eine gut komprimierte 2.000-Pixel-Datei ist für ein 360-Pixel-Smartphone möglicherweise überdimensioniert.
Mit responsive Bildern und srcset kann der Browser eine kleinere Variante wählen.
Dadurch werden Pixelanzahl und Kompression gemeinsam optimiert.
Kompression für Retina-Displays
Ein Bild kann für hochauflösende Displays größer als seine CSS-Anzeigegröße bereitgestellt werden. Das bedeutet aber nicht, dass jede Quelle maximal groß sein muss.
Nutze mehrere Varianten statt einer einzigen riesigen Datei.
SSIM, PSNR und objektive Metriken
Es gibt mathematische Metriken zum Vergleich von Bildqualität. Sie können bei automatisierten Pipelines hilfreich sein.
Für Webdesign bleibt jedoch die visuelle Prüfung im Zielkontext entscheidend. Eine Metrik kann nicht perfekt modellieren, welche Details für ein bestimmtes Motiv wichtig sind.
Datei umbenennen ist keine Kompression
Das Ändern von .png zu .jpg ändert die internen Daten nicht. Eine echte Konvertierung muss die Datei dekodieren und neu kodieren.
Der Bildkonverter führt diesen Prozess tatsächlich durch.
Kompression und Ladezeit
Kleinere Dateien können Netzwerkübertragung reduzieren. Aber Webperformance hängt zusätzlich von:
- Caching,
- Priorisierung,
- Lazy Loading,
- responsive Quellen,
- Serverkonfiguration,
- Layoutstabilität
ab.
Der Leitfaden Bilder für Webperformance optimieren verbindet diese Aspekte.
Ein praktischer Testablauf
Für ein Foto:
- Zielbreite festlegen.
- Bild proportional verkleinern.
- zwei oder drei Formate testen.
- mehrere Qualitätsstufen exportieren.
- Dateien im echten Layout vergleichen.
- störende Details gezielt prüfen.
- kleinste akzeptable Variante wählen.
Nicht jedes Byte erzwingen
Eine Reduktion von 120 KB auf 110 KB lohnt sich nicht immer, wenn dadurch sichtbare Qualität leidet oder der Workflow komplexer wird.
Optimierung ist ein Kosten-Nutzen-Problem.
Häufige Fehler
Nur den Qualitätsregler reduzieren
Wenn die Pixelabmessungen viel zu groß sind, wird die falsche Ebene optimiert.
Mehrfach konvertieren
JPEG → WebP → JPEG → AVIF erzeugt unnötige Generationen. Konvertiere möglichst direkt aus der Quelle.
Fotos und UI-Grafiken haben unterschiedliche Eigenschaften.
Nur die Dateigröße betrachten
Ein kleines Bild mit sichtbaren Artefakten ist nicht automatisch besser.
Empfohlene Reihenfolge
- Motiv und Nutzung verstehen.
- Crop festlegen.
- Pixelabmessungen reduzieren.
- Format wählen.
- Qualitätsstufe einstellen.
- Metadaten prüfen.
- responsive Varianten erzeugen.
- Ergebnis im Browser testen.
Fazit
Gute Bildkompression entsteht nicht durch einen magischen Qualitätswert. Sie kombiniert passende Abmessungen, geeignetes Format, kontrollierte Kodierung und reale visuelle Prüfung.
Die größte Einsparung kommt häufig von der Entfernung unnötiger Pixel. Danach kann ein moderner Codec die verbleibenden Daten effizient speichern, ohne dass der Qualitätsverlust im tatsächlichen Layout störend sichtbar wird.
