Bilder fürs Web komprimieren und das Ergebnis richtig prüfen

Wenn Sie Bilder fürs Web komprimieren, sollten Sie nicht nur auf die kleinste Datei achten. Legen Sie zuerst den Einsatzzweck fest, wählen Sie ein passendes Ausgabeformat und prüfen Sie anschließend Dateigröße, Darstellung und wichtige Bildmerkmale im direkten Vergleich mit dem Original.

Komprimierung reduziert die Datenmenge durch eine andere Codierung oder Qualitätsstufe. Eine Größenänderung betrifft dagegen die Pixelabmessungen. Der SmartPlusLab-Bildkompressor bietet keine Einstellung zum Ändern von Breite oder Höhe. Ein unnötig groß dimensioniertes Bild kann deshalb trotz Komprimierung weitere Bearbeitung benötigen.

Ausgangsbild und Einsatzzweck festlegen

Bewahren Sie die Originaldatei auf und erstellen Sie eine Arbeitskopie. Notieren Sie, wo das Bild erscheinen soll: als großes Titelbild, kleines Vorschaubild, Logo, Screenshot oder Illustration. Davon hängt ab, welche Details sichtbar bleiben müssen und ob Transparenz erforderlich ist.

Nehmen Sie zum Beispiel ein redaktionelles Bild für eine deutschsprachige Unternehmenswebsite. Prüfen Sie vor der Bearbeitung:

Pixelabmessungen und aktuelles Dateiformat;
sichtbare Details wie feine Schrift oder klare Kanten;
transparente Bereiche;
Orientierung und Farbwirkung;
aktuelle Dateigröße;
Verwendung auf hellem und dunklem Hintergrund.

Die englische web.dev-Fachseite zur Komprimierungsstufe beschreibt, warum stärkere verlustbehaftete Komprimierung zwar weniger Daten erzeugen kann, zugleich aber das Risiko sichtbarer Artefakte erhöht. Es gibt daher keinen Qualitätswert, der für jedes Motiv gleichermaßen geeignet ist.

Komprimierung ist keine Größenänderung

Bei der Bildkomprimierung werden Darstellung und Datenmenge gegeneinander abgewogen. Beim Skalieren wird dagegen die Zahl der Bildpunkte verändert. Beide Schritte können für eine Webseite relevant sein, lösen aber unterschiedliche Probleme.

Die web.dev-Einführung zur Bildleistung ordnet Dateiformat, Codierung und bedarfsgerechte Abmessungen als getrennte Entscheidungen ein. Weniger zu übertragende Bilddaten können die Netzwerklast verringern. Daraus folgt jedoch keine Garantie, dass ein einzelner Komprimierungslauf eine bestimmte Ladezeit oder Suchmaschinenplatzierung erreicht.

Wenn die Pixelabmessungen deutlich größer als die tatsächliche Darstellung sind, planen Sie eine separate Größenänderung ein. Behaupten Sie nicht, der Bildkompressor habe diesen Schritt automatisch erledigt.

JPEG, PNG oder WebP als Ausgabeformat wählen

Der SmartPlusLab-Bildkompressor unterstützt die Ausgabeformate JPEG, PNG und WebP. In kontrollierten Tests stimmten die erzeugten Formate mit den gemeldeten MIME-Typen image/jpeg, image/png und image/webp überein. Eine GIF-Ausgabe wurde abgewiesen.

Die Formatwahl richtet sich nach dem Bild und der späteren Verwendung. JPEG arbeitet typischerweise verlustbehaftet und eignet sich häufig für fotografische Inhalte. PNG verwendet laut W3C-PNG-Spezifikation verlustfreie Komprimierung und kann Alpha-Transparenz enthalten. WebP stellt eine weitere Ausgabeoption dar, deren Ergebnis ebenfalls im Zielkontext geprüft werden muss.

Ein verlustfreies Format ist nicht automatisch die kleinste Wahl. Umgekehrt ist eine kleinere Datei nicht automatisch die bessere Wahl, wenn störende Artefakte entstehen oder Transparenz verloren geht. Die MDN-Übersicht zu Bildformaten stellt Format, Motivtyp, Komprimierung und Transparenz als zusammenhängende Entscheidung dar.

Bild Schritt für Schritt komprimieren

Gehen Sie bei der Komprimierung in dieser Reihenfolge vor:

Wählen Sie eine statische JPEG-, PNG- oder WebP-Arbeitsdatei aus.
Laden Sie die Arbeitskopie hoch.
Legen Sie das gewünschte Ausgabeformat fest.
Wählen Sie eine erste Qualitätsstufe.
Verarbeiten Sie die Datei und speichern Sie das Ergebnis unter einem neuen Namen.
Öffnen Sie Original und Ausgabe in derselben Ansicht.
Vergleichen Sie Dateigröße, Schärfe, Kanten, Farbflächen und Transparenz.
Wiederholen Sie den Vorgang nur dann mit einer anderen Qualitätsstufe, wenn der Vergleich ein klares Ziel dafür liefert.

