Webdesign

PNG-Optimierung online und lokal: CompressPNG und ImageAlpha kratzen am Thron von TinyPNG

25. März 2013
von

Regelmäßige Leserinnen und Leser des Dr. Web Magazin kennen seit einigen Monaten den großartigen Bildoptimierer TinyPNG aus den Niederlanden. Viele, so wie ich, werden den Schrumpf-Service fest in den Arbeitsalltag aufgenommen haben. Über 70% Ersparnis in der Dateigröße bringt TinyPNG zuverlässig, ohne sichtbar die Qualität zu beeinträchtigen. Der neue Dienst CompressPNG aus Tschechien tritt an, TinyPNG zu beerben. Tatsächlich ist CompressPNG leistungsfähiger. Für Mac-User fanden wir eine lokale Alternative zur Prager Bilderquetsche…

TinyPNG: Schnell und unkompliziert

TinyPNG stellten wir vor einigen Monaten schon einmal ausführlich vor. Deshalb verweise ich hier lediglich auf den damaligen Beitrag und erläutere die Grundlagen des Dienstes nicht erneut. Im Vergleich zu unserem Artikel aus dem Sommer 2012 hat sich bei TinyPNG nicht sonderlich viel getan, was allerdings bei den ohnehin überzeugenden Ergebnissen auch gar nicht erforderlich ist. Die wichtigste Neuerung stellt die deutlich erhöhte Größengrenze für PNGs dar. Diese liegt jetzt bei 3 MB und lag danals nur bei 1 MB.

tinypng-screenshot
TinyPNG ohne Schwächen: Auch bei meinem Testbild reduzierte es wieder 72%

Ansonsten bleibt TinyPNG das Rundum-Sorglos-Paket für die schnelle Bildoptimierung zwischendurch. Einfach bis zu 20 Bilder im PNG-Format von der lokalen Festplatte auswählen und per Drag and Drop in den Dienst laden.

codeschool-devtools-tinypng_04
So sieht das Testbild nach Behandlung mit TinyPNG aus

Sobald die Bilder dort angekommen sind, beginnt der Schrumpfungsprozess, der in meinem Fall stabil bei um 70% liegt. Dabei komprimiere ich fast ausschließlich Screenshots, naheliegend angesichts meiner Tätigkeit. Ist TinyPNG mit der Arbeit fertig, kann mittels eines Download-Links jedes Bild einzeln wieder heruntergeladen werden. Fertig!

CompressPNG: Leistungsfähiger als TinyPNG durch mehr Kontrolle

CompressPNG aus dem Hause der tschechischen Agentur Mediafox Marketing, beheimatet im schönen Prag, bietet im Grunde die zu TinyPNG identische Dienstleistung an. Dennoch gibt es einige entscheidende Unterschiede.

  • CompressPNG kann ebenso wie TinyPNG in einem Rutsch mit bis zu 20 Bildern ausgestattet werden.
  • Bei CompressPNG sind jedoch nicht nur PNGs wie bei TinyPNG erlaubt. Stattdessen dürfen auch BMP, GIF, ICO und vor allem JPGs hochgeladen werden. CompressPNG konvertiert die Uploads automatisch in PNGs.
  • CompressPNG macht keine Angaben zur maximalen Dateigröße. In meinen Tests konnte ich Bilder bis zu einer maximalen Größe von 5 MB hochladen. Erst darüber kam es zu Fehlermeldungen.

Soweit zu den Basics. In Sachen User-Interface und weiteren Bearbeitungsmöglichkeiten unterscheidet sich CompressPNG bis zur Unkenntlichkeit von TinyPNG. Das hat Vor-, aber auch Nachteile, wobei die Kategorisierung als Vor- oder Nachteil weitgehend im Auge des Betrachters liegt.

TinyPNG ist schnell und entspricht dem Workflow eines Redakteurs in optimaler Weise. Screenshots machen, in einem Rutsch zu TinyPNG hochladen, kurz warten, alles wieder herunterladen, fertig.

Bei CompressPNG gestaltet sich diese Aufgabe aufwändiger. Zunächst bestückt man die Upload-Queue des Dienstes per Drag and Drop oder via “Select Files” mit den Screenshots. Danach klickt man auf “Upload Queue”. Sind alle Bilder hochgeladen, wählt man die Thumbnails in der Übersicht einzeln an.

compress-png-default
CompressPNG ohne manuelle Änderungen: ergebnis-identisch zu TinyPNG, aber aufwändiger in der Bedienung

