WebP Bilder in WordPress – unglaubliche Performance

Das WebP Format für Bilder ist eine optimierte Alternative für JPG, PNG und andere Formate und sorgt für deutlich kleinere Dateigrößen, wodurch die Ladezeit deiner Website deutlich verkürzt werden kann.

Damit WordPress WebP Bilder ausliefert, musst du sie in diesem Format zur Verfügung stellen.

Um möglichst wenig Arbeit damit zu haben, zeige ich dir, wie du mit dem kostenlosen Shortpixel Optimizer Plugin alle bestehenden und neuen Bilder in WebP umwandelst und auslieferst.

Was ist WebP und welche Vorteile hat es?

Die kurze Version:

WebP Bilder sind deutlich kleiner, als herkömmliche Bildformate. Dadurch kann deine Website schneller laden, was deine Seitenbesucher freut und ebenfalls Google!

Die (etwas) längere Version:

WebP ist ein Bildformat, wie auch JPG oder PNG. Allerdings ist es deutlich moderner und sorgt durch eine bessere Komprimierung der Bilddatei für kleinere Dateigrößen.

Laut Google (die das WebP Format entwickelt haben) sind Bilder im WebP Format etwa 25-34% kleiner als vergleichbare PNGs & JPGs.

In meinem kleinen Beispiel siehst du einen Vergleich des gleichen Bilds als PNG, JPG & WebP.

Die Dateigrößen sind wie folgt: PNG = 116kb, JPG = 23kb, WebP = 13kb

Das WebP Bildformat ist also auch in meinem Test deutlich kleiner, als JPG & PNG.

WebP vs JPG vs PNG Qualitätsvergleich
Vergleich zwischen PNG, JPG & WebP

Da ein Großteil der Dateigröße von Websites durch Bilder zustande kommt, kannst du mit der Umwandlung deiner Bilder in WebP also definitiv Ladezeit einsparen.

Das Format wird von so ziemlich allen gängigen Browsern unterstützt. Lediglich der Internet Explorer unterstützt sie nicht und Safari nur teilweise:

WebP Browserkompatibilität
Diese Browser unterstützen Bilder im WebP Format laut caniuse.com

Selbst wenn Teile deiner Zielgruppe mit einem Browser ohne WebP Unterstützung arbeitet, ist das kein Problem. In dieser Anleitung zeige ich dir, wie du mit WordPress WebP Bilder zwar auslieferst, aber für solche Browser auch die Originalbilder zur Verfügung stellst.

Für Grafiken wie Logos oder Icons ist übrigens das Dateiformat SVG super geeignet. Alles darüber erfährst du hier: Wie du in WordPress SVG Dateien erlaubst & hochlädst

Möglichkeiten zur Erstellung von WebP Bildern

Egal ob du Photoshop, Affinity Photo oder Canva nutzt, von Haus aus bietet keines der üblichen Bildbearbeitungsprogramme einen Export des Bildes als WebP Datei an.

Trotzdem ist es kein großer Aufwand, WebP in WordPress zu nutzen, da es Tools und WordPress Plugins für diesen Zweck gibt.

Hier sind einige Möglichkeiten, wie du deine Bilder in das WebP Format umwandeln (lassen) kannst:

Ich empfehle den Weg über das ShortPixel Image Optimizer Plugin, worauf die folgende Anleitung auch basiert.

So erstellst du WebP Bilder in WordPress mit 5 Schritten

Bevor du mit dieser Anleitung loslegst, lege ein frisches Backup deiner Website an. Zwar kommt es hier in der Regel nicht zu Problem, aber sicher ist sicher.

Ich empfehle dir in dieser Anleitung das kostenlose Plugin ShortPixel Image Optimizer. Es hilft dir nicht nur bei der Erstellung und Auslieferung der WebP Bilder, sondern ist auch mein Lieblingsplugin zur automatischen Bildoptimierung.

1. Installiere dir ShortPixel Image Optimizer

Shortpixel Image Optimizer Headbild

Zunächst navigierst du unter “Plugins” -> “Plugin installieren” und installierst dir das Plugin “ShortPixel Image Optimizer”.

Nach der Installation musst du einen API-Schlüssel anfordern, indem du deine E-Mail Adresse angibst.

Das ist notwendig, da die Verarbeitung der Bilder nicht auf deinem Server, sondern auf dem von Shortpixel durchgeführt wird.

Shortpixel Image Optimizer API-Schlüssel anfordern

Hat alles geklappt, wirst du direkt auf die Shortpixel Einstellungsseite weitergeleitet und dein API-Schlüssel ist automatisch hinterlegt.

Zudem siehst du oberhalb der Einstellungen eine Erfolgsmeldung.

