WordPress: PNG Bilder serverseitig optimieren

Thursday, July 16 2015 · Lesezeit: 3 Minuten · 494 Wörter · Tags: wordpress Achtung! Dieser Artikel ist älter als ein Jahr. Der Inhalt ist möglicherweise nicht mehr aktuell!

Wie lange eine Seite zum laden braucht hängt nicht nur vom Servertyp, der Anbindung oder vom Client ab. Auch die Inhalte spielen eine wichtige Rolle. Ich verwende gerne PNG Bilder in meinen Artikeln.

Anders als bei HTML-, CSS-,JavaScript- oder andere Textbasierten Dateien können binäre Formate nur schlecht komprimiert werden. Deshalb versuche ich so wenig CPU Zeit wie möglich in deren Kompression zu stecken und versuche im Vorfeld zu optimieren. Dabei soll die Qualität nicht darunter leiden. Das Thema „Kompression vs. Qualität“ ist ein alter Hut und es wurden schon unzählige Studien darüber veröffentlicht.

Die Software: optipng

Beim Erstellen von Artikeln binde ich in der Regel Screenshots in den Artikel ein. Eine Nachbearbeitung nach deren Aufnahme findet in der Regel nicht statt. Folglich fehlt mich auch die Möglichkeit das Bild vor dem Hochladen zu optimieren. In den offiziellen Paketquellen von Debian und Ubuntu ist das Programm mit dem Namen optipng schon länger vorhanden. Dieses Tool kann PNG-Bilder via Kommandozeile optimieren.

Ich habe als Testbild einen noch unoptimierten Screenshot aus meinem gestrigen Blogeintrag gefunden und manuell das Tool drüber laufen lassen:

Ursprünglich hatte das Bild ca. 86 kbyte. Nachdem optipng fertig ist, hat die Datei noch ca. 17 kbyte. Optipng gibt auch gleich noch den Hinweis aus, dass diese Datei um ca. 25% kleiner geworden ist. Wie optipng genau das Bild ohne Verluste optimieren kann, kann man im Manual nachlesen.

Meinen Beobachtungen zufolge kann man jedes Bild im Durchschnitt um ca. 33% verkleinern. Gerade bei Blogeinträgen mit mehreren Bildern bemerkt man einen deutlich schnelleren Seitenaufbau.

Batchverarbeitung

Diesen wiederkehrenden Prozess kann man sehr schön automatisieren.

Initiale Verarbeitung

Um alle seine bisherigen Bilder zu optimieren muss man ein mal optipng über alle Bilder laufen lassen. Dazu habe ich folgenden Befehl benutzt:

Führt man das Programm doppelt auf einer bereits optimierten Datei aus ist das kein Problem. Es gibt lediglich eine Meldung, dass das Bild bereits optimiert ist.

**Hinweis: **Optipng hat einen Simulationsmodus, der alle Optimierungen durchführt und nur das Ergebnis ausgibt, jedoch nicht die Datei verändert. Aktiviert wird der Modus durch das Argument „-simulate“.

Regelmäßige Verarbeitung

Nach dem initialen Lauf, der etwas dauern könnte, wäre es nicht sinnvoll CPU Zeit für bereits optimierte Bilder zu verbraten. Für einen Cronjob habe ich den obigen find-Befehl etwas abgeändert. Folgende Zeile steht nun in der Crontab des Users, unter dem der Webserver effektiv läuft:

Jeden Tag um 2 Uhr 10 werden Bilder, die in den letzten 24 Stunden erstellt oder geändert wurden, optimiert. Um dies zu realisieren wurde dem find-Befehl ein „-mtime -1“ hinzugefügt. Mehr dazu im Manual von find.

Die Ausgabe von find wird dann zeilenweise in optipng gefüttert.

Da ich bei Cron immer unsicher bin, wie die PATH-Umgebungsvariable gesetzt ist, gebe ich grundsätzliche die vollen Pfade an.

**Hinweis: **Obwohl der Artikel „WordPress: PNG Bilder serverseitig optimieren“ heißt will ich trotzdem nochmal anmerken, dass nur PNG Bilder optimiert werden können. Gibt man optipng ein fremdes Format, wird versucht eine optimierte PNG-Datei daraus zu machen und in eine separate Datei geschrieben.

Du hast einen Kommentar, einen Wunsch oder eine Verbesserung? Schreib mir doch eine E-Mail! Die Infos dazu stehen hier.

🖇️ = Link zu anderer Webseite
🔐 = Webseite nutzt HTTPS (verschlüsselter Transportweg) Zurück