Allgemein

Bilder des eigenen WordPress Blogs optimieren & komprimieren

Im ersten Beitrag zur Pagespeed-Optimierung der eigenen Webseite haben wir uns zunächst den IST-Zustand der eigenen Webpräsenz vor Augen geführt & ausserdem die beiden bereits “bestandenen Regeln”, nämlich Sichtbare Inhalte priorisieren & Zielseiten-Weiterleitungen vermeiden, thematisiert. Im heutigen Beitrag werden wir damit beginnen Schwachpunkte auszumerzen bzw. erforderliche Massnahmen zu treffen, um den Pagespeed des eigenen WordPress Blogs nach und nach zu erhöhen. Einer der wichtigsten Punkte ist dabei die Bildoptimierung. Durch eine korrekte Formatierung und Komprimierung der Webseitenbilder & -grafiken können hier viele Datenbytes eingespart werden, ohne dabei Qualitätsverluste hinnehmen zu müssen. Zunächst beschäftigen wir uns mit der Frage ob und wie sinnvoll es ist, Bilder des WordPress Blogs nachträglich zu optimieren.

Probleme bei nachträglicher Bildkomprimierung

Bevor man anfängt seine bereits veröffentlichten Bilder auf dem Webhost zu optimieren bzw. zu verkleinern, sollte man sich darüber im Klaren sein, dass es in Einzelfällen zu Ranking-Verlusten in der Google Bildersuche kommen kann. Betreibt man bspw. eine Food- oder Fashionblog und erhält dementsprechend viele Besucher über die integrierten Bilder sollte man sich also gut überlegen, ob einem der Pagespeed wichtiger ist als die generierten Besucher. Wenn man jetzt nämlich alle Bilder nachträglich optimiert, wertet Google das optimierte Bild als ganz neues Bild und schmeisst die Verlinkung zum bisherigen Bild aus dem Index. Auch wenn die Verlinkung (Bild-URL) dieselbe bleibt wird das Bild in der Bildersuche nicht einfach ersetzt! Bis man nun mit den neuen Bildern wieder gleiche Resultate und Rankings erzielt kann es Monate oder auch Jahre dauern.

Um herauszufinden wieviel Traffic Ihr mit eurem WordPress Blog bzw. eurer Webseite über die Google Bildersuche generiert, lohnt ein kurzer Blick in die Webmaster Tools. Bei Webmaster Tools anmelden, gewünschte Webseite auswählen & links in der Navigation Suchanfragen und danach den gleichnamigen Unterpunkt Suchanfragen (1) auswählen.

Jetzt oberhalb der aufgelisteten Suchanfragen den Tab “Filter” (2) anklicken, daraufhin werden einem die 3 Filterkategorien “Suchen”, “Standort” und “Zugriffszahlen” präsentiert. Hier beim Filter “Suchen” die Option “Bild” (3) auswählen und anschliessend auf “Anwenden” (4) klicken.

Nun werden Euch alle Trafficdaten bzgl. der Bildersuchanfragen ausgegeben & man bekommt einen schönen Überblick über alle Bilder, die man besser nicht nachträglich ändern sollte.

Bilder nachträglich optimieren

Sollte man sich nach obigen Überlegungen trotzdem dazu entschliessen die Bilder nachträglich zu optimieren, muss man zunächst den Bilderordner der eignen Webseite ausfindig machen und via FTP-Programm auf den heimischen Computer laden. Bei allen WordPress Blogs werden die bisher hochgeladenen Bilder im “uploads-Ordner” abgelegt, dieser Ordner liegt im “wp-content-Ordner” der WordPress Installation.

Screenshot Uploads Ordner herunterladen - FTP-Programm Filezilla

Screenshot Uploads Ordner herunterladen – FTP-Programm Filezilla

Zunächst also wie oben im Screenshot abgebildet Filezilla starten, Domain-URL, FTP-Username, FTP-Passwort eintragen und zum Server verbinden (1), anschliessend in der Serverstruktur rechts zum Bilderordner “uploads” navigieren (2) & mittels Rechtsklick alles herunterladen (3).

Verlustfreie Bildkompression mit TinyPNG/TinyJPG

