Bilddateigröße ohne sichtbaren Qualitätsverlust verringern

Die drei Stellschrauben in der richtigen Reihenfolge

1. Abmessungen. Wie viele Pixel das Bild enthält. Wenn du Breite und Höhe halbierst, entfernst du drei Viertel der Pixel, und die Dateigröße sinkt ungefähr entsprechend.
2. Format. Wie diese Pixel kodiert werden. Eine falsche Wahl – ein Foto als PNG oder ein Logo als JPG – kann ein Vielfaches der nötigen Bytes kosten.
3. Qualitätseinstellung. Wie viele Details ein verlustbehafteter Encoder verwirft. Nützlich, aber der kleinste der drei Stellhebel und der einzige, der das Aussehen des Bildes tatsächlich beeinträchtigen kann.

Die Reihenfolge ist wichtig, weil die Stellschrauben multiplikativ wirken. Ein Foto mit 4000×3000 kann als PNG 12MB groß sein. Die Skalierung auf 1200×900 reduziert das ungefähr auf ein Zehntel. Der Wechsel zu JPG verringert es um einen weiteren großen Faktor. Erst dann entfaltet die Reduktion der Qualität von 95 auf 82 ihren Nutzen. Zu diesem Zeitpunkt wird ein kleiner Rest reduziert, statt ein Problem zu kaschieren, das eine Größenänderung hätte lösen sollen.

In umgekehrter Reihenfolge erhältst du das schlechteste Ergebnis: ein auf Qualität 40 heruntergedrücktes Bild, um ein Größenlimit einzuhalten, das immer noch viermal so viele Pixel wie nötig enthält, sichtbare Artefakte hat und größer ist, als es sein sollte. Sieht ein Bild nach der Kompression schlecht aus, wurde meist der erste Schritt übersprungen.

Stellhebel 1: Vor dem Komprimieren skalieren

Wähle die Zielabmessungen nach dem tatsächlichen Anzeigeort des Bildes und nicht nach den Abmessungen, die die Kamera erzeugt hat.

Behalte zwei Multiplikatoren im Blick. Für hochauflösende Displays brauchst du ungefähr die doppelte CSS-Pixelbreite, um ein scharfes Ergebnis zu erhalten: Ein mit 600px Breite angezeigtes Bild sollte in der Datei etwa 1200px breit sein. Jenseits von 2x sinkt der Nutzen stark: 3x ist fast nicht von 2x zu unterscheiden, enthält aber mehr als doppelt so viele Bytes.

Stellhebel 2: Format zum Inhalt wählen

Eine Kurzfassung der Entscheidung, ausführlich behandelt in unserem Leitfaden zum Formatvergleich:

• Fotografien → verlustbehaftetes WebP oder JPG, wenn Kompatibilität wichtig ist. Ein als PNG gespeichertes Foto ist der häufigste und teuerste Formatfehler und benötigt oft das Fünf- bis Zehnfache der erforderlichen Größe.
• Flächige Grafiken, Logos, Screenshots, Pixel-Art → PNG, idealerweise Paletten-PNG. JPG erzeugt bei flächigen Grafiken sichtbare Überschwinger um jede Kante und eine größere Datei als PNG. Verlustbehaftetes WebP ist hier ebenfalls häufig größer als ein Paletten-PNG.
• Alles, was Transparenz benötigt → PNG oder verlustbehaftetes WebP bei fotografischen Inhalten. JPG hat keinen Alphakanal und füllt deine Transparenz mit einer einheitlichen Farbe.

Ein echtes Beispiel: Eine Social-Card als PNG mit 606KB war nach einem erneuten Export als JPG mit Qualität 82 nur noch 81KB groß – eine Reduktion um 87% durch die Änderung eines einzigen Auswahlfelds. Es war ein fotografisches Bild, gespeichert in einem Format für flächige Grafiken. In einem anderen Fall verringerte die Umwandlung von Seitenhintergründen mit weichen Verläufen von PNG zu WebP die Größe um ungefähr 57%. Gleichmäßige Inhalte ohne harte Kanten sind genau das, was verlustbehaftete Kodierung am besten verarbeitet.

Stellhebel 3: Qualitätseinstellung und ihre Grenzen

Bei JPG und verlustbehaftetem WebP ist Qualität ein Wert von 0 bis 100, der steuert, wie stark der Encoder quantisiert. Der Zusammenhang zwischen diesem Wert und der Dateigröße ist stark nichtlinear. Wenn du den Verlauf der Kurve kennst, weißt du, welchen Bereich du wählen solltest.

Der Wechsel von 100 auf 90 halbiert die Datei oft ohne wahrnehmbaren Verlust. Von 90 auf 80 wird ein weiterer großer Teil eingespart, bei fotografischen Inhalten weiterhin unsichtbar. Von 80 auf 70 ist die Einsparung merklich kleiner, während Unterschiede sichtbar werden. Unter 60 kostet jeder weitere Schritt sichtbare Qualität bei sinkendem Nutzen. Das ist die Kurve des abnehmenden Ertrags und der Grund, warum Qualität 80 eine so verbreitete Voreinstellung ist: Sie liegt genau am Wendepunkt.

Der Bildinhalt verschiebt den Kipppunkt. Unruhige, detailreiche Fotos verbergen Artefakte gut und vertragen 70. Bilder mit großen glatten Flächen – Himmel, Studiohintergründe, Farbverläufe – zeigen früher Farbabstufungen und benötigen 85. Inhalte mit Text oder scharfen Kanten sollten überhaupt nicht in einem verlustbehafteten Format gespeichert werden.

Wann PNG Palettenquantisierung braucht

