Automatisch komprimieren für eine kurze Ladezeit

WordPress Grafiken komprimieren

Veröffentlicht am 20. August 2014WordPress Tipps6 Kommentare

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.

EWWW Image Optimizer bei der Arbeit.

EWWW Image Optimizer bei der Arbeit.

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.

WP Smush.it nutzt den Yahoo Dienst und funktioniert ohne Konfiguration.

WP Smush.it nutzt den Yahoo Dienst und funktioniert ohne Konfiguration.

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.

Auf diesem Shared-Server läuft EWWW Image Optimizer nicht.

Auf diesem Shared-Server läuft EWWW Image Optimizer nicht ohne Weiteres. Alternativ kann ein API-Key gekauft werden, so dass die Grafiken über eine Cloud optimiert werden.

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
Auf dieser Server-Konfiguration läuft EWWW Image Optimizer.

Auf dieser Server-Konfiguration läuft EWWW Image Optimizer.

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!

Kommentare zu "WordPress Grafiken komprimieren"
  1. Hans-Helge schrieb am 20. August 2014, um 13:35 Uhr:

    Es gibt neben den zwei Plugins noch Optimus (https://optimus.io/) von Sergej Müller. Da ich allerdings nicht so viel blogge komprimiere ich die Dateien noch manuell auf dem Rechner. Dazu verkleinere ich die Bilder erst mit Pixer (http://pixer.softonic.de/mac) und mit der kostenlosen App von JPEGmini (http://www.jpegmini.com/) komprimiere ich das Bild. Reicht für meine Anwendungszwecke voll aus.

    1. Dirk W. schrieb am 20. August 2014, um 19:46 Uhr:

      Optimus kenne ich und setze es für diverse Projekte erfolgreich ein. Danke für den Tipp mit der APP, das teste ich mal.

  2. Leif Magnus schrieb am 7. September 2014, um 03:08 Uhr:

    Danke für die tolle Vorstellung der Plugins. Nutze nun EWWW 🙂

    Gruß LMM

  3. Die wohl langsamste Website der Welt und 3 Tipps zur Optimierung schrieb am 18. März 2015, um 17:45 Uhr:

    […] du z.B. mit WordPress arbeitest, dann erfährst du bei den Kollegen von Pressengers, wie du deine Bilder ganz leicht mit der Hilfe von Plugins komprimieren […]

  4. Blogaufbau.de schrieb am 20. Mai 2015, um 13:01 Uhr:

    In meinem Blog nutze ich das Plugin schon seit geraumer Zeit und bin mit der Leistung mehr als zufrieden. Für mich das beste Plugin zur Komprimierung von Bildern!

  5. JPEG-Komprimierung durch WordPress ausschalten schrieb am 7. Januar 2016, um 17:27 Uhr:

    […] einem früheren Beitrag haben wir euch gezeigt, wie ihr Grafiken in WordPress komprimieren könnt. Um die Ladezeit eurer WordPress Seite zu optimieren, solltet ihr auf jeden Fall darauf achten, […]

Schreibe einen Kommentar

Pressengers lebt von der Wordpress Community, beteilige dich mit einem Kommentar!
Deine E-Mail Adresse wird nicht veröffentlicht.
Kommentare die Werbung oder eine reine Linkplatzierung darstellen, werden gelöscht oder von den Links befreit ;) Wenn du etwas wertvolles und relevantes beitragen kannst, ist dein Link willkommen.