Um die soeben heruntergeladenen Bilder nun zu komprimieren stelle ich nun verschiedene Möglichkeiten vor, beginnen werden wir mit einer onlinebasierten Bilderkompression, nämlich TinyPNG bzw. TinyJPG.

Screenshot TinyPNG Startseite - tinypng.comScreenshot TinyPNG Startseite – tinypng.com

Bei TinyPNG/TinyJPG werden die gewünschten Bilddateien zunächst über die Schaltfläche “Drop your .png or .jpg files here!” hochgeladen und anschliessend sofort komprimiert. Die Technik hinter der Komprimierung nennt sich “Quantifizierung”, dabei werden ähnliche Farben des Bildes einfach zusammengelegt bzw. kombiniert. Ausserdem werden überflüssige Metadaten der Bilder entfernt. Die Komprimierung sieht man dem Bild dabei so gut wie nicht an, der Unterschied in der Dateigröße ist allerdings erheblich.

Original JPG - Bildgröße: 46KBKomprimiert mit TinyPNG - Bildgröße: 25KB

Als Beispiel habe ich hier mal ein Bild des WordPress Blogs durch die TinyPNG-Kompression gejagt. Links das Original und rechts das komprimierte Bild. Der Unterschied der beiden Bilder ist nahezu nicht sichtbar, die Dateigröße hingegen konnte von 46KB auf 25KB gesenkt werden. Durch die Komprimierung mit TinyPNG/TinyJPG konnten also 46% der Dateigröße eingespart werden.

Das einzige Manko bei TinyPNG/TinyJPG ist die Tatsache, dass lediglich 20 Bilder gleichzeitig hochgeladen werden können, ausserdem muss jede komprimierte Datei einzelnd wieder heruntergeladen werden & gegen die originale Bilddatei ersetzt werden. Das kann bei Blogs mit mehreren 100 Bildern schon einiges an Zeit in Anspruch nehmen.

Mehrere Bilder gleichzeitig verkleinern

Wer keine Lust hat, alle Bilder über den obigen Weg zu komprimieren & zu ersetzen kann alternativ ein Bildverkleinerungstool mit Batch-Verarbeitung nutzen. Die Batch-Verarbeitung ermöglicht die Verkleinerung eines gesamten Ordners voller Bilder auf einen Schlag. Das Tool nennt sich “Der grandiose Bildverkleinerer” und kann hier heruntergeladen werden.

Sobald das Programm heruntergeladen und gestartet wurde, kann mit dem Verkleinern der Bilddateien losgelegt werden. Dazu links den gewünschten Ordner anklicken (1), in dem sich die heruntergeladenen Bilddateien befinden. Im nächsten Schritt die Pixeloption “Prozent” auswählen & mit den Einstellungen Breite: 100 & Höhe: 100 füllen (2), denn wir wollen ja schliesslich keine Änderung an der Bildgröße ansich vornehmen.

Im Abschnitt “Qualität” muss ein wenig rumprobiert werden. Um eine enorme Verkleinerung der Bilddatengröße zu erreichen kann hier der Regler auf “Mittel (50%)” eingestellt werden (weniger ist definitiv nicht mehr zu empfehlen, da die Bildqualität doch sichtbar darunter leidet). Ich empfehle eine Einstellung von 70% – 90% (3). Abschliessend noch die Felder “Zeichenfolge vor Dateinamen” & “Name des Zielverzeichnisses” leeren (4), damit die Bilddateien direkt mit den verkleinerten Versionen ersetzt werden & nicht einfach nur Kopien erstellt werden, die man im Nachhinein wieder mühsam umbenennen muss. Mit einem Klick auf “Los gehts” (5) die Verkleinerung starten.

Da die Original-Dateien mit obigen Einstellungen nach der Verkleinerung nicht mehr wieder herstellbar sind, müsst Ihr jetzt noch 2x bestätigen, dass Ihr die Verkleinerung wirklich wollt. Wer das Tool erstmal testen möchte, sollte die Originalbilder vorher extra sichern oder aber über die Einstellungsmöglichkeit “Zeichenfolge vor Dateinamen” sicherstellen, dass lediglich verkleinerte Kopien erstellt werden.

Original JPG - Bildgröße: 46KB90%ige Verkleinerung

