Artikel vom 26. April 2010
ImageOptim: PNG-Bilder um ein Vielfaches in der Größe verkleinern
In einem Artikel der Performance-Reihe wurden vier aktuelle Mac OS Anwendungen mit der Kernaufgabe Optimierung von PNGs vorgestellt. Zugleich offerierte der Beitrag einige wesentliche Pluspunkte der verlustfreien Komprimierung des im Web mittlerweile gängigen Formats. Diesmal wird der Fokus ausschließlich auf das Desktop-Tool ImageOptim gerichtet – eine komfortable Bereinigungsmethode nicht nur für PNG-Images mit strukturierter, erst vor kurzem überarbeiteter Bedienoberfläche. Die wahre Stärke der Applikation: Bilder – auch en masse – Mac OS-weit im Gewicht zu reduzieren. Dabei genügt ein Rechtsklick auf die Zieldatei.
Nativer Grafikverbesserer
Im Vergleich zu existenter Mac-Software mit der Spezialisierung auf Bildkomprimierung, läuft ImageOptim nativ unter Mac OS X Snow Leopard, setzt also keine (nach)installierte Umgebung Rosetta voraus. Zum Schnelleinstieg kann sich das kostenfrei erhältliche Programm auf Wunsch des Benutzers umgehend im Dock für Drag&Drop und zusätzlich im Menü für den Zugriff via Rechtsklick einnisten. Mehrauswahl erwünscht: Zahlreiche zu verarbeitende Dateien – gar ganze Verzeichnisstrukturen unterschiedlicher Tiefe – stellen die Anwendung keinesfalls vor Herausforderungen.
Eine in der Statusbar eingesetzte Fortschrittsanzeige signalisiert den ausgeführten Gesamtvorgang, abgearbeitete Objekte werden direkt in der Auflistung von anstehenden Aufgaben durch grüne Icons hervorgehoben. Nach der Fertigstellung der Dateiminimierung aktualisieren sich die Werte wie Größe und Kompressionsgewinn selbsttätig.

Smarte GUI von ImageOptim: Eine Zeile pro Datei
Doch aufgepasst, im Auslieferungszustand überschreibt ImageOptim die Originaldatei mit der verfeinerten Version des Bildes ohne vorherige Zustimmung seitens Nutzer. Für die Gegner der gut gemeinten Automatik halten die zahlreichen Einstellungen eine entsprechende Option parat, die vor dem eigentlichen Verkleinerungsprozess eine Sicherung des Originals zwecks notbedingter Wiederherstellung durchführt.
Positiver Effekt: Zur Säuberung des Bild-Quelltextes greift das Tool – sofern in den Optionen aktiviert – auf diverse Optimierungsbibliotheken (u.a. PNGOUT, PNGCrush, OptiPNG, AdvPNG) zu und nutzt dabei die jeweiligen Stärken der einzelnen OpenSource-Lösungen. Auch kann die Anzahl der Durchgänge stufenartig manuell justiert werden, um die CPU-Auslastung zu schonen und die resultierende Ausführungszeit auf das Nötigste zu minimieren.

