Joomla!^® User Group Fulda

Bilder sind in der Regel die ersten Dateien, die man von der Dateigröße reduzieren kann. PNG ist natürlich ein gutes Format, doch hätte das Bild als JPEG oder die Grafik als GIF nicht wesentlich weniger Speicherplatz benötigt? Das Optimieren der Grafiken / Bilder kostet Zeit, doch die ist hier ggf. gut Investiert.

Wo kommen die Bilder her?

Hier stellt sich die Frage, wo soll ich die Bilder speichern. In der Regel wird das einfach der selbse Server sein, der auch den rest des Contents liefert. Unter Joomla! gibt es den Ordner /images und dort gehören die Bilder rein. Gallerien und andere Erweiterungen bauen auf dieser Idee auf. Doch gibt es hier auch verschiedene Ideen zur Performanceoptimierung:

"Bilder sollen vom selben Server kommen, um DNS Auflösung, Verbindungsaufbauten zu minimieren."

Die Anforderung der Bilder von flickr & Co. kostet wieder Zeit für den Zugriff auf die externen Server. So die eine Theorie.

"Die Inhalte sollten von verschiedenen Servern kommen, um gleichzeitig mehrere Verbidnungen nutzen zu können".

So die anderen Theorie.

Bleiben wir erst mal dabei: Wir speichern die Bilder im Verzeichnis /images und optimieren lieber die Bilder selbst, als einen tollen Ort für die Speicherung zu finden.

Breite und Höhe immer angeben

Die Bilder sollten immer mit Breite und Höhe eingebunden werden, ...

<img src="/images/bild.jpg" width="100" height="75" alt="Alternativer Text" />

... damit der Browser die Seite nicht ständig neu Rendern muss (jede Tabelle sollte ebenfalls in der Breite festgelegt werden, um den Seitenaufbau zu beschleunigen).

Natürlich nutze ich selbst auch flickr und speichere Screenshots am liebsten als PNG, gerade, wenn ich noch Kommentare eingefügt oder Pfeile gezeichnet habe. Doch gerade hier liegt eine Möglichkeit die Seite durch GIFs und JPEGs zu beschleunigen. Speichern Sie doch eine "Arbeitsdatei" für Ihre Bedürfnisse und eine optimierte Bilddatei, die Sie in die Seite einbinden.

Yahoo! Smush.it™

Yahoo! hat mit dem Firefox Add-On YSlow (zuvor das Firebug Add-On installieren) ein nettes Werkzeug zur Bildoptimierung mitgeliefert. Mit Smush.it werden Bilder untersucht und - ohne Qualitätsverlust - weiter verkleinert. Unter www.smushit.com/ysmush.it könnt Ihr Smush.it auch direkt nutzen.

Im Beispiel oben, ist das Bild "Loading" zu sehen. Die ursprüngliche Größe von 33 KB kann mit einem Klick auf "smushit" ...

... auf 19 KB reduzieren. Wichtig: Smush.it entfernt alle Metadaten (z. B. EXIF und IPTC Informationen). Achtet auf Lizenzbestimmungen. Ggf. müssen einige Infos in den Bildern erhalten bleiben bzw. im Nachhinein wieder integriert werden.

Das so reduzierte Bild könnt Ihr dann herunterladen und nutzen.

Alternativ könnt Ihr Smush.it auch direkt über www.smushit.com/ysmush.it aufrufen.

Testet doch glein ein paar von euren Bildern, die - eurer Meinung nach - für das Web bereits optimiert sind und vergleicht die Ergebnisse. Smush.it holt wirklich noch einiges aus den meisten Bildern heraus und das ganze ohne Qualitätsverlust.

• Zurück
• Weiter