- Tuts & Tipps
- Artikel
- Unverzichtbare Tools zum Optimieren von Bildern für das Web
Unverzichtbare Tools zum Optimieren von Bildern für das Web
Kaum etwas ist für den Besucher einer Webseite nervender als zu lange Ladezeiten. Grafiken für den Einsatz im Web zu optimieren ist ein Teil eines Konzepts für optimale Ladezeiten einer Website. Mittlerweile gibt es etliche, wirklich gute Online sowie Offline Tools für diese Aufgabe. Dieser Artikel stellt die besten dieser Tools vor.
Welche Möglichkeiten es sonst noch gibt, um eine Textpattern Webseite richtig schnell zu machen hatte ich bereits vor kurzem vorgestellt.
Die Optimierungsgiganten
Yahoo! Smush.it
Smush.it erfordert Firefox und die beiden Plugins Firebug und YSlow in der die Smush.it Funktion integriert ist. Nachdem man einen Testlauf mit YSlow gestartet hat, lässt sich in der Konsole unter Tools die Smush.it Funktion aufrufen, die dann die betreffende Seite der Homepage analysiert und einen Report ausgibt, wieviele Bytes eingespart werden können und stellt die optimierten Versionen der Grafiken zum Download bereit. GIFs werden übrigens durch Smush.it in PNGs umgewandelt. Smush.it ist somit das Knallertool unter den Komprimierern.
Zur reinen Website-Analyse hingegen empfehle ich eher Google Page Speed, da es meiner Meinung nach auch umfassendere Ergebnisse bringt. Bei der Analyse meiner Startseite empfahl mir YSlow mein Google Analytics JS in den Fußbereich der Seite einzubinden, obwohl es dort eingebunden ist. Da mein Quellcode jedoch nur eine Zeile hat (der ist auch hochgradig komprimiert), kam es scheinbar zu einer Fehleinschätzung durch das Tool.
Auf der englischsprachigen Webseite TXP Tips findet man unter anderem einen guten Artikel, wie man das Ganze optimal für Textpattern umsetzt.
Google Page Speed
Google Page Speed ist ebenfalls ein Firefox Plugin und eines der mächtigsten Werkzeuge zur Webseitenanalyse und Optimierung, die es gibt. Schon aus diesem Grunde ein absolutes Must Have für jeden Webworker. Auch Page Speed ermöglicht es, die optimierten Versionen der auf der Homepage eingebundenen Grafiken zu speichern. Außerdem glänzt das Projekt mit einer sehr guten Dokumentation.
Die Offline-Tools
SuperPNG
SuperPNG ist ein kostenloses Plugin für Adobe Photoshop (und After Effects) und dafür bekannt, PNG-Files wesentlich besser zu komprimieren als jedes Adobe Tool. SuperPNG ist sowohl als Windows, wie auch als Mac Version erhältlich und uneingeschränkt empfehlenswert.
Shrink O’Matic
In der hübschen gelben Waschmaschine laufen die Bilder nur so ein:-) Shrink O’Matic ist genau das richtige Tool, wenn Sie Adobe AIR™ einsetzen. Diese Adobe AIR™ Anwendung lässt Sie ganz simpel per Drag and Drop die Grafiken auf die richtige Dateigröße reduzieren.
PNGGauntlet
PNGGauntlet ist eine .NET Anwendung, die das Kommandozeilen Utility PNGOUT von Ken Silverman nutzt, im Gegensatz hierzu aber kostenfrei ist. Die Nutzung läuft auch hier easy per Drag and Drop ab und das Utility quetscht das letzte bißchen Dateigrößenreduzierung aus den Grafiken raus.
Mac only…
ImageOptim
ImageOptim ist kostenlos und nur für Mac OS X erhältlich. Die Anwendung findet automatisch die besten Komprimierungsparameter und kann neben PNGs und JPGs auch GIFs händeln.
Fazit
Der Markt der Optimierungstools ist relativ unüberschaubar und sehr umfassend, aber ich denke, ich habe für jeden Einsatzzweck ein passendes Tool finden können. In seiner Gesamtheit hat mich Smush.it überzeugt, besonders weil mit der gegebenen Anpassungsmöglichkeit ein Konzept für eine ganze Webseite möglich ist und erarbeitet werden kann.
Was habt Ihr zum Thema zu sagen?
Das könnte Dich auch interessieren:
Danke, dass Du diese Seite ausgedruckt hast! Bitte besuche uns gerne wieder, um weitere hilfreiche Artikel zu lesen.












Ein Frage dazu: wie ist denn die Qualität der stärker komprimierten Bilder?
Bisher komprimiere ich die Bilder “von Hand”, um die beste Balance zwischen Dateigröße und Bildqualität zu finden. Gerade bei JPGs hat man ja schnell Artefakte.
Wie sind deine Erfahrungen in dieser Beziehung?
Persönlich habe ich Smush.it, SuperPNG und Shrink O’Matic ausprobiert und kann nur zu einer Nutzung raten. Ich kann da keinerlei optischen Verlust festellen. Aus Gründen der Faulheit und weil bei der Ladezeit dieser Webseite eine Optimierung nicht wirklich nötig ist, nutze ich SuperPNG, weil ich dann keine Extra Aktion mehr mit dem Bild machen muss. Ist ja ein Photoshop-Plugin…
Hi,
ich kenne dieses Online-Tool Smush.it und Google Page Speed natürlich mittlerweile auch. Aber da ich auf Wordpress blogge, läuft bei mir das Smushit-Plugin, wobei die Bilder beim Laden als PNGs durchgehen und komprimiert werden.
Ansonsten nutze ich viele Pics und Screenshots im Blog. Diese werden auch wiederum direkt beim Hochladen komprimiert. Vorher beim Abspeichern passe ich nur auf, dass die Bilder nicht zu gross sind.
Da ich kein Fotoblog betreibe, ist PNG als Bildformat ganz OK. Für reine Fotoblogs wäre wahrscheinlich eher Jpeg ratsam. SuperPNG und die anderen deinerseits erwähnte Tools sind mir eher unbekannt.
Yeah, danke, Andreas! Genau das hatte ich mir gewünscht. :-) Ich habe den Feed von Tuts & Tipps aber ohnehin schon seit der Premiere abonniert, also brauchst du dir nicht die Mühe zu machen, mich per E-Mail zu informieren. =)
Vielen Dank
Felix
Schade, SuperPNG scheint nicht mit Photoshop CS4 64bit zu funktionieren :-(
Das wäre mal echt doof, weil es unter C4 32 bit hervorragend funktioniert…
@Felix: Weiß ich :-) Und Ihr dürft gern weitere Themenwünsche äußern..