PNG hat keinen Qualitätsregler, aber eine Stellschraube, die die meisten nie nutzen: die Verringerung der Farbanzahl. Ein Truecolor-PNG speichert vier Bytes pro Pixel; ein Paletten-PNG speichert einen Ein-Byte-Index in einer Tabelle mit bis zu 256 Farben. Bei Bildern, die tatsächlich wenige Farben verwenden, ist die Palettenversion um ein Mehrfaches kleiner und mathematisch identisch, sofern jede Farbe des Bildes in die Tabelle passt.

Gut geeignet:

• Logos, Symbole und flächige Illustrationen mit wenigen Farben.
• Pixel-Art, die ohnehin meist mit einer begrenzten Palette erstellt wird.
• Bildschirmaufnahmen von Benutzeroberflächen, die meist aus einfarbigen Flächen und Text bestehen.
• Diagramme und Schaubilder.

Schlecht geeignet sind Fotos, alles mit weichen Verläufen und Bilder mit weich geglätteten Kanten vor vielen unterschiedlichen Hintergründen. Die Quantisierung erzeugt dort Farbstufen. Ein guter Quantisierer nutzt Dithering, um sie zu kaschieren. Das fügt jedoch Rauschen hinzu, das sich schlecht komprimieren lässt und die Einsparung teilweise wieder aufhebt.

Mit Alpha musst du hier vorsichtig umgehen. PNG mit Farbpalette unterstützt Transparenz pro Paletteneintrag. Ein teilweise transparenter geglätteter Rand benötigt deshalb für jede Mischstufe einen Palettenplatz. Ein Symbol mit weichem Schatten kann einen großen Teil der 256 Einträge allein für Schattenabstufungen verbrauchen. Prüfe das Ergebnis vor der Veröffentlichung auf einem kontrastierenden Hintergrund.

Metadaten entfernen

Kamera- und Handyfotos enthalten EXIF-Blöcke mit Belichtungseinstellungen, Objektivmodell, Zeitstempeln, Vorschaubildern und oft GPS-Koordinaten. Designwerkzeuge ergänzen eigene Datenblöcke. Das sind meist einige Dutzend Kilobyte und manchmal deutlich mehr, wenn ein eingebettetes Farbprofil oder Vorschaubild enthalten ist.

Bei einem Foto mit 2MB fällt das kaum ins Gewicht. Bei einem Vorschaubild mit 40KB machen 15KB EXIF-Daten jedoch mehr als ein Drittel der Datei aus. Und neben der Größe gibt es einen zweiten Grund: GPS-Koordinaten in einem veröffentlichten Foto verraten allen, wo es aufgenommen wurde. Dieses Datenschutzproblem entdecken viele erst durch unangenehme Erfahrungen.

Zwei Dinge solltest du bewusst behalten: das Farbprofil, wenn das Bild nicht bereits sRGB verwendet, da sein Entfernen Farben verschiebt, sowie Urheberrechtsfelder, falls du darauf angewiesen bist. Beachte, dass jedes browserbasierte Werkzeug, das über eine Arbeitsfläche neu kodiert, Metadaten automatisch als Nebeneffekt entfernt. Die Arbeitsfläche enthält nur Pixel und sonst nichts.

Vorgehensweisen für gängige Ziele

Unter einem E-Mail-Anhangslimit von 25MB

Meist ein Stapel Handyfotos. Skaliere jedes an der langen Kante auf 2000px und exportiere JPG mit Qualität 85. Ein typisches 12-Megapixel-Foto liegt dann bei ungefähr 500KB, sodass vierzig hineinpassen. Wenn du mehr brauchst, reduziere zuerst auf 1600px, bevor du die Qualität senkst. Der Empfänger betrachtet die Bilder auf einem Bildschirm und druckt kein Poster.

Unter einem Formular- oder Upload-Limit von 100KB

Üblich bei Profilfotos, Dokument-Uploads und Bewerbungen. Gehe von oben nach unten vor: Verkleinere auf die maximale Anzeigegröße, oft 800px oder weniger, exportiere JPG mit Qualität 80 und prüfe das Ergebnis. Liegt die Datei noch über der Grenze, gehe auf 70 und verringere dann die Abmessungen weiter. Vermeide Qualität unter 60: Ein Bild mit 600px bei Qualität 75 sieht bei gleicher Dateigröße deutlich besser aus als eines mit 1200px bei Qualität 45.

Webseitenbilder

Strebe weniger als 200KB pro Inhaltsbild und weniger als 500KB für ein Hero-Bild an. Stelle mehrere Größen bereit über srcset damit Handys nicht die Desktop-Version herunterladen. Lade alles unterhalb des sofort sichtbaren Bereichs verzögert. Prüfe außerdem, was die Seite tatsächlich anfordert. Ein häufiger Fehler ist ein CMS, das das 4000px-Original mit einer CSS-Breite von 600px ausliefert. Dann liegt das ganze Problem an einer Vorlageneinstellung, nicht an der Bilddatei.

Texturbudgets für Spiele

Hier gelten andere Regeln, denn entscheidend ist der GPU-Speicher, nicht die Downloadgröße. Der GPU-Speicherbedarf wird durch Abmessungen und Texturformat bestimmt, nicht durch die komprimierte PNG-Größe auf der Festplatte. Ein stark optimiertes und ein aufgeblähtes PNG belegen nach dem Laden gleich viel VRAM. Behalte die Quellgrafik verlustfrei, verwende Zweierpotenzen für Texturgrößen, wenn dein Ablauf sie verlangt, und überlasse die GPU-Kompression den Importeinstellungen der Engine. Die Optimierung des PNG selbst beeinflusst nur die Installationsgröße.

Häufig gestellte Fragen