PageSpeed Insights zeigt die Empfehlung „Bilder in Formaten der nächsten Generation bereitstellen", doch die Bilder auf Ihrer Site liegen weiterhin als JPEG vor. Alles nach WebP zu konvertieren, ist unkompliziert. Die Herausforderung liegt woanders: Ein kleiner Prozentsatz der Besucher mit älteren Browsern sieht fehlerhafte Bilder, wenn Sie das Format auf dem Server einfach ersetzen.

Die Aufgabe besteht nicht in der Konvertierung, sondern in der selektiven Auslieferung: WebP an diejenigen, die es unterstützen, und das Original an alle anderen. In WordPress wird das auf drei verschiedene Arten gelöst, jeweils für einen bestimmten Stack und ein bestimmtes Budget.

💡 Kurzer Überblick:

• Verstehen, was WebP ist und warum es besser als JPEG ist
• Die beiden Ansätze zur WebP-Auslieferung kennenlernen
• Eine von drei Methoden für Ihren Stack und Ihr Budget wählen
• Das Plugin konfigurieren und das Ergebnis in den Chrome DevTools prüfen

Was WebP ist und warum Sie es brauchen

WebP ist ein Bildformat von Google, das bei gleicher visueller Qualität stärker komprimiert als JPEG und PNG. Ein Bild, das als JPEG 100 KB wiegt, wiegt als WebP 55 bis 75 KB. Keine Zauberei: lediglich ein effizienterer Kompressionsalgorithmus.

Das Format ist nicht neu. Die Spezifikation wurde 2010 von Google veröffentlicht. Seitdem hat sich WebP vom Experiment zum Standard entwickelt: verlustbehaftete und verlustfreie Kompression, Transparenz, Animation. Im Grunde vereint es die Fähigkeiten von JPEG, PNG und GIF in einem Container.

Kurzer Vergleich mit den traditionellen Formaten:

Der Größenunterschied ist spürbar. Bei einer Site mit fünfzig Bildern pro Seite reduziert die Umstellung auf WebP das Gesamtgewicht um ein Vielfaches. Die Auswirkung auf die Core Web Vitals und das Suchranking ist direkt.

Warum Sie WebP nicht einfach überall aktivieren können

Die Antwort liegt in der Kompatibilität. Heute wird WebP von über 96% der Browser unterstützt: Chrome, Firefox, Safari (ab iOS 14), Edge. Es bleibt jedoch ein kleiner Prozentsatz alter Geräte, die das Format nicht verstehen.

Wenn Sie auf dem Server einfach alle JPEGs durch WebP ersetzen, sehen diese wenigen Prozent der Besucher fehlerhafte Bilder. Für eine kommerzielle Site oder einen Onlineshop ist dieser Nutzerverlust nicht akzeptabel.

Die Aufgabe läuft also nicht auf „Bilder konvertieren" hinaus, sondern auf „WebP an diejenigen ausliefern, die es unterstützen, und das Original an alle anderen".

Zwei grundlegende Ansätze zur WebP-Auslieferung

Bevor wir zu den Methoden für WordPress übergehen, lohnt es sich zu verstehen, wie Browser und Server das Format aushandeln. Es gibt nur zwei Mechanismen.

Ansatz 1: -Tag

Dem Browser wird direkt im HTML-Markup eine Wahl zwischen WebP und dem Original angeboten:

1
<picture>
2
  <source srcset="img.webp" type="image/webp">
3
  <source srcset="img.jpg" type="image/jpeg">
4
  <img src="img.jpg" alt="Image description">
5
</picture>

Ein Browser mit WebP-Unterstützung nimmt das erste <source>. Die übrigen ignorieren die WebP-Quelle und laden das JPEG aus <img>.

Vorteil: funktioniert ohne Serverkonfiguration und mit jedem CDN. Nachteil: funktioniert nicht mit Hintergrundbildern in CSS und verändert die HTML-Struktur. Manche Cache- und Lazy-Loading-Plugins stolpern über <picture>.

Ansatz 2: Variierende Antwort

Im HTML steht weiterhin ein normales <img src="img.jpg">, aber der Server liefert für dieselbe URL unterschiedlichen Inhalt aus: eine WebP-Datei an Browser mit WebP-Unterstützung, das Original an alle anderen.

