Bilder fürs Web komprimieren, ohne Qualität zu verlieren

Bilder sind meist das Schwerste auf einer Webseite. Ein einziges unoptimiertes Foto direkt aus der Handykamera kann mehrere Megabyte wiegen — mehr als der gesamte Text, Code und das Styling einer Seite zusammen. Bilder zu komprimieren ist die wirkungsvollste Änderung, die die meisten für die Seitengeschwindigkeit vornehmen können, und gut gemacht ist sie für Besucher unsichtbar. Dieser Ratgeber behandelt, wie Bildkomprimierung funktioniert und wie du Dateien ohne merklichen Qualitätsverlust verkleinerst.

Warum die Bildgröße zählt

Jedes zusätzliche Kilobyte sind Daten, die der Browser eines Besuchers herunterladen muss, bevor er deine Seite zeigen kann. Auf einer schnellen Desktop-Verbindung fällt das vielleicht nicht auf, doch in Mobilfunknetzen erhöht es direkt die Ladezeit, frustriert Nutzer und schadet dem Suchranking — Google nutzt Seitenerlebnis-Signale wie die Ladegeschwindigkeit als Rankingfaktor. Kleinere Bilder bedeuten schnellere Seiten, niedrigere Bandbreitenkosten und zufriedenere Besucher.

Verlustbehaftete vs. verlustfreie Komprimierung

Es gibt zwei grundlegend verschiedene Wege, eine Bilddatei zu verkleinern.

Verlustfreie Komprimierung

Verlustfreie Verfahren packen die Daten effizienter, ohne etwas wegzuwerfen — beim Entpacken bekommst du eine pixelgenaue Kopie des Originals zurück. Sicher, aber die Ersparnis ist mäßig, meist 10–50 %. PNG nutzt verlustfreie Komprimierung, weshalb es sich hervorragend für Logos, Screenshots und Grafiken mit scharfen Kanten und flächigen Farben eignet.

Verlustbehaftete Komprimierung

Verlustbehaftete Verfahren verwerfen Informationen, die das menschliche Auge kaum bemerkt — subtile Farbabstufungen, feine Details in unruhigen Bereichen — um viel größere Ersparnisse zu erzielen, oft 70–90 %. JPEG und WebP nutzen verlustbehaftete Komprimierung. Der Kompromiss wird über eine Qualitäts-Einstellung gesteuert: niedrigere Qualität bedeutet kleinere Datei, aber sichtbarere Artefakte. Für Fotos ist verlustbehaftete Komprimierung auf einem vernünftigen Qualitätsniveau fast immer die richtige Wahl.

Das richtige Format wählen

Das gewählte Format zählt genauso viel wie das Komprimierungsniveau:

• JPEG — das Arbeitspferd für Fotos. Überall breit unterstützt. Gute Komprimierung, aber keine Transparenz.
• PNG — am besten für Grafiken mit scharfen Linien, Text oder Transparenz (Logos, Icons, Screenshots). Verlustfrei, daher werden Fotos groß.
• WebP — ein modernes Format, das bei gleicher visueller Qualität meist 25–35 % kleinere Dateien als JPEG erzeugt und wie PNG Transparenz unterstützt. Von allen aktuellen Browsern unterstützt. Für die meisten Webbilder heute ist WebP der beste Standard.
• SVG — überhaupt kein komprimiertes Fotoformat, aber für einfache Logos und Icons bleibt ein Vektor-SVG in jeder Größe rasiermesserscharf und ist oft nur wenige Kilobyte groß.

Wie viel Qualität kannst du opfern?

Bei verlustbehafteten Formaten wird die Qualität meist auf einer Skala von 0–100 angegeben. Widersprüchlicherweise ist das obere Ende Verschwendung: der Unterschied zwischen Qualität 100 und 80 ist oft nicht zu sehen, doch Qualität 80 kann die halbe Dateigröße bedeuten. Ein praktischer Ausgangspunkt:

• Qualität 75–85 — der Sweetspot für die meisten Webfotos. Große Ersparnis, kein sichtbarer Verlust beim typischen Betrachten.
• Qualität 60–75 — in Ordnung für große Hintergrundbilder oder Thumbnails, bei denen absolute Schärfe nicht entscheidend ist.
• Unter 60 — die Ersparnis flacht ab, während Artefakte (blockiger Himmel, Halos um Kanten) auffällig werden. Meist nicht lohnenswert.

Der beste Ansatz ist vergleichen, nicht raten. Komprimiere bei einer bestimmten Qualität, sieh dir das Ergebnis in der Größe an, in der es tatsächlich angezeigt wird, und senke die Qualität schrittweise, bis du gerade einen Unterschied zu erkennen beginnst — dann eine Stufe zurück.

Verkleinern, bevor du komprimierst

Komprimierung kann nur so viel ausrichten, wenn das Bild weit größer ist als nötig. Ein 4000 Pixel breites Foto, das in einer 800 Pixel breiten Spalte angezeigt wird, trägt fünfmal mehr Pixel, als je jemand sieht. Das Bild grob auf die Anzeigemaße zu verkleinern — und dann zu komprimieren — ist oft die größte Einzelersparnis von allen. Unser Bild-Resizer erledigt Zuschneiden, Drehen und Skalieren in einem Durchgang, komplett in deinem Browser.

Ein einfacher Ablauf

1. Verkleinere das Bild auf die größte Größe, in der es angezeigt wird.
2. Wähle WebP, wenn möglich, JPEG für maximale Kompatibilität, PNG für Grafiken mit Transparenz.
3. Komprimiere bei Qualität ~80 und betrachte das Ergebnis in Anzeigegröße.
4. Senke die Qualität, bis du einen Unterschied bemerkst, dann eine Stufe zurück.

Die letzten drei Schritte erledigst du in Sekunden mit unserem Bildkompressor: wirf ein oder viele Bilder hinein und sie werden sofort auf deinem eigenen Gerät komprimiert — nichts wird auf einen Server hochgeladen, daher ist es für private Fotos sicher. Vergleiche die Vorher-Nachher-Größen und lade herunter, wenn du mit dem Ergebnis zufrieden bist.