Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 1. April 2019

Bildoptimierung: Mit diesen Tools wird dein PNG federleicht

Regelmäßige Leserinnen und Leser des Dr. Web Magazin ken­nen den groß­ar­ti­gen Bildoptimierer TinyPNG aus den Niederlanden. Viele, so wie ich, wer­den den Schrumpf-Service fest in den Arbeitsalltag auf­ge­nom­men haben. Über 70% Ersparnis in der Dateigröße bringt TinyPNG zuver­läs­sig, ohne sicht­bar die Qualität zu beein­träch­ti­gen. Das bedeu­tet indes nicht, dass der Dienst alter­na­tiv­los wäre. Ich habe die­sen und ein paar ande­re für euch näher betrach­tet.

TinyPNG: Schnell und unkompliziert

TinyPNG stell­te ich schon ein­mal aus­führ­lich vor. Deshalb ver­wei­se ich hier ledig­lich auf den dama­li­gen Beitrag und erläu­te­re die Grundlagen des Dienstes nicht erneut. Im Vergleich zum Versionsstand aus unse­rem Artikel hat sich bei TinyPNG nicht son­der­lich viel getan, was aller­dings bei den ohne­hin über­zeu­gen­den Ergebnissen auch gar nicht erfor­der­lich ist. Die wich­tigs­te Neuerung stellt die deut­lich erhöh­te Größengrenze für PNGs dar. Diese liegt jetzt bei 5 MB. Zum Start vor eini­gen Jahren akzep­tier­ten sie nur Grafiken mit nicht mehr als 1 MB.

Inzwischen kannst du dir für einen jähr­li­chen Obolus von 25 USD Zugang zum soge­nann­ten Web Interface Pro sichern. Damit ent­fal­len bei­de Begrenzungen und du kannst belie­big vie­le, belie­big gro­ße Bilder per Batch hoch- und wie­der run­ter­la­den. Rechne das mal auf eine Datei um. An sich ist das Angebot ein Nobrainer.

tinypng-screenshot
TinyPNG ohne Schwächen: Auch bei mei­nem Testbild redu­zier­te es wie­der 72%

Damit bleibt TinyPNG das Rundum-Sorglos-Paket für die schnel­le Bildoptimierung zwi­schen­durch. Einfach bis zu 20 Bilder im PNG-Format von der loka­len Festplatte aus­wäh­len 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 ange­kom­men sind, beginnt der Schrumpfungsprozess, der in mei­nem Fall sta­bil bei um 70% liegt. Dabei kom­pri­mie­re ich fast aus­schließ­lich Screenshots, nahe­lie­gend ange­sichts mei­ner Tätigkeit. Ist TinyPNG mit der Arbeit fer­tig, kann mit­tels eines Download-Links jedes Bild ein­zeln wie­der her­un­ter­ge­la­den wer­den. Fertig!

CompressPNG: Leistungsfähiger als TinyPNG

CompressPNG aus dem Hause der tsche­chi­schen Agentur Mediafox Marketing, behei­ma­tet im schö­nen Prag, bie­tet im Grunde die zu TinyPNG iden­ti­sche Dienstleistung an. Dennoch gibt es eini­ge ent­schei­den­de Unterschiede.

  • CompressPNG kann eben­so wie TinyPNG in einem Rutsch mit bis zu 20 Bildern aus­ge­stat­tet wer­den.
  • CompressPNG macht kei­ne Angaben zur maxi­ma­len Dateigröße. In mei­nen Tests konn­te ich Bilder bis zu einer maxi­ma­len Größe von 5 MB hoch­la­den. Erst dar­über kam es zu Fehlermeldungen.
  • Zusätzlich zu CompressPNG erreichst du über zwei Tabs die optisch iden­ti­schen Dienste Compress JPG und CompressPDF, die genau­so funk­tio­nie­ren, nur eben mit JPG respek­ti­ve PDF grö­ßen­re­du­zie­rend umsprin­gen.
  • CompressPNG wen­det auto­ma­tisch die Farbreduzierung an, wenn das Ausgangsbild die­se Vorgehensweise anbie­tet. Du musst hier also nicht manu­ell die Farben redu­zie­ren, um zu klei­ne­ren Gewichten zu gelan­gen. Das macht das Tool auto­ma­tisch.

TinyPNG ist schnell und ent­spricht dem Workflow eines Redakteurs in opti­ma­ler Weise. Screenshots machen, in einem Rutsch zu TinyPNG hoch­la­den, kurz war­ten, alles wie­der her­un­ter­la­den, fer­tig. In sei­ner jüngs­ten Version kann CompressPNG hier mit­hal­ten.