Der Schlüssel zum Mechanismus ist der HTTP-Header Accept. Der Browser sendet ihn bei jeder Anfrage, der Server oder das CDN entscheidet, was zurückgegeben wird.

Vorteil: funktioniert überall, einschließlich Hintergrundbildern in CSS. Das HTML ändert sich nicht. Nachteil: erfordert Serverkonfiguration, und nicht jedes CDN berücksichtigt Accept korrekt im Cache-Schlüssel.

Vergleichen wir:

Sehen wir uns nun an, wie diese Ansätze in WordPress angewendet werden.

Methode 1: CDN mit WebP-Konvertierung in Echtzeit

Der einfachste Weg. Sie binden ein CDN ein, das Bilder in Echtzeit optimiert und WebP an unterstützende Browser ausliefert. Konvertierte Kopien werden nicht auf Ihrem Server gespeichert, was Speicherplatz spart.

Mehrere funktionierende Optionen:

• BunnyCDN mit Bunny Optimizer, komprimiert und konvertiert Bilder on the fly, unterstützt WebP im Cache-Key. Ab 0,01 $/GB.
• Cloudflare mit Polish (Pro-Tarif, 20 $/Monat), automatische Komprimierung und Konvertierung in WebP.
• Cloudinary, ein spezialisierter Dienst für die Arbeit mit Bildern, WebP out of the box.
• ShortPixel Adaptive Images, ein WordPress-Plugin, das das bunny.net CDN nutzt. Konvertiert und liefert WebP automatisch aus. Kostenloses Kontingent: 500 MB Traffic pro Monat.
• WP Compress, ein hybrider Dienst: Bildoptimierung plus Auslieferung über das eigene CDN.

Wann ihr Methode 1 wählen sollten: wenn Sie bereit sind, für ein CDN zu bezahlen, und sich nicht mit der Serverkonfiguration befassen möchten. Angebunden, Optimierung aktiviert, es funktionierte.

Methode 2: Varied Response + CDN

Eine Methode für diejenigen, die die Aufgabe lieber auf Serverebene lösen möchten, ohne das HTML-Markup zu verändern.

Das Prinzip: Sie konfigurieren den Server so, dass er unter einer einzigen URL je nach Accept-Header WebP oder JPEG/PNG ausliefert. Alle Bild-URLs im Code bleiben unverändert.

Einrichtung per WebP Express

Der einfachste Weg, Varied Response in WordPress zu implementieren, ist das Plugin WebP Express. Das Plugin hat über 400.000 aktive Installationen, regelmäßige Updates und einen aktiven Entwickler-Support. Es erledigt drei Dinge:

• Konvertiert hochgeladene Bilder nach WebP.
• Schreibt Weiterleitungsregeln (.htaccess für Apache/LiteSpeed oder Nginx-Regeln).
• Prüft bei einer Bildanfrage den Accept-Header und liefert das benötigte Format aus.

Nach der Installation genügt ein Klick auf „Save settings and force new.htaccess rules". Das Plugin konfiguriert den Konverter und die Regeln selbstständig.

Für Nginx-Server

WebP Express generiert Regeln für .htaccess (Apache/LiteSpeed/OpenLiteSpeed). Wenn Sie Nginx einsetzen, müssen Sie die Regeln manuell in die Konfiguration schreiben:

1
## --- Nginx rules: try WebP first, fallback to converter
2
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
3
  add_header Vary Accept;
4
  expires 365d;
5
  if ($http_accept !~* "webp") {
6
    break;
7
  }
8
  try_files
9
    /wp-content/webp-express/webp-images/doc-root/$uri.webp
10
    $uri.webp
11
    /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=$request_filename&wp-content=wp-content
12
    ;
13
}
14
 
15
## --- Route missing .webp requests to the realizer
16
location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
17
    try_files
18
      $uri
19
      /wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content
20
      ;
21
}
22
## --- End WebP Express rules

Was die Regeln bewirken: Sie setzen den Vary: Accept-Header (damit das CDN WebP nicht für alle zwischenspeichert), versuchen, die fertige .webp-Datei auszuliefern, und leiten die Anfrage an den Konverter weiter, falls sie nicht vorhanden ist.

Entscheidend: Wahl des CDN für Methode 2

Der Fehler, der die gesamte Methode zunichtemacht: Das CDN speichert WebP zwischen und liefert es an Browser ohne Formatunterstützung aus. Das passiert, wenn das CDN den Accept-Header nicht im Cache-Schlüssel berücksichtigt.

