Ratgeber

Das PNG-Format – der Guide für ein perfektes Ergebnis

Seite 2 / 2

5 Tricks zur Verringerung der Dateigröße

Wie versprochen bekommt ihr noch fünf praktische Tipps, die euch möglichst viel Dateigröße einsparen können.

1. Nur Original-Daten komprimieren

Achtet darauf, immer die Original-Daten zu komprimieren.

(Grafik: Christoph Erdmann)

Das Ursprungsbild ist hier ein JPG. Dieser Bild-Kompressions-Algorithmus hat Artefakte erzeugt, die für die PNG-Kompression „tödlich“ sind. Es sind Unmengen an Farben und Bildmustern entstanden, die im Original nicht enthalten waren – jetzt aber gespeichert werden müssen.

An der Compression-View erkennt ihr, ob ein Bild schon einmal zum JPG konvertiert wurde. Sieht das Ergebnis „blockartig“ aus, versucht ihr besser, an die Original-Daten des Bildes zu kommen.

Das Ergebnis sollte eher folgendermaßen aussehen und um einiges kleiner sein:

(Grafik: Christoph Erdmann)

2. Sauberes Klonen von Objekten

Wollt ihr eine Grafik aus geklonten Objekten perfekt als PNG speichern, müssen diese absolut identisch sein, damit nur das erste Objekt Speicherplatz belegt. Achtet darauf, nicht versehentlich etwas um einen halben Pixel zu verschieben oder auf andere Weise zu verändern. Auch hier könnt ihr das Ergebnis mithilfe der Compression-View überprüfen.

3. Acht-Bit-Farbtiefe verwenden

Im Normalfall sollte die Qualität eines Acht-Bit-PNGs (maximal 256 Farben) immer ausreichend sein. Fehlende Töne werden per Dithering, also mithilfe von Punktmustern, simuliert. So entsteht der Eindruck zusätzlicher Farben und Graustufen.

„Flächige“ Bilder wie Logos benötigen fast nie 256 Farben. Eine gute Faustregel: Rechnet pro Farbe im Bild acht weitere hinzu, damit die Kantenglättung sauber aussieht. Besteht ein Logo aus Rot, Blau und Schwarz, sollte es reichen, den Farbregler auf 24 zu stellen.

4. Dirty Transparency

Als Dirty Transparency werden Bildbereiche bezeichnet, die zwar zu 100 Prozent transparent sind, aber in den Farbkanälen Rot, Grün und Blau noch sämtliche Farbinformationen beinhalten. Das passiert häufig bei maskierten Bildern und verschwendet Speicherplatz durch nicht sichtbare Bildinformationen.

Der Bereich um Lena wirkt transparent, in der Compression-View seht ihr aber deutlich, dass dort Daten komprimiert wurden:

(Grafik: Christoph Erdmann)

Das gesäuberte Bild ist elf Prozent kleiner – bei gleichem Bildeindruck:

(Grafik: Christoph Erdmann)

5. Posterization

Posterization reduziert die Farben innerhalb eines Bildes. RGB-Bilder haben oft mehr Farben, als das menschliche Auge unterscheiden kann. Durch die Posterization werden sehr ähnliche Töne zusammengefasst, was in den seltensten Fällen als störend wahrgenommen wird.

Durch mehr gleichartige Farbwerte arbeiten die PNG-Filter effizienter – und die Datei wird kleiner.

(Grafik: Christoph Erdmann)

Startseite
  • Seite:
  • 1
  • 2

Bitte beachte unsere Community-Richtlinien

4 Reaktionen
Christoph Erdmann

Hallo Dennis,

für eine kleine Dateigröße kann ich dir eigentlich jedes Tool empfehlen, in dem du Einstellungen machen kannst. Kannst du keine machen, können die Ergebnisse nur "OK" sein. Dafür hast du weniger Arbeit, wie z.B. bei tinyPNG. Da der Qualitätsverlust beim Übergang zu PNG-8 subjektiv sehr unterschiedlich wahrgenommen werden kann, gibt es halt keine "perfekte" Einstellung.

Viele Grüße,
Christoph

Antworten
TimStollberg

Hallo Corvin,
hallo Dennis,

auf Christoph Erdmann Seite ( https://compress-or-die.com/ )
findet ihr in sein "PNG Tool" (rechts oben im Menü auf PNG klicken).

Nach Hochladen eines Bildes wird der Compression View des Bildes angezeigt.

Falls jemand weitere Tools zur Ansicht des Compression View kennt (vllt. sogar offline) wäre das auch für mich sehr interessant.

Viele Grüße
Tim

Antworten
DennisVibrand

Christoph Erdmann, vielen Dank für diesen aufschlussreichen Beitrag!
Wie mein Vorkommentator auch von mir die Frage: Wie bekommt man die Compression View zu Gesicht?
Kannst du einen Online Compressor empfehlen wie z. B. tinypng.com, für schnelles, verlustfreies komprimieren?

Liebe Grüße,
Dennis

Antworten
Corvin

Spannend. Wie kommt man an die Compression View?

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung