Website-Performance: 4 Mac-Tools für effektive Bildoptimierung

Kaum ein zeitgemäßes Online-Projekt kommt ohne den Einsatz von grafischen Elementen aus – Bilder in diversen Formaten sollen Betrachter aktiv ansprechen. Dabei überzeugen PNGs durch ihre Aufnahmefähigkeit der Farbenvielfalt und setzen sich im Web unaufhaltsam durch. Allerdings reicht es nicht aus, Grafiken stumpf im Code zu verknüpfen: Vor dem Publizieren gehört jedes Bild händisch oder maschinell optimiert. Vier Optimierungstools für Mac OS als Helfer.

Entwicklung, aber bitte mit Köpfchen
Bei der technischen Umsetzung eines Designs soll der Augenmerk nicht nur aufs Optische gerichtet sein: Ladezeiten der einzelnen Seiten dürfen unter der Last der Grafiken nicht leiden – nachhaltige Optimierung der Images gehört ebenfalls zu den Aufgaben eines Entwicklers wie die obligatorische Verbesserung des Quelltextes. In der mehrjährigen Praxis hat sich folgender Arbeitsablauf als vorteilhaft und produktiv etabliert:

1. Bilder aus der (PSD-)Vorlage ausschneiden, als PNG speichern.
2. Im Quelltext die entsprechenden Referenzen samt Pfade hinterlegen.
3. Erst mit der Fertigstellung des Projekts den Gesamtinhalt des Grafikordners komprimieren lassen.

Bei dem letzten Punkt des Workflows stellen sich zwei berechtigte Fragen, welche nachfolgend beantwortet werden:

1. Was ist mit komprimieren gemeint?
   Auf die Abbildungen wird ein modernes Verfahren angewendet, um “Innereien” der Bilddateien von – für die Veröffentlichung im Web – überflüssigen und unnötigen Werten wie zum Beispiel “Zuletzt bearbeitet mit dem Programm XY”, Kommentaren, Farbprofilen, Geodaten und restlichen irrelevanten Informationen zu befreien. Das Ergebnis hat nichts mit Komprimierungsmethoden à la ZIP zu tun, kann sich durch seine reduzierte Größe dennoch sehen lassen.

   Doch der wichtigste Vorteil dieser Technik: Im Vergleich zu einer JPEG-Kompression verändert dieses Verfahren die Qualität eines PNG-Bildes nicht im geringsten. Fazit: Keine Verschlechterung möglich, dafür kann die Gesamtgröße bis zu 50% geschrumpft werden.

2. Wie kann ein ganzer Ordner automatisiert optimiert werden?
   Bei der Größenminimierung des Bildmaterials stehen Online-Tools wie punypng (früher auch smush.it gerne dafür genutzt) helfend zur Seite. Solche Dienste erlauben zwar eine Mehrfachauswahl an Dateien, lokale Ordnerstrukturen können bedauerlicherweise nicht abgebildet werden. Bei einer Unmenge an Unterordnern verliert das gutwillige Vorhaben an Charme.

   Anders jedoch bei nativen Desktop-Tools: Dank Drag&Drop lassen sich unzählige Verzeichnisse mit extrem komplexen, tiefen Strukturbäumen importieren und mit Leichtigkeit konvertieren. Auf einem Rechner ausgeführt, verbrauchen die Anwendungen lediglich einen winzigen Bruchteil der Transaktionszeit, die Online-Services für sich und die Erledigung des Auftrags beanspruchen. Praktisch: Ist die Bereinigung der Files erfolgreich durchgeführt und abgeschlossen, werden Originale automatisch überschrieben und ersparen dem Benutzer die lästigen, zeitintensiven Kopiervorgänge.

   Zwei von dieser Sorte Software werden weiter unten knapp und bündig vorgestellt. Vorab: Die Anwendungen laufen einzig und allein auf Mac OS X, konzentrieren sich explizit auf die Bildoptimierung und kommen mit reduzierten Oberflächen daher. Spot ab!

PNGCrushrrr: Hängt .crushed.png an optimierte Files ran – Download

PNGCrusher: Schnell, reagiert nur auf Drag&Drop – Website & Download

ImageOptim: Profi-Optimierer mit GUI – Review & Download

PngThing: Veraltet, aber lauffähig. Kein visuelles Feedback – Download

Nachgefragt
In einem WordPress-Blog kann das smush.it-Plugin die automatische Optimierung der hochgeladenen Ausschnitte übernehmen. Mit welchen Werkzeugen seid ihr am Werk, wenn grafische Objekte optimiert bzw. in der Ausgangsgröße komprimiert werden sollen?