Anbieter, die korrekt mit Vary: Accept arbeiten:

Bunny CDN, die Unterstützung für Varied Response wird in den Zoneneinstellungen aktiviert.

• KeyCDN, unterstützt WebP ebenfalls als Teil des Cache-Schlüssels. Wird in den Zoneneinstellungen im Bereich Cache aktiviert.

• Google CDN, berücksichtigt Vary: Accept standardmäßig.

In der kostenlosen Cloudflare-Stufe erfolgt keine vollständige Berücksichtigung von Accept im Cache-Schlüssel. Folge: WebP kann dort ausgeliefert werden, wo es nicht unterstützt wird. Zwei Auswege: Wechsel in die Pro-Stufe (20 $/Monat) oder Nutzung eines CDN, das von Haus aus mit Vary: Accept umgehen kann (BunnyCDN oder KeyCDN).

Kombination WebP Express + CDN bei gängigen Hostern

Das Schema ist für alle gleich: WebP Express installieren, dann je nach Serverumgebung handeln:

• Kinsta / WP Engine, kontaktieren Sie den Support. Die Techniker fügen die Nginx-Konfiguration für WebP Express hinzu und aktivieren den korrekten WebP-Cache-Schlüssel in ihrem CDN (KeyCDN bei Kinsta).
• Cloudways, ein Apache+Nginx-Hybrid. WebP Express mit Speicherung der .htaccess genügt in der Regel. Die Regeln werden automatisch übernommen.
• SiteGround, bitten Sie den Support, Nginx-Regeln hinzuzufügen, und nutzen Sie ein kompatibles CDN.
• LiteSpeed / OpenLiteSpeed / Apache, nur WebP Express und .htaccess-Regeln. Wählen Sie ein CDN mit Vary: Accept-Unterstützung.
• Eigener VPS mit Nginx (LEMP), fügen Sie manuell die obigen Nginx-Regeln hinzu und binden Sie ein CDN mit Vary: Accept-Unterstützung an.

Wann Sie Methode 2 wählen sollten: wenn Sie das HTML-Markup grundsätzlich nicht verändern möchten, Hintergrundbilder in CSS haben und bereit sind, den Server einmalig zu konfigurieren.

Methode 3: per -Tag

Eine Ausweichoption, wenn die ersten beiden nicht passen. Erfordert keine Serverkonfiguration, funktioniert mit jedem CDN. Das Plugin ersetzt standardmäßige <img>-Tags durch ein <picture>-Konstrukt, und der Browser wählt das Format selbst.

Nachteile der Methode:

• Funktioniert nicht mit Hintergrundbildern.
• Kann zu Konflikten mit Themes und Cache-Plugins führen, die die <img>-Ausgabe verändern.
• Ändert die HTML-Struktur, was gelegentlich Lazy-Load-Plugins beeinträchtigt.

Einrichtung per WebP Express

Dasselbe WebP Express kann im <picture>-Modus arbeiten. Wählen Sie in den Einstellungen den Modus „CDN friendly" und aktivieren Sie die Option „Alter HTML". Das Plugin umschließt dann zur Laufzeit alle <img> in <picture> mit einer WebP-Quelle.

Wann Sie Methode 3 wählen sollten: wenn kein Zugriff auf die Serverkonfiguration besteht und das CDN Vary: Accept nicht unterstützt. Zum Beispiel bei günstigem Hosting mit strikten Einschränkungen oder dem kostenlosen Cloudflare.

Video: WebP in WordPress in 10 Minuten

Wenn Sie lieber zuschauen als lesen, finden Sie hier eine visuelle Anleitung zur Einrichtung von WebP per WebP Express:

Das Video zeigt die vollständige WebP-Express-Einrichtung von der Installation bis zur Überprüfung in den Chrome DevTools. Auch die Konvertierung zu AVIF als nächster Schritt nach WebP wird angesprochen.

⁉️🤔 Häufig gestellte Fragen

Bringt WebP immer eine Größenreduktion?

Nicht immer, aber in den meisten Fällen. Bei Fotos und Screenshots liegen die Einsparungen laut Google-Entwicklern bei 25-50%. Bei Bildern mit Text oder flächigen Farben kann WebP sogar größer sein als PNG-8. Für Content-Bilder bringt WebP fast immer einen Gewinn. Für Icons und einfache Grafiken sind SVG oder optimiertes PNG die bessere Wahl. Plugins wie WebP Express konvertieren alles, das Ergebnis hängt vom Ausgangsformat ab.