Der Dienst spricht inzwi­schen sogar die deut­sche Sprache. Die Vorgehensweise ist so ein­fach wie beim nie­der­län­di­schen Wettbewerber. Du wählst ein­fach bis zu 20 PNGs von dei­ner Festplatte und schienst sie per Drag-and-Drop auf CompressPNG. Der Dienst lädt die Dateien direkt hoch und beginnt mit der Kompression. Dabei wählt er die opti­ma­len Einstellungen für das bes­te Ergebnis selbst.

Das soll­te TinyPNG aller­dings erst dann zu den­ken geben, wenn durch die­se Optimierung ein gerin­ge­res Dateigewicht erreicht wür­de. Das ist bis­lang nicht der Fall. Vielmehr erreich­te ich bei die­sem Testbild

Optimierungsergebnis: -61 Prozent (Screenshot: Dr. Web)

ein Optimierungsergebnis von minus 61 Prozent und zwar sowohl mit TinyPNG, wie auch mit CompressPNG.

Bei TinyPNG ist damit die Aufgabe erle­digt. Du lädst die Ergebnisse her­un­ter und gut ist. Bei CompressPNG muss mit die­sem Bildschirm noch nicht Schluss sein:

Hier ist noch nicht Schluss. CompressPNG kann mehr. (Screenshot: Dr. Web)

Probiere ein­fach mal aus, das ange­zeig­te Thumbnail, unter dem „Herunterladen” anzu­kli­cken. Hast du das näm­lich getan, wird ein Bildausschnitt des hoch­ge­la­de­nen Originals unter­halb der Queue ange­zeigt. Nach kur­zer Bedenkzeit erscheint rechts dane­ben ein Bildausschnitt, der optisch das Ergebnis der Kompression mit den auto­ma­tisch ermit­tel­ten Optimalwerten zeigt.

Nun kannst du dich im Bildausschnitt frei bewe­gen, etwa bild­wich­ti­ge Details anzei­gen las­sen und einer opti­schen Prüfung unter­zie­hen.

CompressPNG bie­tet dir Detailverbesserungen an, die TinyPNG nicht im Portfolio hat. (Screenshot: Dr. Web)

HIer kannst du nun durch geziel­te manu­el­le Reduktion der Zahl der Bildfarben das Schrumpfungsergebnis wei­ter ver­bes­sern. Das machst du frei Auge, wobei du immer beden­ken soll­test, dass ein zu stark kom­pri­mier­tes Bild beim Betrachter kei­nen guten Eindruck macht. Deshalb ist es wich­tig, einen Kompromiss zu fin­den, der sich in ers­ter LInie an dei­nen Besuchenden ori­en­tiert.

Hast du tat­säch­lich Änderungen vor­ge­nom­men, darfst du nicht ver­ges­sen, den Ok-Button unter­halb des rechts ange­ord­ne­ten Sliders zu kli­cken, denn erst dann wird die Datei neu kom­pri­miert. Hernach hast du die Möglichkeit, sie über den bereits erwähn­ten Knopf mit der Aufschrift „Herunterladen” auf dei­ne loka­le Platte zu beför­dern. Solltest du meh­re­re Dateien in der Queue haben, wird dich viel­leicht die Möglichkeit, alle Dateien gesam­melt als Zip her­un­ter­zu­la­den, freu­en.

TinyPNG bie­tet inzwi­schen eben­so eine Möglichkeit des „Download all”, also des Sammel-Downloads aller kom­pri­mier­ten Dateien. Zudem kannst du aus TinyPNG her­aus direkt in dei­ne Dropbox spei­chern.

Fazit: CompressPNG oder TinyPNG? Es kommt drauf an…

Welchen der bei­den Cloud-Services soll ich dir nun emp­feh­len? Sowohl TinyPNG, wie auch CompressPNG sind rasend schnell. Einen Sammel-Download bie­ten eben­falls bei­de und das Ergebnis im Autopiloten ist sehr gut.Bist du Schreiberling kannst du ein­fach die URL auf­ru­fen, die dir als ers­te ein­fällt ;-)

Webdesigner indes wer­den eher Wert auf ein opti­ma­les Ergebnis, weni­ger auf eine mög­lichst kur­ze Bearbeitungsdauer legen. Und an die­ser Stelle kann CompressPNG punk­ten. Das fängt schon damit an, dass CompressPNG über­haupt Möglichkeiten zur Ergebnisbeurteilung und -steue­rung bie­tet. Die ver­schieb­ba­ren Bildausschnitte erlau­ben es, kri­ti­sche Bildbereiche in den Fokus zu neh­men, um dar­an gezielt die maxi­mal mög­li­che Kompression fein zu tunen. Wenn du also das Maximum aus dei­nen PNGs raus­quet­schen möch­test, soll­test du CompressPNG vor­zie­hen.