Die kontrollierten Tests belegen keine allgemeinen Minimal- oder Maximalwerte für die Qualitätsstufe. Verwenden Sie daher keine ungetesteten Grenzwerte als feste Empfehlung.

Geprüftes Beispiel: Transparenz bei JPEG

Ein kontrollierter Test verwendete ein statisches RGBA-Bild mit zwei Pixeln, das als JPEG mit der Qualitätsstufe 95 ausgegeben wurde. Das Ergebnis hatte den Modus RGB, und die im Test geprüften Metadaten waren entfernt. Das transparente Ausgangsbild wurde vor dem Speichern als JPEG zusammengesetzt.

Dieses Ergebnis ist praktisch wichtig: Wenn transparente Bereiche erhalten bleiben müssen, dürfen Sie eine JPEG-Ausgabe nicht ungeprüft übernehmen. Öffnen Sie die Datei vor dem Einsatz auf dem vorgesehenen Hintergrund. Der Test belegt nicht, welcher Hintergrund für jedes Bild verwendet wird, und er ersetzt keinen visuellen Vergleich eines eigenen Motivs.

Ein weiterer kontrollierter Fall wendete die EXIF-Orientierung vor der Ausgabe an. Auch hier gilt: Prüfen Sie die tatsächliche Ausrichtung, statt allein auf Metadaten zu vertrauen.

Zwei Qualitätsstufen nachvollziehbar vergleichen

Für einen eigenen Vergleich verwenden Sie dieselbe statische Ausgangsdatei und dasselbe Ausgabeformat. Führen Sie einen ersten Lauf mit einer dokumentierten Ausgangseinstellung durch. Wählen Sie danach eine zweite Qualitätsstufe und protokollieren Sie für beide Dateien:

den tatsächlich eingestellten Wert;
das gemeldete und technisch erkannte Format;
die Dateigröße in Bytes;
sichtbare Unterschiede bei Kanten, Texturen und Farbverläufen;
Transparenz und Orientierung, soweit relevant.

Die vorliegenden Prüfungen enthalten keine vollständige Wahrnehmungs- oder Dateigrößenmatrix. Deshalb lässt sich weder eine allgemeine Einsparung angeben noch einer der beiden Läufe pauschal zum Gewinner erklären.

Ergebnis vor dem Hochladen kontrollieren

Öffnen Sie die Ausgabedatei in den Browsern und Größen, die für die Website relevant sind. Kontrollieren Sie besonders Schrift in Screenshots, feine Linien, Gesichter, Farbverläufe und harte Kontraste. Bei PNG- oder WebP-Dateien prüfen Sie transparente Bereiche auf hellem und dunklem Hintergrund.

Vergleichen Sie außerdem die Pixelabmessungen. Falls sie für die geplante Darstellung zu groß sind, ist weiterhin eine separate Größenänderung nötig. Prüfen Sie bei farbkritischen Inhalten die Farbwirkung besonders sorgfältig, denn das Verhalten von ICC-Profilen ist in den kontrollierten Tests nicht abgedeckt.

Grenzen des geprüften Funktionsumfangs

Der geprüfte Funktionsumfang umfasst statische JPEG-, PNG- und WebP-Bilder. Eine vollständige Matrix zu Eingabeformaten, beschädigten Dateien, Dateigrößen, Pixelgrenzen und Ressourcenverbrauch fehlt jedoch. Auch sichtbare Artefakte sind nicht umfassend getestet.

Animierte Eingaben werden abgewiesen, statt nur unbemerkt das erste Einzelbild zu verarbeiten. Verwenden Sie den Kompressor daher nicht für Animationen. Machen Sie außerdem keine unbelegten Aussagen über Speicherung, Übertragung, unbegrenzte Nutzung oder vollständige Metadatenentfernung in jedem denkbaren Format.

Häufige Fragen

Welche Ausgabeformate wurden getestet?

JPEG, PNG und WebP wurden als Ausgaben getestet. GIF wurde dabei als nicht zulässiges Ausgabeformat abgewiesen.

Ändert das Tool die Pixelabmessungen?

Im dokumentierten Vertrag gibt es dafür keinen Parameter. Komprimierung und Größenänderung sollten als getrennte Arbeitsschritte geplant werden.

Bleibt Transparenz bei der getesteten JPEG-Ausgabe erhalten?

Im kontrollierten RGBA-Test wurde das Bild vor der JPEG-Ausgabe zusammengesetzt und als RGB gespeichert. Übernehmen Sie transparente Eingaben deshalb nicht ohne Prüfung in diesen Ausgabeweg.

Welche Qualitätsstufe ist ideal?

Die Tests legen keinen universellen Wert fest. Vergleichen Sie mehrere reale Ausgaben und bewerten Sie Dateigröße und sichtbare Qualität gemeinsam.

Kann ich animierte Bilder komprimieren?

Nicht mit dem geprüften Funktionsumfang. Eine animierte Eingabe wurde im kontrollierten Test abgewiesen.