Webseitenoptimierung: JPG-Optimierung mit jpegoptim
Alexander Trust, den 8. Mai 2013
Webseitenoptimierung bedeutet auch Optimierung von JPG- bzw. JPEG-Dateien. Denn es ist durchaus möglich, mehr oder weniger verlustfrei JPG-Dateien zu optimieren und damit Lesern Download-Zeit zu ersparen; der Webseiten-Aufbau geht schneller vonstatten.
Für Linux-Webserver bietet es sich an, Kommandozeilen-Tools zu verwenden. Wer bereits mit Google PageSpeed1 und anderen Tools zu Messung der Webseiten-Geschwindigkeit hantiert hat, dem wird nicht verborgen geblieben sein, dass der Optimierung der verwendeten Bild-Dateien eine „hohe“ Priorität beigemessen wird. Das verwundert nicht, denn Bilder machen einen Großteil von Webseiten aus und erzeugen eine Menge Traffic.
Nicht mit ImageMagick
Kommandozeilen-Tools wie ImageMagick2 sind für die Bearbeitung und Manipulation von Bildern geeignet, nicht aber, wenn es um verlustfreie Optimierung geht.
Dazu gibt es andere Tools, die hilfreich sein können. Verfügt man über einen eigenen Webserver, lassen sich die Bilddateien simpel optimieren. Jemand, der sich damit nicht auskennt, hätte wahrscheinlich die Bilddateien auf den eigenen PC heruntergeladen, sie dann in einem Grafikprogramm einzeln bearbeitet und später wieder mittels FTP auf den Webserver hochgeladen. Das muss nicht sein! Für Linux-Server kann man diverse Kommandozeilen-Tools installieren, und auch auf anderen Systemen gibt es. Eines davon ist jpegoptim3, das Google sogar (neben anderen) selbst vorschlägt, wenn es um die Optimierung von JPG-Files geht.
Wir wollen es deshalb vorstellen, weil es verhältnismäßig simpel anzuwenden ist und in wenigen Minuten die entsprechenden Ergebnisse liefert. Das Tool optimiert JPG-Dateien mit Hilfe der Huffman-Tabellen4.
Alle Dateien in einem Ordner?
Sinnvoll ist es, wenn man viele oder alle Bilder in einem Ordner untergebracht hat. Man könnte Unterordner rekursiv mit einbeziehen. Je weniger Sucharbeit man dem Tool auferlegt, desto schneller ist es fertig. WordPress beispielsweise speichert seine Bilder, wenn man nicht explizit alle Uploads in spezifischen Monatsordnern ablegt, nur im Unter-Ordner /uploads/ des /wp-content/-Ordners. Diesen navigiert man über ein Terminal innerhalb einer SSH-Verbindung an.
jpegoptim installieren
Vorher muss man sicherstellen, dass jpegoptim installiert ist. Auf Linux-Servern mit Debian oder Ubuntu kann man mittels aptitude show PAKETNAME überprüfen, ob man ein spezielles Programm installiert hat oder nicht. In unserem Fall wäre PAKETNAME durch jpegoptim zu ersetzen.
Liefert der Befehl keine zufriedenstellende Rückmeldung, installiert man das Paket mittels apt-get install jpegoptim – zumindest auf einem Debian-Linux. Der eigene Nutzer muss die entsprechenden Rechte dafür haben. Für andere Linux-Distributionen gibt es andere Paket-Installationsroutinen. Hat man jpegoptim installiert, kann man nun in einem ersten Schritt alle JPG-Dateien in einem Verzeichnis optimieren. Entweder erledigt man das über ein Script, oder aber man benutzt den komplexen find-Befehl und adressiert ihn entsprechend.
Mit der Eingabe von
find . -iname *.jp*g -type f -print0 | xargs -0 jpegoptim -o --strip-all
am Prompt werden nacheinander alle JPG-Dateien in dem Ordner optimiert, in dem man sich befindet. Im Terminal erhält man lediglich die Angabe von Dateinamen und zu wie viel Prozent sie optimiert wurden, z. B.
./WhiteKnightChronicals_sc006-150x150.jpg 150x150 24bit JFIF [OK] 28384 --> 9637 bytes (66.05%), optimized.
Dateien, die nicht optimiert werden können, werden übersprungen.
Wenig Aufwand, viel Ertrag!
In einem unserer Anwendungsfälle haben wir beim Google PageSpeed mit der bloßen Optimierung mittels jpegoptim, die nicht einmal fünf Minuten bei mehreren tausend Dateien gedauert hat, eine immense Verbesserung festgestellt. Von vorher 20 Punkten beim Google-PageSpeed-Test im Bereich der Bild-Optimierung (Optimizing Images) lieferte der Test nach der Anwendung von jpegoptim stattliche 98 Punkte.
Cron Job erstellen
Nun will man aber nicht jedes Mal von Hand die Bilder optimieren, die man neu hochgeladen hat. Sicherlich will man zudem nicht immer alle auf einmal optimieren, sondern nur noch diejenigen, die noch nicht optimiert worden sind.
Dazu muss man einerseits den oben erwähnten find-Befehl anpassen und lässt ihn zudem automatisiert vom Webserver als Cron-Job ausführen.
Man erstellt ein Shell-Script das folgenden Inhalt hat:
#!/bin/bash
find PFAD -iname *.jp*g -newer /scripts/jpgopt.lastrun -type f -print0 | xargs -0 jpegoptim -o --strip-all
touch /scripts/jpgopt.lastrun
In Zeile 1 wird dem System deutlich gemacht, dass es den Befehl in einer Bash-Shell ausführen soll. Man kann diese Information weglassen, dann wird die vom System als Standard gesetzte Shell-Umgebung genutzt. Bei unserem Script spielt es prinzipiell sowieso keine Rolle. Doch sollte man auf die Idee kommen, das Script um komplexere Befehle zu erweitern, kann es wegen der Syntax der Befehle wichtig werden, welche Shell zum Ausführen genutzt wird.
Zeile 2 optimiert diejenigen Bilder, deren Datum neuer ist als das der Datei jpgopt.lastrun. Diese Datei hat keinen Inhalt, es ist lediglich ihr Datum von Interesse. Letzteres wird in Zeile 3 durch den touch-Befehl am Ende des Scripts aktualisiert. Gibt es diese Datei noch nicht, erstellt der touch-Befehl sie. D. h., dass nach erstmaligem Ausführen der Gradmesser eingerichtet wird. Wenn man allerdings so vorgegangen ist, wie wir (es in dem Beitrag beschrieben haben), muss man speziell die Gradmesser-Datei jpgopt.lastrun zunächst selbst kurz nach dem ersten Ausführen der find-Zeile erstellen. Ansonsten würde der Cron Job nicht funktionieren.
Das Script kann man nun zu einer beliebigen Uhrzeit regelmäßig ausführen. Beispielsweise alle 24 Stunden um 13:17 Uhr:
17 13 * * * www-data /scripts/jpgopt.sh
Wichtig ist außerdem, dass man dem Script die notwendigen Rechte gibt, ausgeführt zu werden mittels
chmod +x /scripts/jpgopt.sh