Was ist verlustbehaftete Kompression?
Verlustbehaftete Kompression (Lossy Compression) verkleinert eine Datei, indem sie Informationen dauerhaft verwirft, die Auge oder Ohr kaum vermissen. Das Original lässt sich nicht zurückholen: Beim Dekodieren entsteht eine Annäherung. Dafür werden Dateien deutlich kleiner als mit verlustfreier Kompression. Deshalb nutzen JPEG, MP3 und die meisten Videos sie. Die Qualitätseinstellung bestimmt, wie viel wegfällt.
So funktioniert verlustbehaftete Kompression
Verlustbehaftete Codecs folgen denselben drei Schritten, mit unterschiedlicher Mathematik:
- Transformieren. Die Daten werden so umgerechnet, dass sich Details nach Wichtigkeit ordnen lassen. JPEG basiert zum Beispiel auf der DCT und arbeitet auf Bildblöcken.
- Quantisieren. Unwichtige Details werden gerundet oder weggelassen, gesteuert durch ein Modell der menschlichen Wahrnehmung (feine Farbunterschiede und sehr hohe Frequenzen fallen zuerst weg). Das ist der einzige verlustbehaftete Schritt, und die Qualitätseinstellung steuert ihn.
- Entropiekodieren. Der Rest wird mit einem verlustfreien Durchgang gepackt, nach demselben Prinzip wie bei verlustfreien Kompressoren.
Weil die verworfenen Daten weg sind, geht bei jedem erneuten verlustbehafteten Speichern mehr verloren. Bearbeite vom Original aus und exportiere nur einmal.
Gängige verlustbehaftete Formate
| Format | Medium | Hinweise |
|---|---|---|
| JPEG | Fotos | Verlustbehaftet, DCT-basiert, laut MDN das beliebteste verlustbehaftete Bildformat |
| WebP | Bilder | Verlustbehaftet oder verlustfrei, statisch und animiert |
| AVIF | Bilder | Verlustbehaftet oder verlustfrei, kein progressives Rendering, für ältere Browser ist ein Fallback nötig |
| JPEG XL | Bilder | Verlustbehaftet oder verlustfrei, progressive Anzeige, Fallback nötig |
| MP3, AAC | Audio | Entfernen Klänge, die das Ohr maskiert oder kaum wahrnimmt |
| H.264, VP9, AV1 | Video | Sagen Bilder aus früheren voraus und quantisieren die Differenz |
Der MDN-Bildleitfaden nennt bei visuell ähnlicher Qualität diese Größenvergleiche: Verlustbehaftetes WebP ist im Schnitt 25 bis 35 % kleiner als JPEG, verlustbehaftetes AVIF etwa 50 % kleiner als JPEG. Nimm das als typische Richtwerte, nicht als Garantie: Das Ergebnis hängt vom Bild und von den Encoder-Einstellungen ab.
Verlustbehaftet oder verlustfrei
| Verlustbehaftet | Verlustfrei | |
|---|---|---|
| Rekonstruktion | Angenähert | Exakt, Bit für Bit |
| Größe | Meist deutlich kleiner | Größer |
| Am besten für | Fotos, Audio, Video | Text, Code, Daten, Logos, Screenshots |
| Beispiele | JPEG, MP3, H.264 | PNG, FLAC, gzip |
| Umkehrbar | Nein | Ja |
Faustregel laut MDN: Für Screenshots, Diagramme, Logos und Strichzeichnungen ist verlustfrei besser, weil Unschärfe und Farbsäume um Text und scharfe Kanten sehr auffallen. Fotos und andere Bilder mit fließenden Tonwerten vertragen verlustbehaftete Kompression meist, weil das verworfene Detail schwerer zu sehen ist.
Verlustbehaftete Kompression und Web-Performance
Bilder sind oft die schwersten Dateien einer Seite. Format und Qualitätseinstellung beeinflussen deshalb direkt die Ladezeit und Kennzahlen wie Largest Contentful Paint, eine der Core Web Vitals. Liefere Fotos als verlustbehaftetes WebP oder AVIF mit JPEG-Fallback über <picture> aus, dimensioniere sie passend zum Platz, den sie belegen (siehe Bildgröße), und lade Bilder unterhalb des sichtbaren Bereichs per Lazy Loading.
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" width="1200" height="800" alt="Produkt auf einem Schreibtisch">
</picture>Beachte: Verlustbehaftete Kompression gilt für das Bild selbst. Textdateien wie HTML, CSS, JavaScript und JSON dürfen nie verlustbehaftet sein: Sie werden beim Transport verlustfrei komprimiert. Eine praktische Anleitung findest du in Bilder auf deiner Website verbessern (auf Englisch).
Typische Fehler
- Verlustbehaftet für Screenshots, Logos und Text. Kanten verschmieren. Nimm stattdessen PNG, verlustfreies WebP oder SVG.
- Ein JPEG immer wieder neu komprimieren. Jedes verlustbehaftete Speichern verwirft mehr. Behalte das Original und exportiere davon.
- Ein Qualitätswert für alle Bilder. Prüfe das Ergebnis bei den detailreichsten Bildern mit bloßem Auge. Eine Einstellung, die bei einer Landschaft unsichtbar ist, kann bei einem Farbverlauf Blöcke zeigen.
- Den Fallback weglassen. AVIF und JPEG XL brauchen für Browser ohne Unterstützung einen Fallback.
- Nur nach Dateigröße optimieren. Eine winzige, aber hässliche Datei kostet Conversions. Ziel ist die kleinste Datei, die gut aussieht.
Bildgewicht mit LoadFocus prüfen
Kompressionsentscheidungen zählen nur, wenn du sie misst. Das LoadFocus Page-Speed-Monitoring führt Google-Lighthouse-Audits für Desktop und Mobilgeräte aus 25 Cloud-Regionen aus und verfolgt die Core Web Vitals im Zeitverlauf. So siehst du, ob ein neues Bildformat deinen LCP verbessert. Für einen schnellen Einzelcheck nutze den kostenlosen Core-Web-Vitals-Checker. MDN bietet eine ausführliche Übersicht der Bilddateitypen (auf Englisch).
Häufige Fragen: Verlustbehaftete Kompression
Ist JPEG verlustbehaftet oder verlustfrei?
JPEG ist verlustbehaftet. PNG und GIF sind verlustfrei, WebP, AVIF und JPEG XL können beides sein.
Lässt sich verlustbehaftete Kompression rückgängig machen?
Nein. Die verworfenen Daten sind weg. Behalte die Originaldatei und exportiere eine komprimierte Kopie davon.
Welche Qualitätseinstellung sollte ich für JPEG nutzen?
Eine einzige richtige Zahl gibt es nicht. Starte in der Mitte bis oberen Mitte der Skala deines Tools, vergleiche mit dem Original in der angezeigten Größe, senke den Wert, bis du gerade einen Unterschied siehst, und gehe dann einen Schritt zurück.
Ist verlustbehaftetes WebP besser als JPEG?
Meist ist es bei ähnlicher visueller Qualität kleiner: Laut MDN ist verlustbehaftetes WebP im Schnitt 25 bis 35 % kleiner als JPEG. Prüfe die Browser-Unterstützung für dein Publikum und behalte bei Bedarf einen JPEG-Fallback über <picture>.
Schadet verlustbehaftete Kompression der SEO?
Nicht an sich. Kleinere Bilder verbessern die Ladezeit, die für Ranking und Nutzererlebnis eine Rolle spielt, aber unscharfe oder blockige Bilder schaden den Nutzern. Finde die Balance zwischen Größe und sichtbarer Qualität.
Warum ist mein komprimiertes Bild größer?
Vielleicht wurde eine bereits optimierte Datei mit höherer Qualität neu kodiert oder eine flache Grafik in ein Fotoformat umgewandelt. Vergleiche die Größen und probiere für Grafiken ein verlustfreies Format.
Verwandte Begriffe
Verwandte LoadFocus-Tools
Setze dieses Konzept mit LoadFocus in die Praxis um, derselben Plattform, die alles antreibt, was du gerade gelesen hast.