Ist das erfolgt, wird ein Bildausschnitt des hochgeladenen Originals unterhalb der Queue angezeigt. Nach kurzer Bedenkzeit erscheint rechts daneben ein Bildausschnitt, der optisch das geschätzte Ergebnis einer Kompression mit den Standardwerten zeigt. Diese Standardwerte entsprechen den Standardwerten auf TinyPNG, also Kompression zu PNG-8 mit 256 Farben und voller Transparenz.

Im Standard entspricht das zu erwartende Kompressionergebnis relativ exakt dem mit TinyPNG zu erzielenden Schrumpfungsgrad. Ein kleines Feld mit Pfeilnavigation unterhalb der Bildausschnitte erlaubt die Verschiedung des sichtbaren Ausschnitts, um etwa relevantere Sektionen des Bildes optisch prüfen zu können.

codeschool-devtools-04_compress_256_min
Mein Testbild nach Behandlung mit CompressPNG mit Standardwerten

Erst der Klick auf “Compress” rechts neben dem Bildausschnitt, unterhalb des Sliders löst den Schrumpfungsvorgang wirklich aus. Dabei kommt in der Regel noch ein etwas besseres Ergebnis heraus, als zunächst im Wege der Vorberechnung geschätzt wurde. Ist die Kompression abgeschlossen, wird das Bild automatisch in den spezifizierten Download-Ordner auf der lokalen Festplatte heruntergeladen.

Bis zu dieser Stelle haben wir ein mehr oder weniger zu TinyPNG identisches Ergebnis erzielt, dabei aber deutlich mehr Aufwand betreiben müssen. Für einen technischen Redakteur bleibt daher TinyPNG die erste Wahl. Denn bei diesem geht es in erster Linie um Geschwindigkeit.

Webdesigner indes werden eher Wert auf ein optimales Ergebnis, weniger auf eine möglichst kurze Bearbeitungsdauer legen. Und an dieser Stelle kann CompressPNG punkten. Das fängt schon damit an, dass CompressPNG überhaupt Möglichkeiten zur Ergebnisbeurteilung und -steuerung bietet. Die verschiebbaren Bildausschnitte erlauben es, kritische Bildbereiche in den Fokus zu nehmen, um daran gezielt die maximal mögliche Kompression fein zu tunen.

Das ergibt deshalb Sinn, weil CompressPNG eben nicht wie TinyPNG auf die Standardwerte festgelegt ist. Der tschechische Wettbewerber bietet vielmehr die Möglichkeit, von den 256 Farben ausgehend weiter zu reduzieren. Logisch dabei ist, dass mit sinkender Farbanzahl auch die Dateigröße weiter sinkt.

compress-png-tuned
CompressPNG mit der Reduktion auf 129 Farben

In meinem Testbild konnte ich die Farbanzahl ohne nennenswerte sichtbare Einschränkung auf 129 Farben senken und so noch einmal eine Ersparnis von einem knappen Viertel bezogen auf das bereits geschrumpfte Ergebnis erzielen. Bei Designs mit vielen Bildern summiert sich das schnell zu nennenswerten Größenordnungen. Wer sich übrigens fragt, warum ich den krummen Wert von 129 wählte, der versuche mal, in CompressPNG 128 Farben zu wählen ;-)

codeschool-devtools-04_compress_128_min
Mein Testbild nach Reduktion der Farben auf 129 in CompressPNG

compress-vs-tiny-filesizes
Dateigrößen: keine riesigen Unterschiede, aber deutliche Abweichungen

Fazit: Wem die Standardwerte mit 256 Farben reichen, immerhin führt das bereits zu Größenreduzierungen um 70%, kann getrost bei TinyPNG bleiben. Der Dienst erzielt unter dieser Voraussetzung deutlich schnellere Ergebnisse. Wer allerdings das Maximum aus seinen PNGs rausquetschen möchte, sollte CompressPNG vorziehen. Der langwierigere Workflow wird in diesen Fällen eher eine untergeordnete Rolle spielen.

“Aber, da gibt es doch Software X, Y und Z und die sind noch besser”

Beiträge dieser Art führen immer dazu, dass Kommentatoren lokal zu installierende Software empfehlen, die angeblich zu gleich guten oder noch besseren Ergebnissen führen soll. Das führt zu Irritationen bei dem einen oder anderen Leser, der dann nicht umhin kann, zu befürchten, der Beitrag greife zu kurz. Daher will ich das gleich im Vorhinein thematisieren.

PNGGauntlet und ImageOptim – nur verlustfreie Kompression

