Bildkompression fürs Web

Aus drei Fotos wurden verschiedene Bild-Dateien erstellt — so kannst du die Bildqualität sehen und die Dateigröße in Kilobyte messen. Die Dateigröße ist wichtig, denn im Web werden Bytes direkt zu Wartezeit.

Bildnachweise und Lizenzen findest du auf der Attributions-Seite.

Bluntausee
Bluntausee Original: JPEG, 1200×1500 px, 974 KB
SalzburgerCafe
SalzburgerCafe Original: JPEG, 1200×1500 px, 641 KB
Sonnenuntergang am Meer
Sonnenuntergang am Meer Original: JPEG, 1200×1500 px, 468 KB

Alle drei starten als JPEG-Dateien mit 1200×1500 Pixel. Von hier aus verändern wir drei Dinge — die Pixel-Dimensionen, die Kompressions-Qualität und das Dateiformat — und beobachten, wie die Dateigröße darauf reagiert.

Kapitel 1

Dimensionen sind entscheidend

Zuallererst: Schick nie mehr Pixel, als die Webseite tatsächlich anzeigt. Ein Foto einfach von 1200 px auf 792 px oder 600 px Breite zu verkleinern, schrumpft die Datei schon dramatisch. Die Bilder unten sind in ihrer echten Pixelgröße dargestellt (seitlich scrollen, um die größeren Versionen zu sehen).

Bluntausee

600×750 px · 50% Breite
130 KB
Bluntausee mit 600px
792×990 px · 66% Breite
225 KB
Bluntausee mit 792px
1200×1500 px · 100% Breite
508 KB
Bluntausee mit 1200px

SalzburgerCafe

600×750 px · 50% Breite
102 KB
SalzburgerCafe mit 600px
792×990 px · 66% Breite
169 KB
SalzburgerCafe mit 792px
1200×1500 px · 100% Breite
337 KB
SalzburgerCafe mit 1200px

Sonnenuntergang am Meer

600×750 px · 50% Breite
68 KB
Sonnenuntergang am Meer mit 600px
792×990 px · 66% Breite
112 KB
Sonnenuntergang am Meer mit 792px
1200×1500 px · 100% Breite
221 KB
Sonnenuntergang am Meer mit 1200px
Kapitel 2

Die Kompressions-Qualität ist wählbar

Beim Erzeugen von JPEG, WebP und AVIF kannst du mit einem Qualitäts-Parameter q festlegen, ob dir die visuelle Qualität oder eine kleinere Datei wichtiger ist. Jedes Paar unten zeigt dasselbe 600 px-Foto in natürlicher Größe: Qualität 96 gegen 80 und Qualität 96 gegen 50. Ein hoher Wert liefert ein nahezu makelloses Bild, aber eine große Datei; ein niedriger Wert liefert eine winzige Datei, zeigt aber klobige Artefakte — besonders in glatten Farbflächen oder bei kleinen Details.

Bluntausee — 600 px, JPEG

JPEG q96 · 294 KB JPEG q80 · 130 KB
◀ JPEG q96 · 294 KB JPEG q80 · 130 KB ▶
JPEG q96 · 294 KB JPEG q50 · 72 KB
◀ JPEG q96 · 294 KB JPEG q50 · 72 KB ▶

SalzburgerCafe — 600 px, JPEG

JPEG q96 · 224 KB JPEG q80 · 102 KB
◀ JPEG q96 · 224 KB JPEG q80 · 102 KB ▶
JPEG q96 · 224 KB JPEG q50 · 61 KB
◀ JPEG q96 · 224 KB JPEG q50 · 61 KB ▶

Sonnenuntergang am Meer — 600 px, JPEG

JPEG q96 · 161 KB JPEG q80 · 68 KB
◀ JPEG q96 · 161 KB JPEG q80 · 68 KB ▶
JPEG q96 · 161 KB JPEG q50 · 41 KB
◀ JPEG q96 · 161 KB JPEG q50 · 41 KB ▶

