Allerdings ist die Bereitstellung von Bildern über WebP nicht einfach. Dies hängt vom Webserver Ihres Servers, dem ausgewählten CDN, Design, Caching-Plugins usw. ab.
Dieser Leitfaden hilft Ihnen, WebP-Bilder auf drei Arten an WordPress zu liefern.
Was ist WebP?
Neues Bildformat für das Web
von Google
WebP ist ein von Google entwickeltes Bildformat (wie png und jpg). WebP-Bilder (.webp) sind in der Regel viel kleiner, was Websites beschleunigt und weniger Bandbreite verbraucht.
Je nach Bild können Sie die Größe von 25 % bis 70 % reduzieren.
JPEG, PNG, GIF usw. haben ihre Vor- und Nachteile. Die folgende Tabelle gibt Ihnen eine Vorstellung:
| JPG | GIF | PNG | SVG | |
| Vektor | ❌ | ❌ | ❌ | ✅ |
| Raster | ✅ | ✅ | ✅ | ❌ |
| Transparenz | ❌ | ✅ | ✅ | ✅ |
| Animation | ❌ | ✅ | ✅ | ✅ |
| Verloren | ✅ | ❌ | ❌ | ❌ |
WebP hat fast alle oben genannten Funktionen! Warum können wir dann WebP nicht überall verwenden?
Warum nicht überall WebP verwenden?
Wie Sie sehen können, unterstützen nur 80 % der Geräte nur WebP. Nicht nur ältere Browser, Safari/iOS Safari unterstützt WebP immer noch nicht.
Warum ist es so schwierig, WebP zu bedienen?
Wie Sie bemerkt haben, liefern wir Bilder je nach Browser aus. Wenn der Browser WebP nicht unterstützt, müssen wir ihnen das Originalbild (jpg/png/gif) zur Verfügung stellen.
Es gibt zwei Möglichkeiten, WebP bereitzustellen:
Verwendung des Image-Tags
Wir können benutzenBild-Tag, um dem Browser mitzuteilen, dass wir ein WebP-Format haben. Wenn der Browser dies unterstützt, wird das reguläre/Fallback-Image geladen.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Durch andere Antwort
In einer anderen Antwort haben Sie wie üblich eine Datei. Genau so:
<img src="img.jpg" />Eine Bild-URL unterstützt die Bereitstellung von JPG- und Webp-Dateien. Das macht der Server.
Obwohl es sich um eine .jpg-Dateierweiterung handelt, lautet die Antwort WebP, wenn der Browser WebP unterstützt. Auch „Vielfalt“ genannt.
Bild-Tag vs. vielfältige Antwort
Jedes hat seine Vor- und Nachteile. Hier eine Vergleichstabelle:
| Bild-Tag | Vielfältige Antwort | |
|---|---|---|
| Funktioniert mit Hintergrundbildern | ❌ | ✅ |
| CDN-freundlich | ✅ | ✅ (nur wenige) |
| Server muss konfiguriert werden | ❌ | ✅ (ngix) |
| Funktioniert mit Lazy Loading | ✅ | ✅ |
Wie serviere ich Bilder in WebP in WordPress?
Methode Nr. 1 – Verwenden Sie CDN nur mit Fly WebP-Konvertierung
Dies ist wahrscheinlich die einfachste Lösung. Einige CDN-Anbieter unterstützen derzeit die On-the-fly-Bild-zu-WebP-Konvertierung zusammen mit der Bildoptimierung.
Hier sind ein paar:
- BunnyCDN
- Cloudflare mit Polnisch (Pro-Tarif)
- Bewölkt
- ShortPixel Adaptive Images (verwendet StackPath CDN)
- WP-Komprimierung
Mit dieser Methode können Sie auch Speicherplatz sparen, da Sie nicht sowohl normale als auch konvertierte WebP-Bilder speichern müssen.
BunnyCDN
BunnyCDN wird mit dem Bunny Optimizer geliefert, der Bilder komprimieren und spontan in WebP konvertieren kann.
Methode Nr. 2 – Verwenden von Diversity Response + CDN
Wie oben beschrieben, hat eine „Variantenantwort“ eine einzige Bild-URL, die je nach angefordertem Browser sowohl WebP- als auch Nicht-WebP-Bilder bereitstellen kann.
Wir müssen auch das richtige CDN auswählen, das WebP-Anforderungsheader als Cache-Schlüssel unterstützt. Andernfalls wird das WebP-Bild, sobald es auf dem Server zwischengespeichert ist, an Browser übermittelt, die WebP nicht unterstützen.
Varied Response in WordPress anpassen
Der einfachste Weg, eine reichhaltige Antwort für WebP in WordPress einzurichten, ist die Verwendung des WebP Express-Plugins. Installieren Sie einfach das Plugin und klicken Sie auf "Einstellungen speichern und neue .htaccess-Regeln erzwingen".
WebP Express konfiguriert den WebP-Konverter und überschreibt die Regeln, sodass er die Bilder bei Erhalt einer Anfrage spontan in WebP konvertiert, und wenn der Browser WebP nicht unterstützt, wird das Standardbild geliefert.
Wenn Sie in Nginx sind
WebP Express fügt die notwendigen '.htaccess'-Rewrite-Regeln hinzu, funktioniert aber nur auf einem Apache-, LiteSpeed- oder OpenLiteSpeed-Server. Wenn Sie Nginx verwenden, müssen Sie bearbeitennginx.configund fügen Sie den folgenden Code hinzu:
# WebP Express-Regeln# --------------------location ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Vary Accept;expires 365d;if ($http_accept !~* "webp"){break;}try_files/wp-content/webp-express/webp-images/doc-root/$uri.webp$uri.webp/wp-content /plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content;}# Anfragen für nicht existierende Webps an den Konverterstandort weiterleiten ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ------------------ (WebP Express-Regeln enden hier)Der obige Code fügt die erforderlichen Antwortheader hinzu (die Cache-Verwaltung variiert ebenfalls) und versucht, WebP zu liefern, falls vorhanden, andernfalls leiten Sie es an den Konverter um (basierend auf der Browserunterstützung).
CDN-Anbieter, die Diverse Response unterstützen
Wenn Ihr CDN-Anbieter WebP nicht als Caching-Schlüssel unterstützt, werden WebP-Dateien an Browser übermittelt, die WebP nicht unterstützen. Ebenso besteht die Möglichkeit, dass Nicht-Webp-Bilder an unterstützte Browser geliefert werden.
BunnyCDN , KeyCDN , Google-CDN und viele andere CDN-Anbieter unterstützen WebP als Cache-Schlüssel. Stellen Sie sicher, dass Sie sie in den Einstellungen aktivieren.
vBunnyCDN :
vKeyCDN :
Verwenden Sie den kostenlosen Plan von Cloudflare?
Leider unterstützt der kostenlose Plan von Cloudflare WebP nicht als Cache-Schlüssel. Verwenden Sie entweder ein CDN wie BunnCDN oder führen Sie ein Upgrade auf den professionellen Plan durch.
Richten Sie ein vielfältiges Response + CDN mit beliebten Hosting-Anbietern ein
Stellen Sie sicher, dass WebP Express installiert ist.
- Kinsta oder WP Engine – kontaktieren Sie ihr Support-Team, um die obige Nginx-Konfiguration hinzuzufügen und den WebP-Caching-Schlüssel in ihr CDN (KeyCDN) aufzunehmen.
- Cloudways - installieren Sie einfach WebP Express und speichern Sie die Einstellungen mit .htacess. Da Cloudways einen hybriden Apache + Nginx-Ansatz verwendet, funktioniert es sofort.
- SiteGound – Wenden Sie sich an den Support, um die Nginx-Konfiguration hinzuzufügen. Verwenden Sie wie oben ein unterstütztes CDN.
- LiteSpeed / OpenLiteSpeed / Apache-Server - einfach WebP Express installieren und Einstellungen mit '.htacess' speichern. Verwenden Sie auch ein unterstütztes CDN wie oben.
- Benutzerdefinierter VPS mit Nginx (LEMP-Stack) - Einrichtung
nginx.confund verwenden Sie ein unterstütztes CDN wie oben.
Methode Nr. 3 – Verwenden eines Image-Tags
Wenn beide der oben genannten Methoden für Sie nicht funktionieren, können Sie das Image-Tag verwenden. Es erfordert keine Serverkonfiguration (Bearbeiten von nginx.conf) und unterstützt alle CDN-Anbieter.
Mit dieser Methode wird der HTML-Code für die WebP-Bereitstellung geändert. Es funktioniert nicht mit Hintergrundbildern, ist mit einigen Themen, Caching-Plugins, Lazy-Loading-Plugins usw. nicht kompatibel.
Wenn Sie diese Methode verwenden, werden alle img-Tags wie folgt konvertiert:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Wenn der Browser WebP unterstützt, wird die entsprechende Datei geliefert, ansonsten wird ein normales Bild geliefert.
Anpassen eines Bild-Tags für WebP in WordPress
Der einfachste Weg, ein Bild-Tag einzurichten, ist über WebP Express.
Stellen Sie den Betriebsmodus auf „CDN-freundlich“ und aktivieren Sie „HTML ändern“.
Fazit
Ich wünschte, der Tag würde kommen, an dem alle Browser WebP unterstützen!
Wenn Sie ein paar Dollar im Monat ausgeben können, ist es am einfachsten und effizientesten, ein CDN wie BunnyCDN zu verwenden, das Bilder im Handumdrehen in WebP konvertiert. Ansonsten halten Sie sich an Methode #2, die ich oben erwähnt habe.