Übrigens: Unter dem Namen Optimizilla fin­det du eine Variante von CompressPNG, die PNG und JPG glei­cher­ma­ßen schluckt.

Lokale Lösungen

Wenn du Bilder opti­mie­ren willst, die Personen zei­gen, brauchst du einen Auftragsverarbeitungsvertrag mit dem Dienstleister, damit du das kon­form zur DSGVO machen darfst. Die Cloud-Services müs­sen über­dies genau erklä­ren, was sie mit den Daten tun.

Lass es mich kurz machen. Keiner der bei­den Dienste kommt danach in Frage. Die Macher von CompressPNG hal­ten es für aus­rei­chend, dass sie die Dateien sowie­so nach einer Stunde löschen und die Betreiber von TinyPNG erklär­ten mir auf aus­drück­li­che Nachfrage, dass sie schon des­halb kein Problem sähen, weil sie in den Niederlanden säßen und damit auto­ma­tisch der DSGVO unter­fie­len. Seltsame Rechtsauffassung: Ich bin rechts­kon­form, weil ich in einer Region mei­nen Sitz habe, in der ich rechts­kon­form sein muss?

Seis drum. Beide bie­ten kei­ne Auftragsverarbeitungsverträge und sind somit für den Zweck der Bearbeitung von Bildern, die per­so­nen­be­zo­ge­ne Daten beinhal­ten, nicht zu ver­wen­den. Du benö­tigst also zusätz­lich eine loka­le Lösung.

PNGGauntlet und ImageOptim – nur verlustfreie Kompression

Deshaln habe ich mir unter ande­rem PNGGauntlet (Windows) und ImageOptim (Mac OS X) ange­se­hen. Beide Softwares inte­grie­ren diver­se freie Compression-Engines, etwa PNGout, OptiPNG, AdvPNG und ande­re. Die Kombination ver­schie­de­ner Verfahren führt stets zu einer erheb­li­chen Bearbeitungsdauer sei­tens der Software. Schnell mal ein Bild opti­mie­ren, ist damit nicht mach­bar. Und ja, mei­ne Hardware ist stets aktu­ell.

Schwerer als der Geschwindigkeitsnachteil indes wiegt das Ergebnis. Denn das ist nach allen mei­nen Tests stets genau das geblie­ben: schwer. Die Software konn­te nicht annä­hernd die glei­chen oder auch nur ent­fernt ähn­li­che Ergebnisse erzie­len, wie es TinyPNG oder CompressPNG schaff­ten. Das liegt dar­an, dass die loka­len Lösungen rein auf ver­lust­freie Kompression set­zen. Das Runterrechnen auf 256 Farben, also die geziel­te Verlustoptimierung sehen sie nicht vor.

ImageAlpha – gute Ergebnisse, nur für Mac

Anders arbei­tet hier die nur für den Mac ver­füg­ba­re Lösung ImageAlpha. Sie erlaubt das geziel­te Reduzieren der Farbanzahl und eini­ge wei­te­re Parameter mehr. Erste Tests erga­ben etwas schlech­te­re Werte als unter Nutzung von TinyPNG oder CompressPNG. Der Abstand war indes nicht rie­sig. Ansonsten bie­tet ImageAlpha ein soli­des Feature-Set, das sich nicht zu ver­ste­cken braucht.

image-alpha
Die UI ist nicht unbe­dingt hoch-inno­va­tiv, aber die Ergebnisse stim­men

Wer also einen Mac sein eigen nennt, soll­te sich ImageAlpha auf jeden Fall besor­gen. Die Software ist kos­ten­los ver­füg­bar und vom Bedienkomfort in etwa mit CompressPNG ver­gleich­bar, durch die loka­le Bearbeitung aller­dings deut­lich schnel­ler im Processing. Die Software basiert auf dem Algorithmus hin­ter PNGquant.

PNGoo – PNGquant für Windows

Was ImageAlpha für den Mac-Anwender, ist PNGoo für die Windows-Fraktion. Das klei­ne Tool lädst du in einer Zip-Datei her­un­ter. In die­ser Zip-Datei fin­dest du die aus­führ­ba­re Datei PNGoo.exe und ein Unterverzeichnis namens libs. Darin befin­det sich PNGquant. Solange du die Exe und das Unterverzeichnis bei­sam­men lässt, kannst du PNGoo ein­fach per Doppelklick star­ten. Das funk­tio­niert sogar por­ta­bel von einem USB-Stick aus. So hast du dei­ne Kompressionslösung immer dabei. Ich bezweif­le aller­dings, dass das erfor­der­lich ist.

PNGoo für Windows (Screenshot: Dr. Web)

