Bildkompressionsverhältnis: Leitfaden für Qualität und Größe

Zuletzt aktualisiert: June 28, 2026

Das Kompressionsverhältnis gibt an, wie viel kleiner ein Bild nach dem Export geworden ist. Es ist nützlich, aber nur, wenn Sie die Zahl mit einer visuellen Überprüfung kombinieren. Ein Verhältnis von 12:1 kann hervorragend für ein unscharfes Hintergrundfoto sein und für einen Produkt-Screenshot mit kleinem Text unakzeptabel.

Dieser Leitfaden gibt Ihnen die Formel, die üblichen Qualitätsbereiche und eine Veröffentlichungs-Checkliste für WebP, JPEG, PNG und AVIF. Nutzen Sie ihn, wenn Sie kleinere Seiten benötigen, ohne dass Bilder matschig wirken.

Kurzantwort: Was ist ein gutes Bildkompressionsverhältnis?

Ein gutes Kompressionsverhältnis ist die höchste Byte-Reduzierung, die bei der endgültigen Anzeigegröße immer noch sauber aussieht. Berechnen Sie es wie folgt: ursprüngliche Dateigröße geteilt durch komprimierte Dateigröße. Ein 4 MB großes Bild, das auf 500 KB komprimiert wurde, hat ein Verhältnis von 8:1.

Für Webfotos ist oft ein praktisches Ziel von 5:1 bis 12:1 nach der Größenänderung und dem Export zu WebP oder AVIF. Für textlastige Screenshots, Logos und UI-Bilder sind niedrigere Verhältnisse normal, da scharfe Kanten und flache Farben geschützt werden müssen. Lossless PNG oder lossless WebP können nur 1.2:1 bis 3:1 ergeben.

Beurteilen Sie die Kompression nicht nur nach dem Verhältnis. Überprüfen Sie Gesichter, Produktkanten, Verläufe und kleinen Text. Können Benutzer Blockierung, Ringing, Verschmieren oder Banding sehen, ist das Verhältnis zu aggressiv, selbst wenn die Dateigröße attraktiv aussieht.

Wie berechnet man das Bildkompressionsverhältnis?

Verwenden Sie die ursprüngliche Byte-Größe und die endgültige Byte-Größe nach allen tatsächlichen Veröffentlichungsschritten: Zuschneiden (crop), Größenänderung (resize), Entfernen von Metadaten, Formatkonvertierung und Qualitätsfestlegung. Wenn Sie vor der Größenänderung berechnen, ist die Zahl normalerweise irreführend.

Verwenden Sie die genaue Byte-Anzahl, wenn Sie eine Build-Pipeline optimieren. Verwenden Sie gerundete KB oder MB, wenn Sie redaktionelle Einstellungen dokumentieren. Die Entscheidung ändert sich nicht: Kleiner ist nur nützlich, solange das Bild seine Aufgabe noch kommuniziert.

Googles Bildrichtlinien betonen sowohl Geschwindigkeit als auch Qualität: Bilder bestimmen oft das Seiten-Gewicht, aber unscharfe oder unklare Bilder sind schlecht für Benutzer und Suchvorschauen. Es empfiehlt auch crawlable HTML Image Elemente, beschreibenden alt Text und unterstützte Formate wie JPEG, PNG, WebP, SVG und AVIF in Google Images best practices.

Welches Verhältnis sollten Sie für WebP, JPEG, PNG und AVIF verwenden?

Das richtige Verhältnis hängt vom Bildinhalt ab. Fotografien komprimieren schwer, da winzige Texturveränderungen schwer zu bemerken sind. Screenshots und Diagramme komprimieren weniger, weil Text, Linien und UI-Ränder Artefakte offensichtlich machen.

MDN's Image Format Guide weist darauf hin, dass WebP verlustbehaftet oder verlustfrei sein kann, während lossy WebP und lossless WebP unterschiedliche interne Darstellungen verwenden. Deshalb gibt es kein einziges „WebP-Verhältnis“; die richtige Einstellung hängt davon ab, ob der Inhalt den Verlust verträgt. Sehen Sie sich MDN's image file type and format guide für das Formatverhalten an.

