Laut Google können Bilder über WebP wesentlich besser “lossless” (verlustfrei) und “lossy” (mit Qualitätsverlust) komprimiert werden.
👆 Die Bilder werden kleiner und können so, gerade bei bildlastigen Webseiten zu einem Performanceschub führen.
Bei einer lossless compression sind Verkleinerungen um bis zu 26 Prozent möglich. Bei einer Komprimierung mit Qualitätsverlust (einer lossy compression) sogar bis zu 34 Prozent – zumindest, berichtet Google das in seinem Developer Blog.
WebP wird von Raidboxes nativ unterstützt
Was du für eine WebP-Auslieferung brauchst: Einen WebP Converter
Die kostenlose Alternative: WebP Express
WebP wird von Raidboxes nativ unterstützt
Raidboxes unterstützt WebP nativ. Das heißt konkret: Immer wenn deine Box für ein Bild eine entsprechende WebP Variante findet, wird diese anstelle des originalen JPG oder PNG ausgeliefert.
Was du für eine WebP-Auslieferung brauchst: Einen WebP Converter
Damit WebP verwendet werden kann, brauchst du aber natürlich zunächst WebP Varianten deiner Bilder. Wenn du bereits ein Bildoptimierungsplugin nutzt, stehen die Chancen gut, dass dieses Plugin bereits in der Lage ist WebP Varianten deiner Bilder zu generieren oder bereits automatisch generiert.
Um herauszufinden ob und wie dein Plugin WebP unterstützt, wende dich am besten direkt an den Entwickler des Plugins.
Die kostenlose Alternative: WebP Express
Ein kostenloses Plugin, das ohne großen Aufwand WebP Varianten deiner Bilder erstellt und aktiv einbindet, ist das Plugin WebP Express.
Schritt 1: WebP Express installieren & aktivieren
Logge dich in deine WordPress Seite ein
Navigiere dann in die Pluginübersicht deiner Box
Suche im Pluginverzeichnis nach WebP Express
Klicke auf Installieren
Klicke dann auf Aktivieren
Ist das Plugin aktiv, erscheint in deinem WordPress Dashboard ein entsprechender Hinweis, der dich dazu auffordert das Plugin zu konfigurieren.
Schritt 2: WebP Express konfigurieren und Bilder konvertieren
Das Plugin ist nun im Grunde schon richtig konfiguriert. Eine Einstellung musst du aber noch vornehmen. Und zwar musst du die Einstellung Destination folder auf Mingled setzen. So werden die WebP Bilder im selben Ordner abgelegt, wie die Originale.
Zum Schluss musst du nun noch die Bilder in ihre WebP Varianten umwandeln. Klicke dazu auf den Button Bulk Convert direkt unter den Einstellungen. Dadurch wird die Umwandlung von JPG und PNG Bildern in das WebP Format angestoßen.
Schritt 3: WebP Implementierung testen
Sind die Bilder konvertiert, kannst du Im letzten Schritt nun testen, ob deine Box auch wirklich WebP Bilder ausliefert. Das kontrollieren des Bildformats ist gar nicht so einfach. Denn WebP Bilder, die von Browsern geladen werden, haben keine andere Endung, als das Originalbild. Die Auslieferung findet also im Hintergrund statt und kann nicht über den Dateinamen geprüft werden.
Daher musst du für das Prüfen der WebP Auslieferung mit der Browserkonsole arbeiten. Besonders einfach geht das in Chrome. Gehe hier am besten wie folgt vor:
Klicke irgendwo auf der Webseite, rechte Maustase und klicke auf Element untersuchen. Es öffnet sich nun die Browserkonsole.
Klicke hier auf Netzwerk.
Jetzt musst du das Bild nochmals laden, die Browserkonsole aber offenlassen. Aktualisiere dafür den Browser.
Im sog. Networkview werden nun die jeweils geladenen Ressourcen in chronologischer Reihenfolge angezeigt. Klicke nun auf den Request, der das Testbild repräsentiert.
Es öffnet sich die Detailansicht des Requests. Interessant für dich sind nun die Bereiche Requests Header und Response Header.
Prüfe zunächst den Request Header. Scrolle hierzu im Headerbereich deiner Konsole ganz nach unten. Dort findest du den Bereich Request Header. In der ersten Zeile unter Accept muss sich das WebPFormat finden. Konkret heißt das Textsnippet image/webp.
Ist dieser Teil vorhanden, wird hier aktiv ein WebP Bild angefragt. Die Voraussetzung dafür, dass auch ein WebP Bild ausgeliefert wird.
Im zweiten Schritt kannst du dir nun den Response Header ansehen.
Hier musst du im Headerbereich deiner Konsole wieder nach oben scrollen und dir hier den Bereich Response Header ansehen.
Wird im Bereich Content-Type wiederum image/webp ausgegeben, weißt du, dass es sich bei dem Bild um ein WebP Bild handelt.
💡 Wenn dieser Test bestanden ist, weißt du, dass das Plugin korrekt implementiert ist und von nun an alle Bilder WebP Bilder sind.
Was tun, wenn der Test negativ ausfällt?
Fällt der Test negativ aus, wird also kein WebP Bild ausgeliefert, dann stören hier noch Caches die Auslieferung. Stelle unbedingt sicher, dass alle Testaufrufe ungecacht stattfinden. Du musst hierfür den Browser und den Raidboxes Cache leeren.
WebP in Safari & Cloudflare?
Der Browser Safari unterstützt WebP standardmäßig nicht. Stattdessen verwendet Apple ein anderes Bildformat. Solltest du Cloudflare nutzen, so liefert Cloudflare standardmäßig trotzdem WebP in alle Browserformate – auch in Safari. Das führt zu einem Fehler bei der Auslieferung der Bilder. Du kannst dieses Verhalten aber ganz einfach verhindern, indem du bei Cloudflare WebP Bilder vom Caching ausschließt. Beachte aber: Unter Umständen musst du dafür dein Cloudflare Abo erst noch updaten.