PNGs und JPGs verlustfrei per Skript optimieren

Aktuell bin ich dabei ein bisschen im Blog aufzuräumen und etwas Platz auf dem Webspace zu schaffen. Über die Jahre hat sich hier so Einiges angesammelt, wobei der „wp-content/uploads“-Ordner mit allen hochgeladenen Bildern und den generierten Thumbnails mit über 280MB den dicksten Brocken ausmacht. Viele der Bilder bieten Potenzial mit pngcrush oder jpegtran verlustfrei optimiert zu werden, doch wie lässt man über 8000 Bilddateien in unzähligen Unterverzeichnissen automatisch durch die Tools rattern?

Prinzipiell kann man sich den Aufwand sparen, wenn man von Haus aus in WordPress das Plugin WP-Smush.it installiert. Dieses Plugin schickt alle ins Blog hochgeladenen Bilder nach dem Upload erstmal durch den kostenlosen Bildoptimierer Smush.it von Yahoo! So landen die Bilder von Haus aus optimiert im Blog. Da ich das Plugin längere Zeit nicht benutzt hatte, muss ich nun etwas Handarbeit leisten.

In einem ersten Schritt holt ihr euch alle „wp-content/uploads/<jahreszahl>“ Ordner via FTP auf die Platte. Je nach Einstellung für die Mediathek ist die Ordnerstruktur bei euch ein bisschen anders, aber ich denke dass ihr schon zu euren Bildern findet. Packt die Bilder danach am besten für ein Backup in ein Archiv, so habt ihr später die Option die Sache wiederherzustellen, wenn euch die Optimierung nicht gefallen sollte. Installiert danach die nötigen Programme…

$ sudo apt-get install libjpeg-progs pngcrush

…und schmeißt euch das folgende Skript in den ~/bin Ordner (oder wo auch immer ihr eure Skripte liegen habt), ich habe das Skript bei mir unter ~/bin/smush abgelegt. Bitte vergesst danach nicht das abgespeicherte Skript über euren Lieblingsdateimanager oder $ chmod +x ... ausführbar zu machen.

#!/bin/bash
TMPFILE=$(tempfile)
if type -P jpegtran &>/dev/null; then
	echo 'Running jpegtran';
	for JPG in $(find $1 -type f -name \*.jpg);
	do
		echo "crushing $JPG";
		jpegtran -outfile $TMPFILE -copy none -optimize -progressive "$JPG";
		mv -f $TMPFILE $JPG;
	done;
else
	echo 'jpegtran not found';
fi

# Find files with a PNG extension recursively and process with pngcrush
if type -P pngcrush &>/dev/null; then
	for PNG in $(find $1 -type f -name \*.png);
	do
		echo "crushing $PNG";
		pngcrush -brute "$PNG" $TMPFILE;
		mv -f $TMPFILE $PNG;
	done;
else
	echo 'pngcrush not found';
fi

Danach könnt Ihr das Skript auf eure Bilder loslassen. Übergebt dabei einfach den Wurzelordner, den ihr vorhin runtergeladen habt. Bevor ihr das Skript startet, will ich euch jedoch noch eine „Warnung“ mitgeben, speziell das Optimieren der PNGs dauert eine ganze Weile. Bei meinem Bilder-Ordner mit rund 8000 Bildern und etwas mehr als 280MB, hat der Akt auf einem Rechner mit Core i3 CPU sicherlich mehr als zwei Stunden gebraucht.

$ smush ~/foo/bar/uploads

Hat sich der Aufwand gelohnt? Im Schnitt spart man rund 10% pro Bild. Die Größe meines Bilder-Ordners ging von ~281MB auf etwa 260MB runter. Der „geringe“ Ertrag bei mir liegt wohl daran, dass ich vor Jahren schon einmal einen Teil der Bilder optimiert hatte. Wenn Ihr nie WP-Smush.it oder eine andere Methode zum Optimieren verwendet haben solltet, dann bekommt ihr wahrscheinlich bessere Ergebnisse.

$ du -s uploads
281264	uploads
$ du -s uploads_smush
261100	uploads_smush

Gerade wer viele Bilder verblogt, sollte sich auf jeden Fall mal um das Optimieren der Grafiken kümmern. Die im Skript genutzten Methoden reduzieren die Dateigröße, ohne dass es zu einem Qualitätverlust kommt. Von daher lohnt sich die Aktion auf jeden Fall. 10% der Dateigröße bei Bildern wegoptimieren heißt: 10% weniger Traffic durch Bilder und somit auch – auf die Bilder bezogen – 10% schnellere Ladezeit des Blogs.