Die Bildoptimierung wird zunehmend wichtiger bei der Geschwindigkeitsoptimierung deiner Website. Mit Google’s webp-Bildformat kannst du die Ladezeit deiner Wordpress Website um bis zu 70% reduzieren. Mit dem passenden Wordpress Plugin ist das kinderleicht! In diesem Artikel zeige ich dir wie es geht.
1. Was ist WebP?
Webp ist ein von Google entwickeltes Bildformat. Dabei sollen die WebP-Bilder schnellere und kleinere Bilder ermöglichen und so die Ladezeit einer Website extrem drücken. Das Bildformat wurde erstmals 2010 erwähnt und bietet verlustfreie und verlustbehaftete Kompressionsmethoden. Die Bilder werden dabei vom Webbrowser ausgeliefert – basierend auf dem MIME type.
Die WebP komprimierte verlustfreie Kompression ermöglicht bis zu 26% kleinere Bilder im Vergleich zu PNGs. Die verlustbehaftete Kompression mit WebP ermöglicht bis zu 34% kleiner Bilder verglichen mit JPEGs.
Große Konzerne wie eBay und YouTube nutzen das WebP Format bereits – wird also Zeit, dass auch du dieses tolle Bildformat für deinen Wordpress Blog benutzt und so extrem viel Ladezeit sparst.
Warum ist WebP so wichtig? Im August 2016 veröffentlichte httparchive eine Studie, nach der 64% der Größe der Website durch Bilder zustande kommen. Mit dieser Prozentzahl im Kopf macht die Optimierung von HTML, CSS und JS Sinn, aber der Fokus sollte auch auf optimierte Bilder gelegt werden. Mit dem neuen Bildformat WebP kannst du deine Bilder viel kleiner komprimieren – bei gleichbleibender Bildqualität. Je kleiner deine Wordpress Seite ist, desto schneller wird sie laden – das ist nicht nur für deine Besucher gut sondern auch ein wichtiger Rankingfaktor für Google.
1.1 WebP Kompatibilität
Auch wenn WebP sehr interessant ist, sollte man auf den Browser Support achten. Leider unterstützen nicht alle Browser das WebP Format. Laut caniuse wird WebP derzeit von Chrome 23+, Opera 39+, allen Versionen von Opera mini, Android Browser 4.3+ und Chrome für Android unterstützt.
Aber das ist kein Grund den Kopf hängen zu lassen. Es gibt einen Weg, WebP an unterstützte Browser auszuliefern und für alle Browser die WebP nicht unterstützten ein JPG/PNG Fallback einzurichten. Dadurch werden in alten Browsern keine kaputten Bilder angezeigt sondern einfach nur etwas größere Bilder. Das Nutzererlebnis bleibt also erhalten. Daher sollte WebP als ein Zusatz angesehen werden – Google wird es dir danken!
Auch wenn laut W3Schools der Chrome Browser das Monopol mit fast 80% Verbreitung hat – schau dir die konkrete Browserverwendung deiner Website in Google Analytics an! Diese können teilweise stark variieren, abhängig von deinen Besuchern und deiner Nische. Dafür gehst du einfach in deinem Google Analytics Account auf Zielgruppe -> Technologie -> Browser und Betriebssystem. Und siehe da: Die Werte variieren auch bei mir sehr stark.
2. Wie du WebP in Wordpress einbindest
Und jetzt kommt der Haken: Wordpress unterstützt WebP nicht von Haus aus. Auch wenn Wordpress die gängigsten Bildformate (JPEG, GIF, PNG & ICO) unterstützt, musst du WebP mittels Plugin zu dieser Liste hinzufügen. Du kannst also nicht einfach eine WebP Datei zu deiner Medien-Bibliothek hochladen:
Der Vorteil an einem Plugin: Du brauchst deine „normalen“ JPEGs oder PNGs nicht extra speichern – die Konvertierung zu WebP übernimmt das Plugin automatisch. Dies geschieht über die exec()-Funktion auf deinem Server. Der Nachteil daran ist, dass manche Server diese Funktion (aus Sicherheits-Gründen) nicht unterstützen. Eventuell musst du bei dem Webhoster mal nachfragen, ob dieser diese Funktion für dich freischaltet.
Falls du partout keine exec()-Funktion auf deinem Server hast, kannst du die Bilder auch von EWWW Image Optimizer in der Cloud konvertieren lassen. Hierbei musst du allerdings eine kostenpflichtige Subscription bei EWWW abschließen. Eine kostenlose Variante um deine Bilder zu WebP zu konvertieren, ist das Plugin WebP Express mit der GD Extension. Diese kann allerdings keine Transparenzen in PNGs erkennen. Falls du sowieso nur sehr wenige PNGs in deiner Website benutzt, kannst du also einfach WebP benutzen.
3. WebP Plugins für Wordpress
Jetzt geht’s ans Eingemachte! Nachdem du dich nun für ein Plugin entschieden hast, möchte ich dir zeigen wie du konkret Webp Bilder konvertierst und in deine Wordpress Website einbindest. Wir starten mit dem einfachsten Weg: EWWW Image Optimizer und eingeschalteter exec()-Funktion.
Bitte fertige vorher immer ein Backup deiner Website an! Dafür kannst du ein Plugin wie Duplicator benutzen.
3.1 WebP Einbindung mittels EWWW Image Optimizer Plugin
Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf den Button unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Das Plugin EWWW Image Optimizer ist die einfachste Methode WebP in deine Wordpress Installation einzubinden.
- Bitte vorher immer ein Backup ziehen – benutze dafür einfach das Backup Plugin Duplicator.
- Installiere dir das EWWW Image Optimizer Plugin
- Unter Einstellungen -> EWWW Image Optimizer findest du die Einstellung
- Unter WebP setzt du das Häkchen bei „JPG/PNG nach WebP“
Solltest du bereits Bilder hochgeladen haben bevor du das Plugin installiert hast, werden diese natürlich nicht umgewandelt. Um diese Bilder umzuwandeln klickst du unter „Medien“ auf „Massenoptimierung“.
Um wirklich alle Bilder einzubeziehen, solltest du das Häkchen bei „Bereits optimierte Bilder werden standardmäßig übersprungen. Aktiviere dieses Kontrollkästchen vor dem Scannen, um dies zu übergehen.“ setzen.
Falls du deine JPGs und PNGs bereits komprimiert hast, kannst du die Komprimierung bereits vorhandenener Bilder deaktiveren. Setze dafür das Häkchen bei „Kompression überspringen und nur WebP-Konvertierung versuchen.“
Jetzt kannst du auf den „Nach unoptimierten Bilder scannen“-Button klicken. Wenn der Scan durch ist, sollest du alle gefundenen Bilder zu WebP Bildern konvertieren.
Sobald das Plugin fertig konvertiert hat, musst du nur noch deine .htaccess anpassen. Im besten Fall übernimmt das Plugin diesen Schritt für dich. Gehe einfach auf Einstellungen -> EWWW Image Optimizer. Direkt unter dem „Änderungen speichern“-Button siehst du jetzt folgendes:
Klicke einfach auf den Button „Setze Rewirte-Regeln ein“ und das Plugin schreibt automatisch den erforderlichen Code in deine .htaccess. Wenn alles geklappt hat, verwandelt sich das rote Feld mit der PNG-Aufschrift in ein grünes Feld und es steht WebP Darin. Sollte das nicht funktionieren, musst du deine .htaccess per Hand editieren. Bitte leg dir vor Bearbeitung der .htacess ein Backup der Datei an!
3.2 WebP Einbindung mittels WebP Express Plugin
Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf den Button unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Falls auf deinem Server die exec()-Funktion gesperrt (zum Beispiel beim Wordpress Hoster Raidboxes) ist, kannst du das EWWW Image Optimizer Plugin nicht kostenlos nutzen. Dir steht es natürlich frei die WebP Konvertierung über die kostenpflichtige API von EWWW Image Optimizer vorzunehmen.
Oder du benutzt das kostenlose Plugin WebP Express. Das ist auch sehr komfortabel und kommt fast als „out-of-the-box“-Lösung. Nach der Installation des Plugins kannst du das Plugin unter Einstellung -> WebP Express konfigurieren.
Die ersten Optionen kannst du alle so belassen. Fertige davor ein Backup deiner Wordpress Website an!
Für den normalen Gebrauch solltest du dich für einen Konvertierungs-Algorithmus entscheiden. Ich habe für das Beispiel die „ImageMagick“-Methode unter „Conversion-Methods“ ausgewählt und alle anderen Methoden deaktiviert. Wie du bereits in meinem Screenshot sehen kannst, hast du die Möglichkeit auch mehrere Methoden zur Konvertierung auszuwählen. WebP Express benutzt die oberste Methode zuerst und falls diese nicht funktionieren sollte, die nächste aktivierte Methode darunter und so weiter.
Beachte, dass die Voreinstellungen der Konvertierungsqualität für den normalen Gebrauch ausreicht. Solltest du ein Fotografen Portfolio konvertieren wollen, kann es sinnvoll sein die Qualität der Konvertierung etwas zu erhöhen. Beachte jedoch, dass dann auch die Ladezeit deiner Website wieder steigt.
Nachdem du die Konvertierungsmethode eingestellt hast, kannst du auf den Button „Bulk-Convert“ klicken um deine bereits vorhandenen Bilder in WebP Bilder zu konvertieren.
Das Plugin WebP Express regelt dabei sogar automatisch den erforderlichen Eintrag in die .htaccess. Lediglich das Häkchen unter „Alter HTML“ solltest du noch setzen damit dein HTML-Code schick ist. Dabei wird das <img> tag durch das <picture> tag im Quellcode ersetzt. Damit stellst du den Browsern zwei verschiedene Varianten deiner Bilder zur Verfügung. Somit können kompatible Browser das WebP Bild auswählen und andere Browser können weiterhin dein JPG bzw. PNG-Bild nutzen.
Nach dem Speichern hast du das WebP Plugin erfolgreich konfiguriert!
Übrigens unter dem Punkt „Web Service“ kannst du deine Wordpress Website dazu nutzen, Bilder quasi per Fernbedienung für andere Webseiten zu konvertieren. In der anderen Installation kannst du dann unter „Conversion method“ Remote WebP Express als Methode auswählen.
4. Wie prüfe ich ob WebP-Bilder ausgeliefert werden?
Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf den Button unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Nachdem du das jeweilige Plugin installiert und konfiguriert hast, solltest du noch prüfen ob die WebP Bilder auch an die kompatiblen Browser ausgeliefert werden. Falls du ein Caching Plugin benutzt, solltest du vorher deinen Cache löschen.
4.1 Wie prüfe ich im Firefox ob WebP verwendet werden?
Im Firefox Browser rufst du nun deine Wordpress Website auf. Klicke auf ein beliebiges Bild mit der rechten Maustaste und wähle „Grafik-Info anzeigen“. Ein Fenster öffnet sich und hier siehst du die Informationen zum Bild. Unter „Typ“ sollte nun „WebP-Grafik“ angezeigt werden. Damit liefert deine Website erfolgreich WebP Bilder aus.
Neben dieser Möglichkeit gibt es noch eine andere Möglichkeit. Hierzu klickst du mit der rechten Maustaste auf eine beliebige Grafik deiner Website. Wähle nun „Grafik anzeigen“ aus. Daraufhin zeigt dir dein Browser nur das Bild an. Klicke mit der rechten Maustaste auf das Bild und wähle „Element untersuchen“ aus. Der Firefox-Inspektor öffnet sich. In der oberen Leiste des Inspektors siehst du verschiedene Tabs (Stilbearbeitung, Web-Speicher, Inspektor, usw). Klicke in dieser Tableiste auf „Netzwerkanalyse“. Darunter öffnet sich nun eine Tabelle in der auch dein Bild erscheinen sollte. Wenn hier unter Typ „webp“ steht, hast du alles richtig gemacht. Gratulation!
4.2 Wie prüfe ich im Chrome ob WebP ausgeliefert wird?
Um zu überprüfen ob deine Website WebP Bilder im Chrome Browser ausliefert, klickst du mit der rechten Maustaste auf ein beliebiges Bild deiner Website. Hier wählst du „Untersuchen“ aus. Jetzt öffnet sich das Entwickler-Tools Fenster. Klicke oben in den Tabs (Elements, Console, Sources, usw) auf „Network“. Jetzt solltest du deine Seite nochmal aktualisieren (Apfel+R). Chrome zeigt dir jetzt alle verwendeten Dateien deiner Website an. Suche dir einfach ein Bild in dieser Liste und jetzt sollte unter „Type“ auch der Eintrag „webp“ vermerkt sein. Du verwendest WebP Bilder!
5. WebP Fazit
Wie du siehst, kannst du mit dem WebP Format wirklich einiges an Bildgröße sparen. Ich denke andere Browser werden in der Unterstützung nachziehen und dein Vorteil wird sich weiter ausbauen. Es gibt keine vergleichbare Bildkompression auf dem Markt, die WebP derzeit die Stirn bieten könnte. WebP kann auch verlustfreie Kompression (und spart trotzdem wertvolle Kbs). Wenn du also nach weiteren Möglichkeiten suchst, deine Wordpress Installation schneller zu machen ist WebP eine gute Lösung.
Guter Beitrag. Vielen Dank dafür!
Bei Webp Express kann man Bilder auch über die GD Lib konvertieren. Man muss nur darauf achten, dass es von gd lib unterstützt wird. Ich dachte erst, man benötigt Imagemagick unbedingt dafür. Dadurch habe ich etwas Zeit verloren…
Ich benutze schon ein Plugin zum komprimieren der Bilder, stellt das ein Problem dar? Ich denke ich muss das Plugin aber vorher deaktivieren! Ist das richtig, oder kann ich dieses auch aktiviert lassen? Meinem Verständniss nach macht es aber keinen Sinn 2 Plugin’s zu benutzen, die vorhandene Bilder komprimieren!
Mit freundlichen Grüßen,
Reinhold
Hi Reinhold,
die Komprimierung ist das eine – webp das andere. Webp ist eine andere „Dateiart“. Von Daher kannst du alle zwei Plugins aktiviert lassen – wenn das Komprimierungsplugin kein webp unterstützt. Kommt halt drauf an, ob dein erstes Plugin schon die Webp Funktionalität hat.
Grüße!