Für diesen Artikel habe ich vier 1400 by 788 Grafiken lokal mit ImageMagick und WebP kodiert. Die veröffentlichten Dateien wogen 23 KB, 28 KB, 35 KB und 40 KB. Das sind ungewöhnlich kleine Größen, weil es sich um saubere Diagramme und keine Kamerafotos handelt; verwenden Sie die Zahlen als Beweis dafür, dass flache Grafiken anders komprimiert werden als fotografische Details.

Zum Vergleich breiterer Format-Abwägungen vergleichen Sie diesen Artikel mit AVIF vs WebP Comparison. Wenn Sie die Algorithmusdetails hinter Artefakten benötigen, lesen Sie How Image Compression Works.

Warum sparen Qualitäts-Einstellungen nach einem Punkt nicht mehr viel?

Die meisten Encoder haben einen steilen frühen Gewinn und einen schmerzhaften späten Kompromiss. Vom Originalkamerafile zu WebP q80 kann viel unsichtbare Daten entfernt werden. Von q70 auf q55 kann weniger Bytes gespart werden, während die Artefakte leichter bemerkt werden.

Der praktische Effekt ist einfach: Die Größenkurve flacht ab, während die Qualitätskurve weiter fällt. Deshalb ist WebP q75-85 ein gängiger Startbereich für Artikel- und Produktfotos. Es ist keine Regel für jede Datei; es ist ein guter erster Test, bevor Sie das Ergebnis überprüfen.

Verwenden Sie diese Reihenfolge bei der Optimierung der Qualität:

1. Auf die größte gerenderte Breite skalieren, die Sie tatsächlich ausliefern.
2. Ein WebP bei q85, eines bei q80 und eines bei q75 exportieren.
3. Diese neben das Original in der beabsichtigten Anzeigegröße öffnen.
4. Gesichter, Text, Produktkanten, Schatten und sanfte Verläufe überprüfen.
5. Wählen Sie die kleinste Version, die nicht degradiert aussieht.
6. Protokollieren Sie das resultierende Verhältnis für diesen Inhaltstyp.

Wenn das Bild wahrscheinlich das Largest Contentful Paint Element ist, ist die Kompression nur Teil der Lösung. Die web.dev LCP-Richtlinie empfiehlt, wahrscheinliche LCP-Bilder mit fetchpriority="high" zu priorisieren und die Ressourcenentdeckung im Netzwerk-Wasserfall in Optimize Largest Contentful Paint zu überprüfen.

Wie sollten Sie Kompressionsverhältnisse über Formate hinweg vergleichen?

Vergleichen Sie Formate bei gleicher sichtbarer Qualität, nicht bei gleichen Schieberegler-Zahlen. JPEG q82, WebP q78 und AVIF q55 können alle angemessene Ergebnisse aus derselben Quelle sein. Die Zahlen sind Encoder-Steuerungen, keine universellen Qualitätswerte.

Hier lesen Teams oft Verhältnisse falsch. Ein JPEG von 5.7:1 kann schlechter sein als ein WebP von 8:1, wenn beide auf dem Bildschirm gleich aussehen. Ein lossless WebP von 2:1 kann besser sein als ein lossy WebP von 10:1, wenn das Asset ein Screenshot einer Preistabelle ist.

Für Stapelverarbeitung generieren Sie mehrere Ausgaben aus demselben Master und behalten Sie die Entscheidung in Dateinamen oder Build-Logs sichtbar. Der Batch Resize Guide behandelt den Workflow „zuerst skalieren“, und der Complete Image Optimization Checklist gibt einen abschließenden Pre-Publish-Durchgang.

Wann ist ein hohes Kompressionsverhältnis ein schlechtes Zeichen?

Ein hohes Verhältnis ist ein Warnsignal, wenn das Bild Details enthält, die Menschen überprüfen. Ladenbesitzer bemerken Produkttexturen. Designer bemerken weichere Schriftarten. Käufer bemerken verschmierte Schmuckkanten. In diesen Fällen kann das „kleinste File“ mehr kosten, als es spart.

Hohe Verhältnisse erfordern eine zusätzliche Überprüfung, wenn das Bild Folgendes enthält:

• Produktetiketten, Verpackungstexte, Zutaten oder Seriennummern.
• UI-Screenshots, Dashboards, Code oder Preistabellen.
• Gesichter, Hauttextur, Haare, Schmuck, Stoff oder Lebensmittel.
• Sanfte Verläufe, Himmel, Schatten, Neon oder dunkle Hintergründe.
• Dünne Linien, Icons, transparente Kanten oder Markenmerkmale.
• Bilder, die gezoomt, zugeschnitten oder in Anzeigen wiederverwendet werden.

