Diesen Dienst fand ich letztens auf den Wegen durch das Internet.
Yahoo Smush.it optimiert Bilder, sodass sich deren Dateigröße verringert. Dabei heißt es in der Beschreibung, dass es „lossless“ sein soll, also alle Aktionen sollen das Aussehen dabei nicht verändern.
Webentwickler sind immer daran interessiert, einem Bild so viel an Bytes abzuknöpfen, wie es nur geht, damit die Seite am Ende schneller lädt.

Testen wir den Dienst mal. Ich habe hier 4 Bilder. Sie sind alle gleich aber doch unterschiedlich. Also zeigen alle das Selbe, sind aber verschieden groß. Ich verlinke die Bilder nur, damit der Post nicht zu ladeintensiv wird.

Original .psd – 672KB:
[lässt sich leider nicht zeigen, weil WordPress keine .PSDs darstellen kann… Lusche]
Dieses Bild ist zumindest das Original aus Photoshop. Die Größe ist natürlich inakzeptabel. In Photoshop wird auch gleich eine .jpg Kopie abgespeichert. Diese ist nur noch 1/6tel so groß aber visuell nicht anders. (normales Speichern unter, höchste Qualität, 3 Durchgänge)

Höchste Qualität .jpg – 104KB:

Das ist also unser Originalbild und dient als Vergleich.

Nun kommt Yahoo Smush.it. Es kann leider nur mit Bildern umgehen, die im Internet liegen, also muss man alle Bilder erst auf nen Webspace laden, bevor man sie dort verarbeiten kann. Da gibt es auf jeden Fall Nachholbedarf.

Smush.it Bild .jpg – 62KB:

Jetzt öffnet mal die 2 Bilder (vollquali und smushit Version) in 2 Tabs und switcht mal schnell hin- und her. Erkennt ihr einen Unterschied? Beachtet vor allem den Schatten der Schrift, dieser wird bei normaler .jpg Kompression normalerweise körnig und bleibt nicht so weich.

Jetzt komprimier ich das Originaljpg nochmal manuell:
70% Quali .jpg – 12KB:

Vergleicht ihr diese Version mit den anderen dann fällt sofort ein Unterschied auf. Schriftschatten wurde körnig, Farben bekommen ein Rauschen, sogenannte .jpg-Artefakte. Dafür ist die Dateigröße nur noch 1/10tel vom Originalbild.

Man muss sich an dieser Stelle wohl entscheiden; Qualität oder Schnelligkeit.
Würdet ihr Smush.it nutzen oder verkleinert ihr die Bilder selber?

Einige kennen den Namen FrontMotion Firefox vielleicht schon. Und zwar ist das der normale Firefox, verpackt in einer .msi, die sich also auch automatisiert über das Netzwerk installieren lässt. In vielen Betrieben ist diese Version von Firefox zu finden.

Das Problem ist nun, wenn man vom FrontMotion Firefox 2 auf den normalen Firefox 3 wechseln möchte.
Normalerweise würde man Firefox 3 einfach installieren, dieser überschreibt dann die FF 2 Version. Das ist wegen FrontMotion schonmal gar nicht möglich.

Der nächste Schritt wäre, erst FM FF 2 zu deinstallieren und dann FF 3 zu installieren. Hier tut sich das Problem auf, dass nach der Installation von FF 3 dieser nicht mehr starten lässt. Das liegt daran, dass sich das angelegte Profil vom FM FF 2 mit dem neuen FF 3 Profil nicht verträgt.
Folgende Lösung:

• FrontMotion Firefox 2 deinstallieren
• Löschen der Ordner [Userprofiles]/Administrator/Anwendungsdaten/Mozilla
  und [Userprofiles]/Administrator/Lokale Einstellungen/Anwendungsdaten/Mozilla
• Installieren von Firefox 3

Und dann sollte auch FF 3 wieder laufen, zudem mit den alten Profilen (ausser dem vom Administrator, aber das kann man ja vorher auch sichern), das heißt, ihr verliert nicht mal die Lesezeichen o.Ä.

Hoffe ich konnte dem einen oder anderen helfen.

Ich stolperte heute über die Firebug Extension „YSlow„. Dieses Tool birgt enormes Potenzial für Webentwickler. Mehr Details zu diesem Tool auf der Herstellerseite.
YSlow analysiert und bewertet die Geschwindigkeit von Webseiten, stellt Diagramme dar, bietet Tools an und dient damit ungemein dem Optimierungsprozess.

Ist das Plugin installiert kann man es über die Taskleiste des Firefox aufrufen.
Dann testet YSlow die aktuelle Webseite.
Dabei werden HTTP requests, Komprimierung, viele CSS und Javascript Tweaks und Ähnliches getestet. Jede Kategorie (z.B. „Make fewern HTTP requests“) erhält eine eigene Bewertung in Form der englischen Benotung, also „A“ bis „F“. Am Ende wird die komplette Seite mit einer Note bewertet und alle Analysen werden übersichtlich aufgelistet. Es finden sich auch Tipps in dieser Übersicht.

Ich schäme mich für die Note „E“, die meine Seite bekommen hat aber ich werde natürlich daran arbeiten, das zu verbessern 🙂

Eine weitere Funktion sind die „Wight Graphs„. Sie splitten die Internetseite in Dateitypen auf (JS, CSS, HTML/Text) und geben jeweils die Größe an. Das ganze wird übersichtlich und hübsch in einem Tortendiagramm dargestellt:

Dabei wird noch zwischen 2 Besucherarten unterschieden. Benutzer, die das erste Mal auf die Seite kommen und alles laden müssen (links). Und jene, die bereits alle statischen Elemente im Cache geladen haben (rechts). Bei meiner Seite sind es z.B. 700k für Erstbesucher und 40k für wiederkehrende Leser.

Zu guter Letzt gibt es noch einige Tools, die ihr aus der Oberfläche von YSlow starten könnt.

Viel Spaß beim Analysieren und Optimieren!