Die Bedienung ist sehr ein­fach. Zieh die zu kom­pri­mie­ren­den PNGs ein­fach in das Programmfenster und sie erschei­nen in der Liste. Oben wählst du noch aus, ob du den Output in das Verzeichnis len­ken willst, aus dem die Originale stam­men. Das hat den Effekt, dass die Originale über­schrie­ben wer­den, was mei­ne Standardeinstellung ist.

Über die Colour Settings kannst du Einfluss auf die Zahl der Farben neh­men. Ich las­se das stets bei der Standardangabe von 256. Theoretisch kannst du hier aber – ähn­lich wie bei CompressPNG – visu­ell expe­ri­men­tie­ren, wenn du eines der Files in der Liste ange­wählt hast.

So, damit bist du mit einer schö­nen Palette an Möglichkeiten der PNG-Kompression aus­ge­stat­tet. Linux- und Androidnutzern habe ich den Links zum Beitrag eben­falls Tools hin­ter­legt. Um unter Linux den Effekt zu erzie­len, der nur mit PNGquant zu erzie­len ist, musst du eben die­ses als Kommandozeilen-Befehl ver­wen­den. Nichts für mich.

Ich nut­ze wei­ter­hin TinyPNG im Web, sowie ImageAlpha auf dem Mac und PNGoo unter Windows. Was ver­wen­dest du?

Links zum Beitrag

(Dieser Beitrag erschien erst­mals im März 2013 und wird seit­dem aktu­ell gehal­ten. Das letz­te Update stammt vom 29. März 2019.)

Beitragsbild: Pixabay

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

12 Kommentare

  1. Ich fin­de https://squoosh.app/ immer noch MEGA, wenn es Bildkompression geht.

  2. Hallo und vie­len Dank für den Artikel. Ich nut­ze fol­gen­de Webseite für die Kompression: https://www.websiteplanet.com/de/webtools/imagecompressor/
    Auf die Seite wur­de ich vor eini­ger Zeit auf­merk­sam und ich fin­de sie brauch­bar.

  3. TinyPNG hat auch ein WordPress-Plugin, das ich nicht mehr mis­sen möch­te (https://de.wordpress.org/plugins/tiny-compress-images/).

    Das Plugin ist für die ers­ten 500 Bilder kos­ten­los. Wobei jede Bildgröße ein­zeln gezählt hat.

    Mit den Standardwerten bei­deu­tet das, dass man 500 / 4 = 125 (Vorschau, Medium, Groß, Orginal) Bilder pro Monat hoch­la­den und kom­pri­mie­ren las­sen kann.

  4. Guter Artikel. Wer Photoshop hat, kann es sogar sel­ber machen:
    Als Web spei­chern -> PNG-8 mit 256 Farben, 100% Dithering und Dropdown auf “Adaptiv” (= Farbwahl). Have fun! :)

  5. Don’t for­get to check­out kraken.io and resizeimage.net

  6. Hallo,

    eine Frage zu Tiny PNG vs. Fireworks: Wenn ich mit Fireworks ein Bild als PNG 8, Farben “Exakt” expor­tie­re, dann bekom­me ich genau die glei­che Dateigröße wie wenn Tiny PNG die Kompression erle­digt. Und auch die Fireworks PNG 8-Dateien funk­tio­nie­ren im IE 6 inklu­si­ve Transparenz. Kommt bei bei­den Tools das glei­che Verfahren zum Einsatz?

  7. Hallo,

    ich habe gera­de CompressPNG mit einer 91KB JPEG-Datei getes­tet und lei­der fest­ge­stellt, dass die PNG-Datei grö­ßer als das Original. Gute Ergebnisse habe ich aber mit JPEGmini.com erzielt.

    Grüße
    Mathias

    • Deswegen kommt in der Überschrift zu die­sem Artikel auch 3 x der Begriff PNG vor ;-)

      • Ist mir schon klar, aber der beschrie­be­ne Vorteil bzgl. CompressPNG und wei­te­ren Dateiformaten ist nur so lan­ge ein Vorteil, bis man erkennt, dass es nur mit PNG effi­zi­ent ist. Das war der eigent­li­che Hinweis. :)

      • Da ist was dran. Vielleicht soll­te man noch erwäh­nen, dass man Bilder, die rich­ti­ger­wei­se als JPG vor­lie­gen, nie­mals nach PNG kon­ver­tie­ren soll­te.

  8. Hallo,
    dan­ke für den sehr aus­führ­li­chen Überblick über gän­gi­ge Tools für die Bildkompression. Aber wie­so kannst du nicht 128 Farben ein­stel­len, das geht doch wun­der­bar mit den plus / minus Symbolen?

Schreibe einen Kommentar zu Jacob Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.