2. Achte auf deine Credits

Du bekommst jeden Monat 100 Credits von Shortpixel, wenn du es kostenlos nutzt. Damit kannst du 100 Bilder optimieren.

Shortpixel Image Optimizer Credits Übersicht

Wenn du deine Website gerade erst startest, kann das also vollkommen ausreichen.

Hast du eine bestehende Website mit vielen Bildern, die du auch rückwirkend optimieren und in WebP umwandeln möchtest, empfehle ich dir einen einmaligen Kauf von Credits.

Ich selber schnappe mir immer für einmalig 20$ das Paket mit 30.000 Credits. Das Paket findest du hier bei Shortpixel*.

Shortpixel Image Optimizer Preise

Damit kommst du in der Regel eine ganze Weile hin.

Am Black Friday bekommst du zudem für den gleichen Preis noch mehr Credits, es lohnt sich also, hier alle ein oder zwei Jahre aufzuladen!

Alternativ kannst du auch ein Abo abschließend, um monatlich mehr Credits zu erhalten.

3. Hinterlege die richtigen Einstellungen

Du wurdest jetzt direkt in die Einstellungen des Plugins weitergeleitet.

Shortpixel hilft uns nicht nur, die WebP Bilder zu erstellen, sondern auch bestehende und neu hochgeladene Bilder zu optimieren. Darum müssen wir jetzt ein paar Einstellungen vornehmen (keine Sorge, es sind nicht viele):

Allgemein

Im Reiter “Allgemein” kannst du alle Haken so stehen lassen, wie sie von Haus aus sind. Lies dir die Einstellungsmöglichkeiten trotzdem durch und prüfe, ob du von meiner Empfehlung abweichen möchtest.

Du solltest nur auswählen, welche Komprimierungsart genutzt werden soll, “Lossy”, “Glänzend” oder “Verlustfrei”.

Shortpixel Image Optimizer allgemeine Einstellungen

Damit ist gemeint, wie sehr die Qualität deiner Bilder reduziert werden darf. “Lossy” reduziert die Dateigröße am meisten, aber auch die Qualität. “Verlustfrei” reduziert die Dateigröße kaum, dafür bleibt die Bildqualität gleich.

Um den Unterschied herauszufinden, kannst du hier ein Bild hochladen und die gewünschte Komprimierungsart wählen.

Ich nutze auf meinen Websites “Glänzend”.

Erweitert

Im Reiter “Erweitert” gibt es weitere Einstellungen zur Bildoptimierung und auch die Möglichkeit, die Umwandlung in WebP und die Auslieferung der WebP Bilder zu aktivieren.

Bei den ersten vier Einstellungen empfehle ich dir, die Haken bei folgenden Einstellungen zu setzen:

  • Von PNG nach JPEG konvertieren
  • Von CMYK nach RGB konvertieren
  • Next Generation Images
    • Also create WebP versions…
    • Deliver the next generation versions…
    • Using the <PICTURE> tag syntax
    • Without altering the page code (via .htaccess)

Beachte bei “Deliver the next generation versions of the images…” zwei Dinge:

  • Wenn du ein eines der folgenden Caching Plugins nutzt: WP Rocket, WP Cache Enabler oder LightSpeed Cache, dann kannst du die WebP Bilder über diese Plugins ausliefern. Dafür gibt es in den Einstellungen des jeweiligen Plugins eine Option.
  • Sollte die Einstellung “Without altering the page code (via .htaccess) ausgegraut sein, weil deine Website auf einem nginx Server läuft, dann wähle “Using the >PICTURE> tag syntax” und anschließend “global”.
Shortpixel Image Optimizer WebP Einstellungen

Für die weiteren Einstellungsmöglichkeiten ist meine Empfehlung, Haken bei folgenden Einstellungen zu setzen:

  • Retina-Bilder optimieren
  • PDFs optimieren (wenn gewünscht)
  • Medien nach Upload optimieren
  • Verarbeitung im Frontend (wenn du im Frontend Bilder von Nutzern hochladen lässt)
Shortpixel erweiterte Einstellungen

Anschließend kannst du deine Einstellungen speichern und zur Sammelverarbeitung gehen.

4. Starte die Sammelverarbeitung

Du findest die Sammelverarbeitung jederzeit unter “Medien” -> “ShortPixel Sammelverarbeitung”.

Hier kannst du deine bestehenden Medien mit ShortPixel optimieren.

Setze den Haken bei “Also create WebP versions of the images…”, damit für deine bestehenden Bilder in WordPress WebP Versionen erstellt werden und starte die Optimierung über den Button auf der rechten Seite.