Kann man WebP ohne Plugins in WordPress nutzen?

Ab WordPress 5.8 ja. Der Core akzeptiert .webp-Dateien beim Hochladen in die Medienbibliothek. Es gibt jedoch keine automatische Konvertierung alter Bilder und keinen Format-Austausch für den Browser. Wenn Sie nur neue Bilder in WebP hochladen und das Fehlen eines Fallbacks für einen kleinen Prozentsatz alter Browser für Sie akzeptabel ist, sind Plugins nicht zwingend erforderlich. Für eine vollständige Umsetzung auf einer bestehenden Website kommen Sie ohne Plugin nicht aus: Sie benötigen eine Stapelkonvertierung und einen Mechanismus zum Formataustausch.

Wie prüft man, ob WebP korrekt ausgeliefert wird?

Öffnen Sie die Seite in Chrome, drücken Sie F12, Tab „Netzwerk", filtern Sie nach Img. In der Spalte „Typ" sollte webp stehen. Alternativ: Suchen Sie in der Serverantwort nach dem Header X-WebP-Express (bei Nutzung von WebP Express) oder content-type: image/webp. Chrome DevTools ist der zuverlässigste Weg: Nach Bildern filtern und auf die Spalte „Typ" schauen. Steht dort webp, funktioniert alles.

Was tun, wenn das CDN WebP falsch zwischenspeichert?

Symptom: Einige Nutzer sehen defekte Bilder, obwohl in den Einstellungen alles aktiviert ist. Abhilfe: Stellen Sie sicher, dass das CDN die Header Accept und Vary im Cache-Schlüssel berücksichtigt. In den Panels von BunnyCDN und KeyCDN gibt es dafür explizite Schalter. Fehlt Accept im Cache-Schlüssel, erzeugt die erste Anfrage von Chrome eine WebP-Kopie, und alle nachfolgenden Nutzer, inklusive Safari ohne WebP, erhalten genau diese Kopie. Bei Cloudflare gibt es keine kostenlose Lösung, entweder Pro oder CDN wechseln.

WebP oder AVIF, was wählt man 2026?

AVIF bietet eine noch bessere Kompression (20-30% kleiner als WebP bei gleicher Qualität), aber die Browserunterstützung hinkt noch hinterher: rund 92% gegenüber 96% für WebP. 2026 bleibt WebP der De-facto-Standard für das Web. AVIF holt auf, aber die Lücke bei der Browserunterstützung ist für kommerzielle Projekte nach wie vor kritisch. Eine pragmatische Strategie: Jetzt WebP, AVIF, sobald die Unterstützung 95% übersteigt.

Welche Methode für Ihre Aufgabe: die abschließende Übersicht

Die Wahl der Methode hängt nicht davon ab, welche „allgemein besser" ist, sondern von Ihrem konkreten Stack und Ihrer Bereitschaft, Zeit oder Geld zu investieren:

• Bereit, für ein CDN zu zahlen und den Server nicht anzufassen, Methode 1 mit BunnyCDN (ab 0,01 $/GB) oder Cloudflare Pro (20 $/Monat). In fünf Minuten einrichten und vergessen.
• Serverzugriff vorhanden und die Sache einmalig lösen wollen, Methode 2 mit WebP Express und einem CDN, das Vary: Accept unterstützt. Funktioniert mit Hintergrundbildern, fasst kein HTML an.
• Kein Serverzugriff und begrenztes Budget, Methode 3 mit WebP Express im <picture>-Modus. Nicht ideal, aber besser als gar kein WebP.

Testen Sie die gewählte Methode auf einer Staging-Umgebung. Prüfen Sie die Response-Header und die Spalte „Typ" in Chrome DevTools. Stellen Sie sicher, dass alte Browser JPEG erhalten und keine defekten Links. Und erst dann auf Produktion ausrollen.

Probieren Sie WebP Express aus, das Plugin deckt beide Server-Methoden out of the box ab und ist kostenlos. Schreiben Sie in die Kommentare, für welchen Ansatz Sie sich entschieden haben und auf welche Fallstricke Sie gestoßen sind.