Qualität vs. Dateigröße (600 px JPEG)

600 px JPEGQualität 96Qualität 80Qualität 50
Bluntausee294 KB130 KB72 KB
SalzburgerCafe224 KB102 KB61 KB
Sonnenuntergang am Meer161 KB68 KB41 KB
Kapitel 3

Ein neueres Format spart mehr

Bei gleicher Qualitäts-Einstellung ist WebP kleiner als JPEG, und AVIF ist meist noch kleiner — und sie stellen Details bei kleinem Qualitäts-Parameter besser dar. Jedes Paar unten vergleicht das 600 px-Foto bei Qualität 50: JPEG gegen WebP und JPEG gegen AVIF. Zieh den Regler zum Vergleichen und beachte, wie viel kleiner die Dateien von WebP und AVIF sind.

Bluntausee — 600 px, Qualität 50

JPEG q50 · 72 KB WebP q50 · 74 KB
◀ JPEG q50 · 72 KB WebP q50 · 74 KB ▶
JPEG q50 · 72 KB AVIF q50 · 57 KB
◀ JPEG q50 · 72 KB AVIF q50 · 57 KB ▶

SalzburgerCafe — 600 px, Qualität 50

JPEG q50 · 61 KB WebP q50 · 51 KB
◀ JPEG q50 · 61 KB WebP q50 · 51 KB ▶
JPEG q50 · 61 KB AVIF q50 · 39 KB
◀ JPEG q50 · 61 KB AVIF q50 · 39 KB ▶

Sonnenuntergang am Meer — 600 px, Qualität 50

JPEG q50 · 41 KB WebP q50 · 29 KB
◀ JPEG q50 · 41 KB WebP q50 · 29 KB ▶
JPEG q50 · 41 KB AVIF q50 · 25 KB
◀ JPEG q50 · 41 KB AVIF q50 · 25 KB ▶

Format vs. Dateigröße (600 px, Qualität 50)

600 px, Qualität 50JPEGWebPAVIF
Bluntausee72 KB74 KB57 KB
SalzburgerCafe61 KB51 KB39 KB
Sonnenuntergang am Meer41 KB29 KB25 KB
Kapitel 4

Daten

Die vollständige Matrix — jede Dimension, Qualität und jedes Format, mit der Dateigröße in Kilobyte. Die kleinste Datei jeder Zeile ist mit dem Stern hervorgehoben, der orange Balken ist proportional zur Bildgröße.

Beachte, wie eine kleinere Dimension meist mehr bringt als das Herunterdrehen des Qualitäts-Parameters. AVIF gewinnt in fast allen Zeilen.

Bluntausee

DimensionenQualität JPEGWebPAVIF
1200×1500
100%
q961055 KB845 KB908 KB
q80508 KB449 KB545 KB
q50297 KB290 KB228 KB
792×990
66%
q96499 KB434 KB491 KB
q80225 KB209 KB265 KB
q50127 KB128 KB99 KB
600×750
50%
q96294 KB259 KB294 KB
q80130 KB124 KB159 KB
q5072 KB74 KB57 KB

SalzburgerCafe

DimensionenQualität JPEGWebPAVIF
1200×1500
100%
q96688 KB554 KB562 KB
q80337 KB265 KB313 KB
q50209 KB168 KB129 KB
792×990
66%
q96366 KB279 KB322 KB
q80169 KB132 KB161 KB
q50101 KB85 KB64 KB
600×750
50%
q96224 KB169 KB196 KB
q80102 KB80 KB100 KB
q5061 KB51 KB39 KB

Sonnenuntergang am Meer

DimensionenQualität JPEGWebPAVIF
1200×1500
100%
q96506 KB370 KB419 KB
q80221 KB146 KB197 KB
q50137 KB89 KB72 KB
792×990
66%
q96263 KB192 KB233 KB
q80112 KB77 KB104 KB
q5068 KB47 KB40 KB
600×750
50%
q96161 KB120 KB146 KB
q8068 KB48 KB66 KB
q5041 KB29 KB25 KB