Bilder komprimieren und skalieren: Ein praktischer Leitfaden

Ein einzelnes Foto eines modernen Telefons kann mehrere Megabyte groß sein, und drei oder vier davon lassen eine Webseite leicht sekundenlang laden. Bildgröße ist das häufigste Performance-Problem im Web — und eines der am leichtesten zu behebenden.

Diese Anleitung erklärt, was „Bildgröße“ eigentlich bedeutet, den Kompromiss zwischen verlustfreier und verlustbehafteter Kompression und wie Sie ein Bild direkt im Browser komprimieren oder skalieren.

Dateigröße vs. Abmessungen

Mit „Bildgröße“ meinen Menschen zwei verschiedene Dinge:

Dateigröße (in KB oder MB) — wie viel Platz die Datei einnimmt und wie lange der Download dauert.
Abmessungen (Breite × Höhe in Pixeln) — wie groß das Bild in Pixeln ist.

Beides hängt zusammen, ist aber nicht dasselbe. Ein Foto mit 4000×3000 ist von den Abmessungen riesig, kann aber, wenn es ein einfacher Verlauf ist, zu einer winzigen Datei komprimieren. Umgekehrt kann eine kleine Abmessung durch hohe Auflösung dennoch eine große Datei haben. Wenn jemand „komprimiere dieses Bild“ sagt, meint er meist die Dateigröße reduzieren — und das ist das Ziel für Web-Performance.

Verlustfrei vs. verlustbehaftet: Was der Unterschied einbringt

Kompression gibt es in zwei Varianten:

Verlustfrei verkleinert die Datei, ohne Daten wegzuwerfen. Beim Betrachten ist sie Pixel für Pixel identisch mit dem Original. Die Einsparung ist moderat.
Verlustbehaftet wirft Details weg, die das menschliche Auge kaum bemerkt, und erreicht viel kleinere Dateien. Ein verlustbehaftetes Bild wiederholt zu komprimieren verschlechtert es — bewahren Sie also immer ein Original auf.

Für die meisten Fälle ist ein verlustbehaftetes Format mit vernünftig eingestellter Qualität die richtige Wahl — genau das wollen Sie für Fotos und die meisten Web-Bilder. Verlustfrei ist sinnvoll bei Screenshots, Logos und Grafiken mit scharfen Kanten, wo Artefakte sichtbar sind.

Skalieren vs. Komprimieren

Skalieren und Komprimieren lösen verschiedene Probleme. Skalieren ändert die Abmessungen, was die Dateigröße senkt, aber auch das Erscheinungsbild verändert. Wird ein Bild mit 800 Pixel Breite angezeigt, ist aber 4000 Pixel breit, sind die zusätzlichen 3200 Pixel verschwendet — sie werden heruntergeladen, aber niemand sieht sie.

Komprimieren senkt die Dateigröße, ohne zwangsläufig die Abmessungen zu ändern. Das Ziel ist, die Qualität zu halten und das Gewicht zu senken.

Oft wollen Sie beides: auf die tatsächliche Anzeigegröße skalieren und dann in ein effizientes Format komprimieren.

So machen Sie es im Browser richtig

Der praktischste Ansatz für ein Web-Bild:

Auf die Anzeigegröße skalieren. Wird das Bild nur 800 Pixel breit gezeigt, geben Sie eine 800 Pixel breite Version aus statt einer 4000 Pixel breiten. Nichts geht verloren, denn der Browser kann ohnehin nicht mehr zeigen.
In ein web-freundliches Format komprimieren. Moderne Formate wie WebP komprimieren viel besser als JPEG gleicher Qualität und werden von allen aktuellen Browsern unterstützt.
Nicht überkomprimieren. Ab einem Punkt erscheinen sichtbare Artefakte. Hören Sie bei der Qualität auf, die sauber genug aussieht.

All das lässt sich direkt im Browser erledigen — bequem und privat, denn Ihr Bild muss nie auf einen Server hochgeladen werden.

Kurzreferenz

Dateigröße (KB/MB) und Abmessungen (Pixel) sind verschieden; „komprimieren“ meint meist die Dateigröße.
Verlustfrei = identisch, moderate Einsparung; verlustbehaftet = kleiner, kaum sichtbare Detailverluste.
Skalieren ändert die Abmessungen, Komprimieren senkt das Gewicht.
Erst auf die Anzeigegröße skalieren, dann in ein web-freundliches Format komprimieren.
Nicht überkomprimieren — sichtbare Artefakte sind die Grenze.

Erste Schritte

Wenn Sie ein großes Bild haben, das Ihre Seite oder E-Mail verlangsamt, verkleinert der Bildkompressor es durch Skalieren und Neukodieren im Browser. Wenn Sie die Ränder beschneiden müssen, schneidet der Bildzuschneider auf einen exakten Bereich zu. Und wenn Sie das Format wechseln wollen — etwa PNG zu JPEG oder zum kleineren WebP —, übernimmt das der Bildformat-Konverter.