Als Beispiel habe ich auch hier ein Vergleichsbild erstellt, links das Original und rechts das verkleinerte Bild. Der Unterschied der beiden Bilder ist auch hier nahezu nicht sichtbar, die Dateigröße hingegen konnte von 46KB auf 17KB gesenkt werden. Durch die Komprimierung mit dem “Grandiosen Bildverkleinerer” konnten hier sogar 63% der Dateigröße eingespart werden.

Durch die Batch-Verarbeitung lassen sich hier auch grosse Bilddatenbanken mit mehreren 100 Ordnern relativ schnell verkleinern. Qualitativ würde ich allerdings die Kompression mittels TinyPNG/TinyJPG bevorzugen, da die Bilder beim “Grandiosen Bildverkleinerer” wie der Name schon sagt lediglich verkleinert und nicht ordnungsgemäß komprimiert werden. Wer allerdings nicht stundenlang mit Hoch- und Herunterladen seiner Bilder verbringen möchte, hat mit dem Grandiosen Bildverkleinerer ein mächtiges Tool zur Hand, um den Prozess drastisch zu verkürzen.

Zukünftige Überlegungen für den Bildupload

In Zukunft sollten Bilder also immer bereits komprimiert hochgeladen werden, dazu könnt Ihr eine der oben vorgestellten Methoden nutzen. Desweiteren sollten alle Bilder im Content immer optimiert ausgeben werden, hierzu zählt zum Einen das richtige Bildformat und zum Anderen die richtige Bildbreite. Die Angabe der “width”- & “height”-Attribute sollten ebenfalls nicht fehlen.

Das Bildformat JPG eignet sich hervorragend für die Darstellung von Fotos, während PNG stets für Grafiken, Screenshots etc. eingesetzt werden sollte. Ausserdem ist es nicht sinnvoll Bilder in Blogartikel einzufügen, welche die Breite des Themes übersteigen. Ist der Artikelcontent mit 600 Pixel durch das Theme/Design vorgegeben, sollten Bilder auch mit einer maximalen Breite von 600 Pixel hochgeladen werden. Denn auch wenn die Bilder automatisch an die Contentbreite angepasst werden, muss das gesamte Bild geladen werden, egal wie gross es auch ist. Um herauszufinden wie breit die Bilder im Blog maximal sein dürfen, könnt Ihr eine bereits veröffentlichte Bilddatei (muss eine größere Breite als Artikelcontent haben) im Blog ansteuern und mit einem Rechtsklick auf die “Grafik-Info” (im Firefox) einsehen.

Hier beim Punkt Maße wird zunächst das tatsächliche Bildformat angegeben, dahinter das skalierte Bildformat. Im obigen Beispiel könnte das Bild also um mehr als die Hälfte im Format verkleinert werden, um die optimale Darstellung zu erreichen.

Score-Wert nach Bildoptimierung

Screenshot Google Page Speed Insights Score nach Bildoptimierung - developers.google.comScreenshot Google Page Speed Insights Score nach Bildoptimierung – developers.google.com

Nachdem obige Bildkomprimierungen auf die Webseite angewendet wurden, hat sich der Score-Wert deutlich gesteigert. Sagenhafte 16 Punkte konnten durch die erste Optimierungssmassnahme Bilkomprimierung bzw. Bildoptimierung aufgeholt werden.

Screenshot Details Bilder optimieren - developers.google.comScreenshot Details Bilder optimieren – developers.google.com

Das einzige was nach der Bildoptimierung noch bemängelt wird, ist die Tatsache das ein Button der von einem externen Bloglister geladen wird nicht ordnungsgemäß optimiert wurde. Hier könnte man weitere 814 Byte einsparen, was die Ladegeschwindigkeit der Webseite aber nicht spürbar beschleunigen würde. Um den Punkt Bilder optimieren ebenfalls als bestandene Regel in den Google Page Speed Insights aufführen zu lassen, müsste man ebenfalls alle extern geladenen Bilder ebenfalls komprimieren. Am Besten externe Bilddateien herunterladen, komprimieren und anschliessend selbst hosten. Ob das jetzt bei 814 Byte Sinn macht, sei mal dahingestellt und muss jeder für sich selbst entscheiden.

Alle Artikel der Serie

Leave a Comment