PNG behandelt mit ImageOptim: Ergebnis beträgt 57 % der Originalgröße
Zusammenfassung
Professionelles, kompaktes und je nach Anzahl der internen Optimierungsrunden rasches Konzept für weiteren Performance-Schub einer Webseite durch die Minimierung der Dateigröße bei gleichbleibender Qualität. Abhängig von der Bildabmessung und abgebildetem Muster sind Optimierungen von bis zu 98 Prozent nicht unwahrscheinlich.
WordPress-Tipp am Rande
Für WordPress-Anwender empfiehlt sich ein Komprimierungsdurchlauf auf den kompletten uploads-Ordner, welchen ImageOptim je nach Umfang in einer halben Stunde in optimierter Form und viele Megabyte leichter zurückgibt. Die überschaubare Vorgehensweise der Aktion:
- Verzeichnis per FTP auf die Festplatte laden
- Ordner mit der Maus auf die Anwendung ziehen
- Resultat abwarten und kontrollieren
- Ausgabe auf den Server kopieren
[Der Autor] Sergej Müller ist enthusiastischer Software Engineer mit Schwerpunkten Webentwicklung und WordPress. Seit 2007 programmiert und vertreibt er wpSEO, das weltberühmte und patentierte SEO-Plugin für WordPress-Blogs.
Achtung, Ideenklau: Funktionen aus wpSEO dreist nachgebaut
WordPress App für iPad: Posts und Kommentare unterwegs verwalten
20 Kommentare zum Artikel
Für Windows gibt es ein ähnliches kleines Programm, das dazu noch portabel ist und wunderbar in das Senden an gepackt werden kann: PNG Optimizer
http://j.mp/aUz5Zz
@Sergej: Immer wieder interessante Artikel. Mach weiter so!
Cooler Tipp, danke Sergej. Ich liebe diese kleinen Helfertools, du kannst einfach gezielter damit arbeiten. Und man muss nich dauernd smush.it oder ähnliches nutzen – hochladen, runterladen, entpacken, sortieren … blah.
Richtig. Online-Dienste haben immer Begrenzungen, entweder in Form von Gesamtgröße oder dürfen keine Verzeichnisse hochgeladen werden. Lokale Tools sind da viel flexibler und dabei auch noch performant.
Habe erst gestern über eine Methode gelesen, wie man dies mit Windows-Programmen bewerkstelligen kann (vorausgesetzt man besitzt die Software). PNG mit Photoshop erstellen (32Bit) und dann mit Fireworks (gehört ja mittlerweile auch zu Adobe) das PNG optimieren bzw. shrinken. Photoshop selbst bietet nur die Auswahl zwischen 8Bit und 32Bit PNGs, mit Fireworks kann man jedoch auch die Werte dazwischen auswählen und so PNGs erstellen, welche annähernd gleiche Qualität, jedoch wesentlich geringere Größen haben.
Huch, Adobe ;)
Und wenn man die exportierten Bilder dann noch durch einen PNG-Optimierer (ImageOptim in meinem Fall) schickt, dann würde man die Dateigröße noch kleiner bekommen, da das Tool daraus noch Metadaten und unnötige Farbprofile entfernt.
Danke! Nachdem “Ping” auf OSX10.6 nicht mehr ging, hatte ich gar keine vernünftige Alternative finden können!
Leider ist die Ausbeute nicht ganz so hoch, wenn man mit Photoshop (CS3) bereits mit “Speichern fürs Web” das PNG abgelegt hat — muss ich wohl doch stückeln…. ein 1008 x 229 transparentes PNG geht ja gar nicht ;)
Danke für den Tipp, scheint gute Bibliotheken zu verwenden.
Hat das eventuell schon jemand mit Yahoo’s SmushIt verglichen? Was ist besser? Bin bisher mit keinem Program an SmushIt rangekommen! :)
Smush.it hatte ich mal aufgegeben, nach dem Yahoo den Dienst übernommen hat. Hast du schon mal PunyPNG probiert? Diesen Service hatte ich bevorzugt genutzt, aber wie ich oben schon sagte, viel zu beschränkt das ganze.
Aber ich habe für dich einen Test durchgeführt:
Also das Smush.it-Plugin für WordPress kann ich empfehlen, komprimiert bereits beim Upload und funktioniert zuverlässig.
danke für den Test
Zwei Punkte gegen Smush.it:
a. Smush.it hat bei mir nach 6 Versuchen nur einmal ein Ergebnis geliefert
b. es ist webbasiert (die Bilder verbleiben evt. auf dem Server)
@Stephan
Gern geschehen.
@Viktor
Es sprechen viele Faktoren gegen einen Online-Optimierer. Zum Beispiel werden keine Bilder in Unterverzeichnissen akzeptiert oder die vorgegebene Uploadgröße stört enorm.
@René
Absolut korrekt. Natürlich ab dem Zeitpunkt der Inbetriebnahme des Plugins im Blog. Bis dahin hochgeladene Bilder bleiben sicherlich unberührt. Deswegen auch mein Tipp mit dem Kopieren und der Behandlung des upload-Ordners. Sozusagen zur Sicherstellung der Rückwärtskompatibilität ;)
Da hast du recht, es gibt zwar die Möglichkeit in der Medienverwaltung alle bereits auf dem Server liegenden Bilder nachträglich “Re-smush” zu optimieren, dies leider aber nur einzeln, also sehr umständlich.
Das Plugin ist im Grunde genommen eine einfache und wenig aufwendige Lösung, der Upload dauert nur 1-2 Sekunden länger, dafür hat man das komprimierte Bild aber auch gleich auf dem Server.
Für den Windows PC nutze ich noch den kostenlosen VSO Image Resizer, der passt Größe an, verringert Qualität, fügt Wasserzeichen/Schrift oder Rahmen ein, ändert Format, speichert verschiedene Profile und vieles mehr. http://j.mp/bXWt3w
Danke Sergej für den Test.
Ich habe gerade meinen ganzen mit ImageOptim komprimierten Ordner nochmal bei Smushit hochgeladen und Smushit konnte nocheinmal 0,67% rausholen ;)
@Alex-Leopold
Dann muss ImageOptim feiner justiert werden, damit du auf meine Ergebnisse kommst.
@Alex-Leopold
Wenn Du mit ImageOptim einen weiteren Durchgang machst, kommst Du auf ähnliche Werte…..
Hab tatsächlich nur die Standardeinstellungen. Was hast Du besser gemacht? PNGOut?
Ich habe auch alle Bibliotheken außer PNGOUT aktiviert. Da muss du ein wenig rum spielen, um die goldene Mitte zwischen Performance und Ergebnis zu ermitteln.
Danke für den Tipp! Ich hatte bisher Imageoptimierer wie PunyPNG und Smush.it im Einsatz und war über das Ergebnis nicht immer begeistert. Aber diese Lösung muss ich mal ausprobieren.
3 Verlinkungen auf den Artikel
› MacGamper's Blog. » Blog Archiv » PNG-Bilder opt [...]
› Linkhub – Woche 17-2010 - pehbehbeh
› 7 Tipps: WordPress beschleunigen » WordPress, Google, Besucher, [...]