Möchtest du zunächst mit deinen 100 kostenlosen Credits arbeiten, kannst du auch den Haken bei “Vorschaubilder einschließen” rausnehmen, und so die kleineren Vorschaubilder nicht optimieren lassen (das kannst du jederzeit nachholen).

Shortpixel Image Optimizer Sammelverarbeitung

Während die Optimierung läuft, lasse den Tab offen.

Nach Abschluss der Sammelverarbeitung kannst du nun prüfen, ob WordPress im Frontend wirklich die WebP Bilder ausliefert.

5. Prüfe, ob WordPress WebP Bilder ausliefert

Um herauszufinden, ob deine Website die WebP Bilder auch wirklich ausliefert, rufe sie in Google Chrome oder Firefox einem inkognito Tab auf (damit du keinerlei Caching oder eine Ansicht für eingeloggte Nutzer hast).

Anschließend machst du einen Rechtsklick auf ein Bild, das als WebP Version ausgeliefert werden sollte und klickst auf “Bild in neuem Tab öffnen”:

Anschließend öffnet sich das Bild in einem neuen Tab und du kannst in der Adresszeile am Ende der URL das Dateiformat erkennen. Steht dort “.webp” wird die WebP Version des Bildes ausgeliefert und alles klappt super:

WebP erkennen in URL des Bildes

Troubleshooting: Gründe, wieso WebP Bilder nicht ausgeliefert werden

Hast du deine Bilder in WebP Versionen umwandeln lassen und merkst bei der Überprüfung, dass die WebP Bilder nicht ausgeliefert werden, kann das folgende Gründe haben:

Deine ShortPixel Einstellungen haben dieses Bild ausgeschlossen

Du könntest bei der Sammelverarbeitung oder in den Einstellungen des ShortPixel Image Optimizer Plugins einen Haken (nicht) gesetzt haben, welcher das geprüfte Bild ausgeschlossen hat.

Beispielsweise kann das passieren, wenn du in der Sammelverarbeitung den Haken bei “Vorschaubilder einschließen” nicht gesetzt hast und jetzt in der Überprüfung ein Vorschaubild prüfst.

Lasse in diesem Fall die Sammelbearbeitung nochmals mit veränderten Einstellungen durchlaufen und prüfe anschließend erneut.

Dein (Server-)Cache wurde nicht geleert oder das Caching Plugin nicht angepasst

Hast du deine Bilder in WebP umgewandelt, solltest du den Servercache leeren. Jedes gute Caching-Plugin bietet dir hierfür eine Möglichkeit.

Nutzt du WP Rocket (meine Empfehlung), WP Cache Enabler oder LiteSpeed Cache, kannst du in den Einstellungen das Ausliefern der WebP Bilder aktivieren und brauchst so in Shortpixel die Einstellung “Deliver the next generation versions…” nicht zu aktivieren.

Hast du bei deinem Test zudem keinen Inkognito Tab genutzt oder vorher deinen Browser-Cache geleert, wird vermutlich noch die zwischengespeicherte Version deiner Website ausgeliefert.

Lösche in diesem Fall deinen Browser-Cache oder nutze einen inkognito Tab.

2 Gedanken zu „WebP Bilder in WordPress – unglaubliche Performance“

    • Moin 🙂

      Optimus ist auch super und ShortPixel sehr ähnlich. Einzig die Auslieferung der WebP Bilder kann es nicht (soweit ich weiß). Hierfür braucht man dann ein weiteres Plugin wie Cache Enabler oder WP Rocket.

      Grüße
      Jonas

      Antworten

Schreibe einen Kommentar

Top

46 Plugins & Tools, dank denen ich 20.000 Besucher monatlich bekomme!

Das WordPress Toolkit kostenlos für dich

Abonniere meine exklusiven WordPress Tipps, News und mein Experten-Wissen, das ich sonst nirgends teile!

 

...und sichere dir das WordPress Toolkit kostenlos!

Nach der Willkommenssequenz (5 Mails) kommen die E-Mails im Normalfall 1x / Woche. Du kannst dich natürlich jederzeit abmelden und bekommst keinen Spam! Datenschutz

46 Plugins & Tools, dank denen ich 20.000 Besucher monatlich bekomme!

Das WordPress Toolkit kostenlos für dich

Abonniere meine exklusiven WordPress Tipps, News und mein Experten-Wissen, das ich sonst nirgends teile!

 

...und sichere dir das WordPress Toolkit kostenlos!

Nach der Willkommenssequenz (5 Mails) kommen die E-Mails im Normalfall 1x / Woche. Du kannst dich natürlich jederzeit abmelden und bekommst keinen Spam! Datenschutz

Consent Management Platform von Real Cookie Banner