WordPress Grafiken komprimieren

Bilder sollten auf keinem Blog fehlen, denn sie dienen der Wiedererkennung, lockern den Text auf und verbessern so die Lesbarkeit. Leider benötigen Grafiken im Vergleich zum Textinhalt viel Datenvolumen und verzögern daher die Darstellung deiner Seite. Deine Seite lädt mit Grafiken daher immer langsamer als mit einer reinen Textfassung. Dennoch sollte es dein Ziel sein, deinen Besuchern eine gut lesbare Seite (mit Grafiken) so schnell wie möglich auszuliefern. Und hier kommt die Komprimierung ins Spiel.

Denn egal wo du die Grafiken deiner Webseite im Netz speicherst, am Ende müssen sie durch die Leitung zu deinen Lesern. Ein Ansatz, um das Datenvolumen von Grafiken zu reduzieren, ist das Entfernen von unnötigen Informationen. Für deinen Blog heißt das, wir löschen alle unnötigen Informationen aus deinen Grafiken. Nachdem du die richtigen Dateiformate ausgewählt hast, können wir mit der Komprimierung beginnen.

Die Theorie

PNG-Dateien hast du für alle Grafiken mit wenigen Farben verwendet. Aber dein Grafikprogramm hat die Datei wahrscheinlich nicht mit dem optimalen, kleinstmöglichen Farbraum abgespeichert. Denn häufig werden Grafiken, die nur vier Farben haben, mit einem 24bit „Farbspektrum“ gespeichert – und das ist genauso unsinnig, wie es sich anhört!

In einem kleineren Farbraum sind nicht alle Farben verfügbar und dementsprechend werden die Farben verfälscht. Genau. Mut zur Lücke! Denn jeder Besucher deiner Webseite benutzt ein anderes Ausgabegerät. Der eine betrachtet die Seite auf dem iPhone bei Sonnenlicht, der andere auf seinem 24“ Gamer-TFT im Keller und alle anderen auf irgendetwas dazwischen. Keiner dieser Bildschirme deckt den RGB-Farbraum korrekt ab, bei jedem sehen die Farben etwas anders aus. Zugespitzt behaupte ich, solange blau als blau und rot als rot zu erkennen sind, spare ich mir lieber ein paar Kilobyte in der Dateigröße, denn deinen Lesern fällt nur die kurze Ladezeit positiv auf.

Ähnlich ist es bei JPGs: dieses Format verwendest du in erster Linie für deine Fotos. Hier werden (unbemerkt) zu dem eigentlichen Motiv weitere Informationen in der Datei gespeichert. Unter anderem das Kamera-Modell, mit dem das Foto gemacht wurde, ISO-Werte und so weiter (auch bekannt als Exif- oder Meta-Daten). Wenn du keinen professionellen Foto-Blog betreibst und deinen Lesern genau diese Informationen mitteilen willst, dann haben sie auch nichts in der Bilddatei zu suchen – unnötiger Ballast eben!

Die Praxis

Heißt das, du musst jetzt manuell den Farbraum jeder einzelnen PNG-Datei reduzieren und die unnötigen Exif-Daten aus deinen JPGs entfernen? Natürlich nicht, denn für das alles gibt es bei WordPress passende Plugins!

WP Smush.it

Ein sehr komfortables Plugin zur Bildoptimierung. Einmal aktiviert, sendet es alle neu hochgeladenen Grafikdaten zuerst an den smush.it-Dienst von Yahoo. Bereits vorhandene Grafiken können mittels „Bulk smush.it“ ebenfalls optimiert werden. So reduzierst du sehr schnell die Dateigrößen und deine Seite lädt schneller.

Pro:

• Sehr einfach zu bedienen
• Funktioniert auch mit bestehenden Grafiken
• WebPageTest und PageSpeed Insights finden deine Grafiken jetzt toll!

Contra:

• Entfernt nicht die Meta-Daten aus JPGs
• GTmetrix ist pingelig und findet deine Grafiken immer noch nicht toll, denn du könntest noch 300 KiloByte einsparen.

Fazit: WP Smush.it solltest du verwenden, wenn du deine Webseite für deine Besucher und nicht für die Testing-Tools optimierst.

EWWW Image Optimizer

Dies Plugin ist leider nicht zu jeder WordPress-Installation kompatibel, denn es benötigt im Hintergrund folgende Tools aus dem Server: jpegtran, optipng, pngout und gifsicle. Probiere die Installation einfach mal aus. Wenn die Tools fehlen, erhältst du eine entsprechende Benachrichtigung. Zusätzlich gibt es noch eine Cloud-basierte Version dieses Plugins. Die Komprimierung deiner Bilder über einem anderen Server ist aber mit Kosten verbunden.

Pro:

• Entfernt die Meta-Daten aus JPGs
• Funktioniert auch mit bestehenden Grafiken

Contra:

• Aufwändiger in der Konfigurierung und Anwendung als WP Smush.it
• Funktioniert nicht auf allen WordPress-Seiten, du bist auf deinen Hoster angewiesen

Fazit: Mit dem etwas komplizierteren EWWW Image Optimizer holst du das Letzte aus deinen Grafiken heraus.

Trick 17: Wenn du nicht die Möglichkeit hast, deine Grafiken mit EWWW zu optimieren, aber dennoch möglichst viel aus deinen Grafiken holen willst: GTmetrix zeigt zu jeder bemängelten Grafik einen Link zur optimierten Datei. Diese kannst du speichern und via FTP die gleichnamige Datei auf deinem Server ersetzen.

Fazit:

Jeder, der keinen professionellen Foto-Blog betreibt, sollte seine Grafiken komprimieren. Da das mit den Plugins komfortabel funktioniert, solltest du alle Grafiken deiner WordPress-Seite komprimieren, um so die Ladezeit zu verkürzen. Deine Besucher werden es dir danken!