Nun heutzutage mag das ja kaum eine Rolle mehr spielen, Bildergößen… ob 20kB oder 500kB, bei Übertragungsraten von jenseits der 2MB pro Sekunde kommen diese Zahlen vielleicht etwas unbedeutend vor.

Führt man sich jedoch vor Augen, dass es immernoch Menschen gibt die nur eine Verbindung haben die 4kB pro Sekunde überträgt, so macht das einen erheblichen Unterschied. Und wenn dann auch noch 120 Elemente auf einer Startseite rumliegen, kommen wir langsam in andere Dimensionen.

Viele von den verwendeten Bildern auf Webseiten können tatsächlich optimiert werden, das heißt ihre Größe wird reduziert ohne die Qualität zu vermindern. Das reduziert natürlich die Ladezeiten, freut Modembenutzer und überhaupt, jedes weniger übertragene Bit rettet eine Zelle eines Baumes im Regenwald oder so ähnlich.

Wie optimiere ich also meine Bilder? Welche Werkzeuge stehen zur Verfügung – welches ist am besten?

PNG

Zunächst kümmern wir uns um das beliebte PNG-Format. Hier gibt es unter Ubuntu eine gewisse Auswahl an Werkzeugen:

• Optipng
• Advancecomp
• Pngcrush

Zu installieren sind diese wie gewohnt mit:

Ein kurzer Test soll uns zeigen, wie gut diese Werkzeuge eine tagtägliche Auswahl an PNG-Bildern verkleinern können.

Eins vorneweg, all diese Programme weisen für mich einen erheblichen Nachteil auf, sie können nicht rekursiv Verzeichnisse nach Bildern durchsuchen und verbessern, da muss man selbst eine Lösung finden.

Als Auswahl an Bildern habe ich einfach alle PNGs meiner Webseite in ein Verzeichnis kopiert, wobei ein paar mit gleichem Namen sich gegenseitig überschrieben haben, was aber nicht weiter schlimm sein soll. Insgesamt waren es 759 PNGs mit 4 634 032 Bytes (du -b .).

[exec]
require_once(„./wp-content/temp/graphs.php“);
$labels = „Originalgröße,Optipng,Advancecomp,Pngcrush“;
$values = „4634023,3933330,3880389,3946166“;
$graph = new BAR_GRAPH(„hBar“);
$graph->labels = $labels;
$graph->values = $values;
$graph->showValues = 2;
$graph->barLength = 2.9;
$graph->barWidth = 2;
$graph->labelSpace = 0;
echo $graph->create();
[/exec]

Die Optimierungen wurden mit folgenden Parametern durchgeführt:

• optipng -o7
• advpng -z -4
• pngcrush

Der deutliche Sieger was reine Dateigröße angeht ist Advancecomp (advpng) mit einer Reduktion von 753 634 Bytes. Ein weiterer wichtiger Punkt ist die Geschwindigkeit in der die Bilder optimiert werden.

Ich habe keine genaue Zeitmessung veranlasst, aber Pngcrush war am schnellsten, danach Advancecomp und als Schlusslicht Optipng, welches seeeehr lange benötigt hat.

Zusammenfassend kann ich also nur Advancecomp empfehlen, recht schnell, sehr gute Optimierung. Allerdings gibt es immer Ausnahmen, so konnte ein Bild mit Advpng gar nicht verkleinert werden, Pngcrush hat das Bild um 2 kB verkleinert und Optipng um 20 kB (!). Vermutlich ist es also nützlich wenn man alle Werkzeuge parat hat, so dass man manche Bilder gezielt bearbeiten kann.

Die Bildqualität habe ich nicht überprüft, wenn alle Programme angeben verlustfrei zu arbeiten, gehe ich davon aus, dass das auch wahr ist.

JPEG

Für JPEG habe ich keine große Auswahl gefunden. Jpegoptim scheint hier das Werkzeug zu sein.

Ich habe es auf meine ganzen JPEGs meiner Webseite losgelassen, die Reduktion ist nicht Ansatzweise so beeindruckend wie bei den PNGs, was natürlich so gedeutet werden kann, dass PNGs von sich aus nicht so effizient sind.

Die 105 MB JPEGs (1451 Stück) wurden um 2,8 MB reduziert. Also etwa 5%, aber wie gesagt jedes Bit zählt. Die Optimierung dauerte auch nicht allzu lange, so dass es sich auch durchaus lohnt.

Alle Bilder rekursiv optimieren

Ein Problem bleibt aber bestehen, keins der Werkzeuge wird selbstständig das ganze Verzeichnis des Webservers durchstöbern und die Bilder optimieren.

Abhilfe schafft hier Beispielsweise find, vermutlich eines der am wenigsten verstandenen Konsolenwerkzeugen, womit ich nicht andeuten möchte, dass ich es verstanden habe. Aber auf einer Webseite wurde ich darauf aufmerksam, dass man Befehle ausführen lassen kann und der gefundene Dateiname wird in den Befehl eingesetzt. Das ist genau das was wir hier benötigen.

Für PNGs:

Dieser Befehl wird alle PNGs in allen Unterverzeichnissen des aktuellen Verzeichnisses finden und mit advpng optimieren.

Für JPEGs: