Aus einem 200-KB-PNG werden nach dem Komprimieren 350 KB. Das Werkzeug ist nicht defekt – entscheidend ist, ob das Verfahren zum Bildinhalt passt. Wer das versteht, steuert die Dateigröße, statt Parameter zu raten.
Zwei Arten der Kompression
Verlustbehaftete Kompression (JPEG, verlustbehaftetes WebP) verwirft hochfrequente Details, die das Auge kaum wahrnimmt, und reduziert die Größe oft auf ein Zehntel. Verlustfreie Kompression (PNG, verlustfreies WebP) ändert kein Pixel, sondern packt die Daten neu – die Rate hängt davon ab, wie viele wiederkehrende Muster das Bild enthält.
Daraus folgt: Verlustfrei eignet sich hervorragend für Flächen, große einfarbige Bereiche und regelmäßige Linien und praktisch nicht für Fotos – rauschige, verlaufsreiche, detaildichte Bilder –, bei denen die Datei sogar wachsen kann, weil mehr Indexdaten anfallen.
Drei typische „es wurde größer"-Fälle
1. Ein Foto als PNG speichern. Jedes Pixel unterscheidet sich leicht, PNG findet nichts zum Wiederverwenden und speichert ehrlich. Ein 1920×1080-Foto als PNG sind oft 3–5 MB; als JPEG mit Qualität 80 etwa 300 KB.
2. Screenshot oder Icon als JPEG speichern. Auch umgekehrt scheitert es: Textkanten und Flächen bekommen Moskito-Rauschen, man hebt die Qualität an, um lesbar zu bleiben – und die Datei wird größer als das ursprüngliche PNG. Screenshots gehören in PNG oder verlustfreies WebP.
3. Ein bereits komprimiertes Bild erneut komprimieren. Ein JPEG aus einem Messenger oder von einer Website ist schon verlustbehaftet. Nochmal komprimieren summiert die Verluste: etwas kleiner, deutlich schlechter. Besser die Quelldatei besorgen.
Auswahl nach Inhalt
- Fotos, Porträts, Landschaften → JPEG (Qualität 75–85) oder verlustbehaftetes WebP (25–35 % kleiner bei gleicher Qualität)
- Screenshots, Diagramme, Oberflächen mit Text → PNG oder verlustfreies WebP
- Icons, Logos, einfache Illustrationen → SVG (vektoriell, beliebig skalierbar)
- Transparenz nötig → PNG oder WebP (JPEG kennt keinen Alphakanal)
- Animationen → besser Videoformate oder animiertes WebP; GIF ist am ineffizientesten
Was außer dem Format noch hilft
Maximale Kantenlänge bringt meist mehr als der Qualitätsregler. Bilder im Fließtext brauchen selten mehr als 800–1200 Pixel Breite; ein 4000-Pixel-Original auf 1200 zu skalieren senkt die Größe um eine Zehnerpotenz, ohne sichtbaren Unterschied.
Qualitätsstufe: Bei JPEG liegt der beste Kompromiss zwischen 75 und 85. Darüber steigt die Größe schnell, die Qualität kaum.
Metadaten: Kameradateien enthalten EXIF (Ort, Gerät, Zeit) – das kostet Bytes und kann Privatsphäre kosten. Vor dem Veröffentlichen entfernen.
In einem Satz
Fotos verlustbehaftet, Screenshots verlustfrei, erst Abmessungen verkleinern, dann Qualität justieren.
Eine Tabelle für das Format
Erst den Inhaltstyp bestimmen, dann das Format. Nur diese Reihenfolge erspart wiederholtes Herumprobieren:
| Bildinhalt | Bevorzugtes Format | Einstellungen | Zu beachten |
|---|---|---|---|
| Fotos, Porträts, Landschaften | WebP verlustbehaftet / JPEG | Qualität 75–85 | Keine Transparenz |
| UI-Screenshots, Bilder mit Text | PNG oder WebP verlustfrei | Keine Qualitätsangabe | Nie in JPEG wandeln |
| Icons, Logos, einfache Illustrationen | SVG | — | Vektor, beliebig skalierbar |
| Transparenter Hintergrund nötig | PNG / WebP | — | JPEG hat keinen Alphakanal |
| Kurze Animationen | Animiertes WebP / MP4 | — | GIF ist am ineffizientesten |
Diese Tabelle lernt man nicht auswendig, man stellt vor dem Komprimieren eine Frage: „Ist das ein Foto oder ein Screenshot?" Wer sie richtig beantwortet, muss kaum noch Parameter justieren.
WebP oder AVIF
WebP wird von allen gängigen Browsern unterstützt, erzeugt bei gleicher Qualität 25–35 Prozent kleinere Dateien als JPEG und beherrscht Transparenz sowie Animation. Es ist der sicherste Standard.
AVIF komprimiert noch stärker — weitere 20–30 Prozent unter WebP bei gleicher Qualität —, aber zwei Kosten sind real: Das Kodieren ist deutlich langsamer (in Stapelverarbeitungen um eine Größenordnung), und die Dekodierung ist auf älteren Geräten und Browserständen noch nicht überall verfügbar. Für eine öffentliche Website eignet sich AVIF als progressive Verbesserung, nicht als einziges Format.
Die pragmatische Kombination: WebP als Hauptbild ausliefern und ein JPEG als Rückfall behalten. Das bringt die Größenersparnis, ohne in Randfällen leere Flächen zu zeigen.
Drei Wege mit transparentem Hintergrund
- Transparenz behalten (PNG / WebP). Richtig für Icons, Sticker und alles, was auf einem fremden Hintergrund liegt. Der Preis ist Größe — bei großen halbtransparenten Flächen wie weichen Schatten oder Glanzverläufen bricht die PNG-Kompression deutlich ein.
- Auf eine Volltonfarbe legen (JPEG). Wenn das Bild immer auf Weiß oder einem bekannten dunklen Ton liegt, füllen Sie den Hintergrund damit und speichern als JPEG; die Datei kann auf ein Drittel schrumpfen. Voraussetzung: Die Umgebungsfarbe ändert sich nie.
- In Vektor wandeln (SVG). Ideal für einfarbige Icons: wenige Kilobyte, beliebig scharf, per CSS umfärbbar. Komplexe Verläufe und Texturen lassen sich schlecht vektorisieren.
Ein häufiger Fehler: Ein Logo mit transparentem Hintergrund als JPEG zu speichern macht die leere Fläche zu einem schwarzen oder weißen Block, der auf einer dunklen Seite sofort auffällt. Das ist eine Formatgrenze, kein Softwarefehler.
In welcher Reihenfolge Stapel verarbeitet werden
Die falsche Reihenfolge kostet Qualität ohne Gegenwert. Vier Schritte, die Abfolge ist nicht verhandelbar:
- Zuerst zuschneiden. Entfernen Sie, was nicht gebraucht wird. Vor dem Skalieren zu beschneiden erhält mehr Details und kostet weniger Rechenzeit als umgekehrt.
- Dann skalieren. Auf das 1,5- bis 2-Fache der Anzeigegröße, um hochauflösende Displays abzudecken. Dieser Schritt beeinflusst die Dateigröße stärker als jede Qualitätseinstellung.
- Dann komprimieren. Format und Qualität einmal wählen und fertig — nicht mehrfach komprimieren, um „zu sehen, wie es aussieht", denn jeder verlustbehaftete Durchgang kann weiteren Schaden anrichten.
- Zuletzt Metadaten entfernen. EXIF-Standort, Gerätemodell und Zeitstempel löschen. Kleinere Datei, und keine privaten Daten versehentlich veröffentlicht.
Die häufige Umkehrung — erst komprimieren, dann verkleinern — wirft Details in einem Schritt weg, in dem der Verlust später nicht mehr rückgängig zu machen ist.
Woran man erkennt, ob das Ergebnis noch taugt
Urteilen Sie nicht nach dem Vorschaubild. Stellen Sie Vorher und Nachher bei 100 Prozent nebeneinander und prüfen Sie drei Stellen:
- Textkanten. Verlustbehaftete Kompression versagt hier zuerst und zeigt Ringing oder farbiges Rauschen um die Buchstaben.
- Große Verläufe wie Himmel oder eine glatte Wand. Überkompression erzeugt sichtbares Banding, aus dem weichen Verlauf werden Stufen.
- Feine Textur — Haare, Gras, Stoff. Hier verschwimmt das Detail zuerst.
Wenn alle drei Stellen bestehen, sieht das Bild in Anzeigegröße gut aus — und so werden Web-Bilder praktisch immer betrachtet.