Für E-Commerce verwenden Sie eine strengere Überprüfung als für ein dekoratives Blogbild. Ein Kategorie-Thumbnail kann mehr Verlust vertragen als das Hauptproduktbild. Wenn dasselbe Master sowohl beides speist, erstellen Sie separate Exporte, anstatt zu erzwingen, dass ein Verhältnis jeden Slot bedient.

Welcher Workflow liefert die beste Größe ohne sichtbaren Qualitätsverlust?

Verwenden Sie das Kompressionsverhältnis als Messung und nicht als erste Einstellung. Die Ausgabequalität hängt mehr von der Quelle, dem Zuschnitt, den Pixelmaßen und der Formatwahl ab als von der endgültigen Verhältniszahl.

Verwenden Sie diese Veröffentlichungsreihenfolge:

1. Behalten Sie eine Masterdatei, die nicht wiederholt neu kodiert wurde.
2. Vor der Größenänderung für den Endfall zuschneiden (Crop).
3. Auf die größte gerenderte Breite skalieren, mit responsiven Varianten bei Bedarf.
4. Format nach Inhalt wählen: WebP oder AVIF für Fotos, lossless für textlastige Grafiken.
5. Zwei oder drei Qualitätskandidaten exportieren.
6. Metadaten von öffentlichen Kopien entfernen, es sei denn, dies ist gesetzlich oder redaktionell erforderlich.
7. Kandidaten bei der gerenderten Größe auf Desktop und Mobilgeräten vergleichen.
8. Das wahrscheinlich LCP-Bild getrennt von Below-Fold-Bildern überprüfen.
9. Auf eine stabile CDN URL veröffentlichen und HTTP 200 verifizieren.
10. Die endgültigen Bytes, das Verhältnis und die Einstellung protokollieren, damit der nächste Stapel schneller ist.

Wenn Sie ein striktes Größenbudget anstreben, beginnen Sie mit dem Workflow in Compress Image to 100KB oder Compress Image to 200KB. Für mobile Seiten kombinieren Sie die Verändigungsentscheidung mit dem Mobile Image Optimization Guide.

Wie passen Kompressionsverhältnis und SEO zusammen?

Das Kompressionsverhältnis hilft der SEO indirekt. Kleinere Bilder reduzieren die Übertragungsgröße, was die Ladeleistung verbessern kann, insbesondere wenn das komprimierte Bild auch korrekt dimensioniert ist. Aber Suchmaschinen und Benutzer benötigen immer noch ein nützliches Bild, eine stabile URL, lesbaren umgebenden Text und beschreibenden alt text.

Veröffentlichen Sie kein winziges Bild, das in Suchvorschauen oder Social Cards kaputt aussieht. Google empfiehlt ausdrücklich die Wahl eines repräsentativen Bildes für Metadaten und vermeidet generische Bilder für strukturierte Daten oder og:image, wenn ein relevanteres Bild existiert. Das Bild sollte schnell und klar sein.

Für einen Blogbeitrag bedeutet das normalerweise:

• Verwenden Sie eine einzigartige WebP-Abdeckung im Frontmatter und Open Graph Data.
• Behalten Sie die Abdeckung bei der Social-Preview-Größe lesbar.
• Platzieren Sie das Bild in der Nähe von Text, der die Kernaussage erklärt.
• Verwenden Sie beschreibenden alt text, keinen Keyword Stuffing.
• Stellen Sie das endgültige Asset über eine crawlable CDN URL bereit.
• Vermeiden Sie es, indizierte Bild-URLs zu ersetzen, es sei denn, das Asset ist falsch.

Das Verhältnis ist nur eine Zeile im Veröffentlichungsprotokoll. Es sollte neben der gerenderten Breite, dem Format, den Qualitäts-Einstellungen, der Byte-Größe und visuellen Notizen stehen.

Kompressionsverhältnis-Checkliste

Führen Sie vor der Veröffentlichung diese kurze Überprüfung durch:

Das nützliche Ziel ist nicht „maximale Kompression“. Es ist eine wiederholbare Einstellung, die die Seite leicht und das Bild vertrauenswürdig hält. Im Zweifel verwenden Sie die kleinere Datei nur, nachdem der visuelle Check bestanden wurde.