Bildkomprimierung, ohne Farbverläufe zu ruinieren

Bildkomprimierung macht eine Datei auf eine von zwei Arten kleiner. Verlustfreie Komprimierung speichert exakt dieselben Pixel effizienter, wie beim Zippen eines Dokuments. Verlustbehaftete Komprimierung wirft Details weg, von denen sie annimmt, dass du sie nicht bemerkst. Fotos verbergen diesen Verlust gut, weil sie voller Struktur sind. Weiche Verläufe verbergen nichts: Komprimierst du einen sanften Übergang zu stark, zerfällt er in Streifen, Flecken und Blöcke. Die Lösung ist eine Mischung aus dem richtigen Format, der richtigen Qualitätseinstellung und etwas Körnung.

Warum Verläufe beim Komprimieren zerbrechen

Ein Standardbild speichert 256 Stufen für Rot, Grün und Blau. Das klingt nach viel, bis du dir einen zarten dunklen Übergang ansiehst. Von #14101f zu #2a2147 über einen 1920 Pixel breiten Hero steigt der Rotkanal nur um 22 Stufen. Jede Stufe muss sich über etwa 87 Pixel strecken, du bist also schon vor jeder Komprimierung nur einen Schritt von sichtbaren Bändern entfernt.

Verlustbehaftete Komprimierung vereinfacht das Bild dann in kleinen Blöcken und fasst Farben zusammen, die fast gleich sind. In einem Foto sind benachbarte Pixel selten gleich, also ändert sich wenig. In einem Verlauf ist fast jeder Nachbar fast gleich, also fallen ganze Farbstrecken zu einer zusammen. Das ist Banding in Farbverläufen, und dunkle und pastellige Übergänge zeigen es am stärksten.

Die Qualitätseinstellungen, auf die es ankommt

Jedes Format hat einen Hauptregler und ein paar versteckte. Diese Startwerte sind für Grafiken mit Verläufen und Text vorsichtig gewählt; Fotos vertragen meist weniger. Beurteile immer bei 100 % Zoom auf einem guten Bildschirm, nie an einem Vorschaubild.

Chroma Subsampling

Die meisten JPG-Encoder speichern Farbe in halber Auflösung der Helligkeit, geschrieben 4:2:0. In Fotos merkt dein Auge das kaum, aber farbige Schrift und gesättigte Verläufe bekommen weiche, verschmierte Kanten. Viele Tools verstecken das in einer erweiterten Option; ausgeschaltet (4:4:4) kostet es etwas Dateigröße und hält Farbkanten scharf.

PNG-Quantisierung

PNG-Optimierer verkleinern Dateien oft, indem sie sie auf eine Palette von 256 oder weniger Farben reduzieren. Das ist hervorragend für flache Logos und furchtbar für Verläufe, die Tausende Abstufungen brauchen. Zeigt ein komprimiertes PNG plötzlich Banding, ist fast immer die Quantisierung schuld.

Körnung: das beste Mittel gegen Banding

Eine feine Rauschschicht hinzuzufügen klingt verkehrt, ist aber das verlässlichste Mittel. Körnung streut Pixel leicht heller und dunkler, sodass das Auge die Stufen zu einem glatten Übergang verbindet, und der Kompressor hat Struktur zu bewahren statt flacher Strecken zum Zusammenfassen. Außerdem wirkt ein digitaler Verlauf dadurch wie eine Oberfläche. Körnige Farbverläufe zeigt, wie viel du nehmen solltest.

Im Web kannst du Körnung per CSS oder SVG ergänzen, statt sie in ein großes Bild einzubrennen, so bleibt der Download winzig. Siehe Rauschtextur mit CSS. Die Marks von Gradiently tragen Körnung als Teil ihres Materials, ein damit gemachtes Design hat also schon die Struktur, die ihm hilft, die erneute Komprimierung einer Plattform zu überstehen.

Eine Methode, um jedes Bild zu komprimieren

1. 1

   Auf die Anzeigegröße skalieren

   Die größte Ersparnis sind Pixel, die du nie gebraucht hast. Ein Instagram-Post mit 1080×1350 sollte in 1080×1350 exportiert werden, nicht 4000 Pixel breit.

2. 2

   Das Format nach Inhalt wählen

   Text, Logos und Verläufe: PNG oder verlustfreies WebP. Fotos: JPG, WebP oder AVIF. PNG vs. JPG und WebP vs. PNG und JPG gehen tiefer.

3. 3

   Hohe Qualität einstellen, dann senken

   Starte bei 90, geh in Fünferschritten runter und vergleiche bei 100 %. Hör bei der Stufe vor der ersten sichtbaren Änderung im dunkelsten Verlauf auf.

4. 4

   Einmal komprimieren, vom Master

   Bewahre einen unkomprimierten Master auf. Jeder neue Export entsteht daraus, nie aus einem früheren JPG.

5. 5

   Die fertige Datei dort prüfen, wo sie lebt

   Lade einen Testpost hoch oder öffne die Seite auf dem Handy. Plattformen und CDNs komprimieren eventuell erneut.

Komprimierungstools, denen du trauen kannst

Mit der Web-App Squoosh von Google vergleichst du Formate und Einstellungen nebeneinander mit einem Schieberegler, der schnellste Weg zu lernen, was jeder Regler tut. Für ganze Ordner voller Bilder erledigen Encoder auf der Kommandozeile dasselbe in großer Menge.

# JPG at quality 92 with full colour resolution (ImageMagick)
magick hero.png -quality 92 -sampling-factor 4:4:4 hero.jpg

# Lossless WebP for a gradient graphic
cwebp -lossless hero.png -o hero.webp

# Lossy WebP for a photo
cwebp -q 78 photo.png -o photo.webp

Ist dein Verlauf ein Website-Hintergrund, ist das leichteste Bild gar kein Bild: Ein CSS-Verlauf kostet keinen Download und bekommt nie Banding durch Komprimierung, auch wenn er bei breiten dunklen Übergängen trotzdem 8-Bit-Stufen zeigen kann. CSS-Hintergründe zeigt, wie du Verläufe mit einer winzigen Körnungstextur schichtest, und Bilder fürs Web optimieren erklärt, worauf Lighthouse achtet.