Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Dieter Petereit 3. November 2008

Smush.it – Bildoptimierung für Seitenentwickler

Kein Beitragsbild

Dieser Tage macht ein kleines Web-Tool des Teams „Exceptional Performance“ bei Yahoo! von sich reden. Auf einfachste Weise und in rasanter Geschwindigkeit soll Smush.it noch das letzte Quentchen überflüssiger Datenmasse aus Ihren Bildern pressen. Die Entwickler versprechen Ergebnisse selbst da, wo Photoshop und Fireworks an ihre Grenzen stoßen. Besonders interessant dabei ist, dass ein Lossless-Verfahren zum Einsatz kommen soll, also eines, das nicht zu Lasten der Bildqualität geht. Schauen wir mal, was wirklich an diesen Versprechungen dran ist…

Wix Webseiten — echt superpraktisch. ↬ Mehr erfahren

Smush.it ist ein spartanisch ausgestatteter Webdienst. Viel mehr als das Hauptfenster gibt es nicht zu entdecken. Die Entwickler reduzierten sogar die GUI auf das minimal Erforderliche. Smush.it lässt sich auf verschiedene Weisen mit zu optimierendem Material füttern. Dabei ist es sehr deutlich auf bereits online befindliches Bildmaterial ausgerichtet, was auf den ersten Blick zu erstaunen vermag. Die Optimierung lokal gespeicherter Bilder erfolgt, nachdem Sie diese per Uploader hochgeladen haben. Sie können mehrere Bilder gleichzeitig hochladen und ich konnte auch keine offensichtlichen Limitierungen hinsichtlich der Dateigröße feststellen.

Anzeige

Der erste Test: Ich suche mir drei Bilder aus meinem Datenbestand, die unterschiedliche Optimierungspotenziale aufweisen und jeweils runde 2 Megabyte groß sind. Auf einen Rutsch uploade ich das Material zu Smush.it. Einige Minuten später die Ernüchterung, aus rund 6 MB sind 5,9 MB geworden. Erste Erkenntnis klopft von innen an meine Stirn. Offenbar wird Bildoptimierung a la Smush.it anders definiert, als der Webdesigner sich das im ersten Ansatz vorstellen würde.

nicky-30-prog.jpg
Ein niedliches Hündchen und eine ziemliche Herausforderung für den Optimierer

Der zweite Test: Ich verkleinere die Bilder in Photoshop CS3 auf eine Breite von 500 Pixel, wende aber noch keine gezielte Optimierung an. Die Bilder haben jetzt zwischen 170 und 240 kb pro Stück. Einen Upload später ist meine anfängliche Ernüchterung beginnender Enttäuschung gewichen. Gerade mal runde 10 kb pro Datei hat Smush.it rausgepresst. Ich wende Photoshop an und stelle den Qualitätsfilter auf 30 % progressiv. Die Bilder schnurren zusammen auf 15 bis 25 kb pro File, sehen dabei aber immer noch ganz gut aus. Erneut gebe ich Smush.it eine Chance. Immerhin ein knappes Prozentchen holt es noch aus den jetzt ohnehin schon sehr stark komprimierten Bildern. An dieser Stelle beschließe ich, keine weiteren Tests mit lokalen Dateien durch zu führen.

Ich wende mich den beiden anderen Möglichkeiten, Smush.it mit Material zu füttern zu. Die eine, aus meiner Sicht weniger taugliche besteht darin, URLs ganzer Websites oder einzelner Bilder in ein Formular einzutragen. Ein Klick auf „Smush“ startet die Bearbeitung der so definierten Dateien. Die zweite, weit bequemere Alternative ist ein Plugin für Firefox. Einmal auf die übliche Weise installiert, klinkt sich Smush.it mit einem ziemlich strubbeligen Icon in die Statusleiste des Firefox. Surfen Sie nun durch die Weiten des Web, können Sie durch einen Klick auf das Icon jederzeit die Optimierung des Bildmaterials auf der gerade besuchten Website starten. Nicht-Firefox-Benutzer nutzen das Cross-Browser-Bookmarklet, das die gleichen Ergebnisse zeitigt.

02_smushit_ff-icon.gif

Hat Smush.it sämtliche Grafiken der Website optimiert, bietet es den Download aller Bilder als Zipfile an. Und an dieser Stelle macht das Tool auch Sinn. Nämlich für die Nachoptimierung Ihrer Webprojekte. Es optimiert Ihre bereits voroptimierten Webgrafiken. Dadurch, dass die Größenreduzierung ohne Qualitätsverlust stattfindet, können Sie sicher sein, dass Ihre mühsam gefundene Balance zwischen Optik und Dateigröße nicht beeinträchtigt wird. Sie laden das Zipfile herunter, entpacken es und tauschen die enthaltenen Dateien gegen die online befindlichen Versionen aus. Damit erreichen Sie die maximal mögliche Größenreduzierung und Ladezeitoptimierung für Ihre Websites. Eine runde Sache!

Natürlich hat das nichts mehr mit den vollmundigen Versprechungen auf der Homepage des Projektes zu tun, wonach Bildoptimierung eine Kunst ist, die nicht jeder beherrscht, bla bla. Tatsache ist, ohne Voroptimierung in einem der gängigen Grafikprogramme taugt Smush.it gar nichts, schon gar nicht für den Laien. Aber danach und in den Händen eines Webdesigners ist es ein mehr als nützliches Werkzeug.

Als Beispiel einmal die Einsparpotenziale auf der Startseite eines bekannten Magazins:

