# Bildkomprimierung, ohne Farbverläufe zu ruinieren [Canonical HTML page](https://gradiently.design/de/guide/image-compression) Fotos überstehen starke Komprimierung. Farbverläufe nicht. Hier steht, warum ein weicher Übergang zu Streifen wird, und welche Einstellungen ihn glatt halten, während die Datei klein bleibt. ## The short version - Bildkomprimierung macht Dateien kleiner, entweder verlustfrei, indem dieselben Pixel effizienter gespeichert werden, oder verlustbehaftet, indem Details verworfen werden. - Weiche Farbverläufe leiden am stärksten unter verlustbehafteter Komprimierung, weil benachbarte Farben zu sichtbaren Bändern und Blöcken verschmelzen. - Dunkle, zarte Verläufe zeigen zuerst Banding, denn ein 8-Bit-Bild hat zwischen zwei ähnlichen dunklen Farben nur sehr wenige unterschiedliche Werte. - Eine leichte Schicht Körnung oder Dithering kaschiert Banding besser als jede Qualitätseinstellung, weil sie die Stufen aufbricht. - Für Grafiken mit Verläufen exportierst du PNG oder verlustfreies WebP oder nutzt JPG mit Qualität 90 oder höher und ausgeschaltetem Chroma Subsampling. **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. Ein Übergang mit sehr wenigen Stufen: `linear-gradient(90deg, #14101f 0%, #2a2147 100%)` Ähnliche dunkle Farben auf großer Fläche: das klassische Banding-Risiko. Auf einem guten Bildschirm siehst du hier vielleicht schon schwache senkrechte Stufen. 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](https://gradiently.design/de/guide/gradient-banding), und dunkle und pastellige Übergänge zeigen es am stärksten. ### Zeigt leicht Banding - Dunkle Übergänge zwischen ähnlichen Farben - Blasse Pastelltöne auf großer Fläche - Völlig cleane digitale Flächen - Breite Formate wie ein Hero mit 1920×1080 ### Übersteht es gut - Helle Übergänge mit weit entfernten Farbstopps - Verläufe mit Körnung oder Struktur - Unruhige Fotos und Illustrationen - Kleine Bilder mit kurzen Farbstrecken ## 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. | Format | Einstellung für Verlaufsgrafiken | Einstellung für Fotos | Hinweise | | --- | --- | --- | --- | | PNG | Verlustfrei, volle Farbe | Selten die beste Wahl | Verläufe nicht auf 256 Farben reduzieren | | JPG | Qualität 90 bis 95, Subsampling aus (4:4:4) | Qualität 80 bis 85 | Ein JPG nie wiederholt bearbeiten und speichern | | WebP | Verlustfrei oder verlustbehaftet 85 bis 90 | Verlustbehaftet 75 bis 80 | Bester Standard für deine eigene Website | | AVIF | Verlustbehaftet in hoher Qualität, sorgfältig testen | Mittlere Qualität | Kleinste Dateien, langsamer beim Kodieren | Qualitätswerte sind zwischen Formaten und sogar zwischen Tools nicht vergleichbar, nimm sie also als Startpunkte zum Testen. ### 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](https://gradiently.design/de/guide/grainy-gradients) zeigt, wie viel du nehmen solltest. Ein breiter dunkler Website-Hero mit glattem Verlauf und kurzer Headline, der das Banding-Risiko zeigt Ein glatter dunkler Verlauf in 1920×1080 ist das Bild, das nach der Komprimierung am ehesten Banding zeigt. Ein breiter Website-Hero mit strukturiertem, körnigem Verlauf hinter derselben Headline Mit feiner Körnung in der Oberfläche übersteht dieselbe Art von Verlauf die Komprimierung und wirkt wie ein Material. 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](https://gradiently.design/de/guide/css-noise-texture). 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. **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. **Das Format nach Inhalt wählen** Text, Logos und Verläufe: PNG oder verlustfreies WebP. Fotos: JPG, WebP oder AVIF. [PNG vs. JPG](https://gradiently.design/de/guide/png-vs-jpeg) und [WebP vs. PNG und JPG](https://gradiently.design/de/guide/webp-images) gehen tiefer. 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. **Einmal komprimieren, vom Master** Bewahre einen unkomprimierten Master auf. Jeder neue Export entsteht daraus, nie aus einem früheren JPG. 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. ```bash # 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 ``` Führ diese Befehle auf einem unkomprimierten Master aus, nie auf einer Datei, die schon verlustbehaftet komprimiert wurde. 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](https://gradiently.design/de/guide/css-background-image) zeigt, wie du Verläufe mit einer winzigen Körnungstextur schichtest, und [Bilder fürs Web optimieren](https://gradiently.design/de/guide/lighthouse-image-performance) erklärt, worauf Lighthouse achtet. ## FAQ ### Wie komprimiere ich Bilder ohne Qualitätsverlust? Skaliere auf die Größe, in der das Bild angezeigt wird, nutze verlustfreies PNG oder WebP für Grafiken und verlustbehaftetes JPG, WebP oder AVIF in hoher Qualität für Fotos. Vergleiche bei 100 % Zoom, bevor du die Einstellung senkst. ### Warum verursacht Komprimierung Banding in Verläufen? Verlustbehaftete Komprimierung fasst fast identische Farben zusammen, und ein weicher Verlauf besteht fast nur aus fast identischen Nachbarn, also fallen Farbstrecken zu sichtbaren Streifen zusammen. ### Was ist die beste JPEG-Qualitätseinstellung? Etwa 80 bis 85 für Fotos und 90 bis 95 für Grafiken mit Text oder Verläufen. Qualitätswerte unterscheiden sich zwischen Tools, prüfe das Ergebnis also bei 100 % Zoom. ### Reduziert Körnung wirklich Banding? Ja. Feine Körnung bricht die Stufen zwischen Farben auf, sodass das Auge einen glatten Übergang liest, und sie gibt dem Kompressor Struktur zu bewahren statt flacher Flächen zum Zusammenfassen. ### Sollte ich PNG-Dateien komprimieren? Verlustfreie PNG-Optimierung ist immer sicher. Reduziere ein PNG mit Verlauf nicht auf eine Palette mit 256 Farben, das verursacht Banding.