Ich habe PNGGauntlet (Windows) und ImageOptim (Mac OS X) ausprobiert. Beide Softwares integrieren diverse freie Compression-Engines, etwa PNGout, OptiPNG, AdvPNG und andere. Die Kombination verschiedener Verfahren führt stets zu einer erheblichen Bearbeitungsdauer seitens der Software. Schnell mal ein Bild optimieren ist damit nicht machbar. Und ja, meine Hardware ist stets aktuell.

Schwerer als der Geschwindigkeitsnachteil indes wiegt das Ergebnis. Denn das ist nach allen meinen Tests stets genau das geblieben: schwer. Die Software konnte nicht annähernd die gleichen oder auch nur entfernt ähnliche Ergebnisse erzielen, wie es TinyPNG oder CompressPNG schafften. Ich gehe davon aus, dass es daran liegt, dass die lokalen Lösungen rein auf verlustfreie Kompression setzen. Das Runterrechnen auf 256 Farben, also die gezielte Verlustoptimierung sehen sie nicht vor.

ImageAlpha – gute Ergebnisse, nur für Mac

Eine Ausnahme stellt lediglich die nur für den Mac verfügbare Lösung ImageAlpha dar. Diese erlaubt das gezielte Reduzieren der Farbanzahl und einige weitere Parameter mehr. Erste Tests ergaben etwas schlechtere Werte als unter Nutzung von TinyPNG oder CompressPNG. Der Abstand war indes nicht riesig. Ansonsten bietet ImageAlpha ein solides Feature-Set, das sich nicht zu verstecken braucht.

image-alpha
Die UI ist nicht unbedingt hoch-innovativ, aber die Ergebnisse stimmen

Wer also einen Mac sein eigen nennt, sollte sich ImageAlpha auf jeden Fall besorgen. Die Software ist kostenlos verfügbar und vom Bedienkomfort in etwa mit CompressPNG vergleichbar, durch die lokale Bearbeitung allerdings deutlich schneller im Processing. Die unkomplizierte Bedienung und den gestrafften Ablauf eines TinyPNG kann aber auch ImageAlpha nicht ersetzen.

Links zum Beitrag

ist seit 1994 im Netz unterwegs, aber bereits seit fast 30 Jahren in der IT daheim. Seit 2008 schreibt er für Dr. Web, seit 2012 ist er Chefredakteur des Magazins. Man findet ihn auch auf Twitter und Facebook, aktiver ist er allerdings auf Google+.

8 Kommentare zu „PNG-Optimierung online und lokal: CompressPNG und ImageAlpha kratzen am Thron von TinyPNG
  1. Peter am 25. März 2013 um 10:58

    Hallo,
    danke für den sehr ausführlichen Überblick über gängige Tools für die Bildkompression. Aber wieso kannst du nicht 128 Farben einstellen, das geht doch wunderbar mit den plus / minus Symbolen?

    • Dieter Petereit am 25. März 2013 um 11:26

      Hast Recht. Ich hätte den Slider für die Grobpositionierung und Plus oder Minus für die eine Farbe weniger nehmen sollen.

  2. Mathias am 25. März 2013 um 11:01

    Hallo,

    ich habe gerade CompressPNG mit einer 91KB JPEG-Datei getestet und leider festgestellt, dass die PNG-Datei größer als das Original. Gute Ergebnisse habe ich aber mit JPEGmini.com erzielt.

    Grüße
    Mathias

    • Dieter Petereit am 25. März 2013 um 11:26

      Deswegen kommt in der Überschrift zu diesem Artikel auch 3 x der Begriff PNG vor ;-)

      • Mathias am 25. März 2013 um 17:08

        Ist mir schon klar, aber der beschriebene Vorteil bzgl. CompressPNG und weiteren Dateiformaten ist nur so lange ein Vorteil, bis man erkennt, dass es nur mit PNG effizient ist. Das war der eigentliche Hinweis. :)

      • Dieter Petereit am 25. März 2013 um 20:05

        Da ist was dran. Vielleicht sollte man noch erwähnen, dass man Bilder, die richtigerweise als JPG vorliegen, niemals nach PNG konvertieren sollte.

  3. Stefan am 26. März 2013 um 19:14

    Hallo,

    eine Frage zu Tiny PNG vs. Fireworks: Wenn ich mit Fireworks ein Bild als PNG 8, Farben “Exakt” exportiere, dann bekomme ich genau die gleiche Dateigröße wie wenn Tiny PNG die Kompression erledigt. Und auch die Fireworks PNG 8-Dateien funktionieren im IE 6 inklusive Transparenz. Kommt bei beiden Tools das gleiche Verfahren zum Einsatz?

  4. […] The article was originally published in our German Dr. Web Magazin. […]

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!