Optimierungspotenziale auf der Startseite

Alle Bilder dieses Beitrags in Galerieform:

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.

10 Kommentare

  1. Also ich kann dieses einfache Programm einfach nur loben. Einfacherer und schneller kommt man mit Sicherheit niemals ans Ziel. Es erledigt seinen Dienst finde ich sehr gut. Natürlich kommt man aber letztendlich mit Handarbeit und Selbst-Optimierung der Bilder mit speziellen Bearbeitungsschritten noch weiter. Aber hallo, wer hat denn bitte noch die Zeit und die Lust….

    Für mich reicht es vollkommen aus..einzig eine wählbare Endgröße der Bilder wäre noch das Sahnehäubchen.

  2. sehe da kein besonders hohes Optimierungspotential, ich versuche lieber, von vornherein nicht zu viel riesige Bilder zu verwenden, die massig Speicher brauchen.

  3. Ich habe smush.it auch schon auf ein größeres Webprojekt losgelassen und musste bei den jpg-Bildern feststellen dass die Komprimierung bei ein paar Prozentpünktchen war. Allerdings bei den png-Dateien konnte ich durchschnittlich 30% sparen was durchaus was bringt.
    Vielleicht hätte man diese 30% auch schon mit Photoshop rauskitzeln können, allerdings wüsste ich nicht wie. (Beim Speichern fürs Web kann man ja für png Dateien keine Komprimierung oder ähnliches festlegen)

  4. Hmmm… wenn Gif gleich in PNG umgewandelt wird kann man die Seite quasi neu programmieren -_- … also ich lege bei allem lieber immer selbst Hand an. Wenn ich die Größen akzeptabel finde belasse ich es so, wozu gibt es heutzutage DSL. Das Grund-HTML-Layout übersteigt bei mir selten 250kb. Worauf ich allerdings noch warte, ist die bessere Webspeicherung bei Photoshop, vgl. mit Fireworks (ich kenne da nur die CS3).

  5. Ganze Seite einlesen und dann als Zipfile mit optimierten Grafiken anbieten klingt echt gut :).

    Schade eigentlich…die Überschrift klang wirklich vielversprechend. Gerade für eine/unsere Onlineredaktion wäre sowas interessant. Es werden oft Grafiken viel zu groß gespeichert. Schimpft man die Leute dann wird viel zu viel komprimiert. Da wäre es praktisch wenn man ihnen diese Aufgabe abnehmen könnte.

  6. Ganz nettes Tool, besonders das Gif-Grafiken automatisch in das bessere png – Format umgewandelt werden.

    Hierdurch ist auch die hohe Einsparung zu erklären. Einfacher wird der Austausch der Grafiken dadurch aber nicht… -> müssen ja dann die Pfade angepasst werden.

    Weiterhin denke ich, dass ein erfahrener Webmaster durchaus in der Lage ist, die gleichen Ergebnisse mit Fireworks oder Photoshop zu erzielen.

    Für einen abschließenden Websitecheck ist das Tool aber sehr gut zu gebrauchen, man kann ja immer mal eine Grafik vergessen haben…

    Gruß

  7. Ja sicher waren es nicht viele Farben, nur 330, was allerdings mehr ist, als dass man das als Palettenbild speichern könnte. Und auch wenn Paint nicht so gut ist, heißt das nicht, dass man bei mit anderen Programmen erstellten Bildern nicht auch noch was hinsichtlich der Kompression rauskitzeln könnte. Diese Optimierungsprogramme (pngout, pngcrush, optipng und wie sie alle heißen) existieren ja nicht grundlos.

    Auch mit vielen Farben lässt sich eine gute Kompression erzielen. Hier z. B. 16,7 Millionen Pixel mit ebenso vielen Farben: http://www.mywebsite.force9.co.uk/png/png24.htm – als PNG 58,4 kB groß. (Ja ich weiß, ein eher theoretischer Fall und mit Fotos geht das nicht so klein.)

    Wenn man GIF durch PNG ersetzt (und dabei auf gute Kompression achtet bzw. ggf. nachhilft), kann man auch noch einiges sparen. Außer für Animation sehe ich für GIF keine Existenzberechtigung (BMP hat im Web ja eh nichts zu suchen).

    Dass verlustfreie Optimierungen nicht so drastische Einsparungen liefern können wie das Wegwerfen von Information (z. B. durch niedrigere Auflösung oder höhere JPEG-Kompression), sollte ja einleuchten.

    Für kleinere Dekorationsgrafiken ist eine solche Optimierung also sicherlich interessanter als für Fotos.

  8. dann scheine ich meine grafiken schon sehr gut optimiert zu haben… fast ausschließlich „no savings“ oder werte deutlich unter 5%…

  9. @Martin: Ein Screenshot hat weniger Farben als ein Foto. Und ein aus Paint abgespeichertes PNG und GIF, wird vermutlich kaum Optimierungen haben, wie Palettengröße etc.

    Ich schätze, dass sich daraus Deine Komprimierungsraten erklären.

  10. Bei anderen Formaten als JPEG ist es durchaus effektiv. Habe mal einen Screenshot von smush.it gemacht und mit Paint als BMP, PNG und GIF gespeichert, anschließend smush.it übergeben.
    Ersparnisse:
    BMP: 98.91 % (umgewandelt in PNG)
    PNG: 39.24 %
    GIF: 57.48 % (umgewandelt in PNG)

Schreibe einen Kommentar

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