Wenn du deine WordPress-Seite beschleunigen willst, bietet die Verringerung der Dateigröße deiner Bilder eine erhebliche Rendite für deine Investition. Im Durchschnitt machen Bilder etwa die Hälfte der Dateigröße einer Webseite aus, also können selbst kleine Verbesserungen enorme Ergebnisse bringen. WebP kann dir dabei immens helfen!

WebP ist ein modernes Bildformat, das dir helfen kann, die Größe deiner Bilder zu reduzieren, ohne ihr Aussehen zu verändern. Wenn du lernst, wie man ein Bild in WebP konvertiert, kann die Dateigröße im Durchschnitt um ~25-35% schrumpfen; ohne erkennbaren Qualitätsverlust.

Die meisten modernen Browser und WordPress 5.8+ unterstützen WebP von Haus aus. In diesem Artikel werden wir tief in dieses aufregende neue Bildformat eintauchen und dir zeigen, wie du seine Vorzüge nutzen kannst.

Bist du bereit? Dann lass uns loslegen!

Was ist WebP?

Also, was ist eine WebP Datei? Kurz gesagt ist WebP ein Bildformat, das von Google entwickelt wurde, um Bilder besser zu optimieren als gängige Bildformate (zu dieser Zeit). Du hast zum Beispiel Bildformate wie JPEG oder JPG und PNG.

Hinweis: Sieh dir an, wie sich unterschiedliche Bilddateitypen auf die Geschwindigkeit deiner Webseite auswirken können.

WebP konzentriert sich darauf, die gleiche Bilddatei zu liefern, nur mit kleineren Dateigrößen. Indem du die Größe deiner Bilddateien reduzierst, kannst du den Besuchern deiner Webseite immer noch das gleiche Erlebnis bieten, aber deine Webseite wird schneller geladen.

In Googles WebP-Kompressionsstudie hat Google zum Beispiel herausgefunden, dass eine WebP-Bilddatei im Durchschnitt:

Das ist der Grund, warum du deine Webseite durch PageSpeed Insights laufen lässt und eine der vielen Empfehlungen ist, Bilder in Next-Gen-Formaten wie WebP zu verwenden:

Google PageSpeed Insights empfiehlt die Verwendung von WebP-Bildern

Google PageSpeed Insights empfiehlt die Verwendung von WebP-Bildern

Wie erreicht das WebP-Format von Google diese Verringerung der Dateigröße?

Erstens unterstützt es verlustbehaftete und verlustfreie Komprimierung. Die genaue Reduzierung hängt also davon ab, ob du verlustbehaftete oder verlustfreie Komprimierung verwendest.

Bei der verlustbehafteten Komprimierung verwendet WebP eine sogenannte „prädiktive Kodierung“, um die Dateigröße zu verringern. Predictive Coding nutzt die Werte von benachbarten Pixeln in einem Bild, um Werte vorherzusagen und kodiert dann nur die Differenz. Es basiert auf dem VP8 Key Frame Encoding.

Lossless WebP verwendet eine viel kompliziertere Reihe von Methoden, die vom WebP Team entwickelt wurden.

Wenn du die WebP-Kompressionsverfahren im Detail kennenlernen möchtest, ist dieser Artikel ein guter Ausgangspunkt.

Welche Webbrowser unterstützen WebP?

Damit WebP-Bilder funktionieren, muss der Webbrowser des Besuchers sie unterstützen. Leider ist die WebP-Kompatibilität immer noch nicht überall gegeben, obwohl die Browserunterstützung stark gewachsen ist.

WebP-Bilder werden von gängigen Browsern unterstützt, wie z.B.:

Zu dem Zeitpunkt, zu dem wir diesen Beitrag schreiben, unterstützt Safari WebP-Bilder nur teilweise.

Dem Internet Explorer fehlt ebenfalls die WebP-Unterstützung (aber Edge unterstützt WebP, da es auf Chromium basiert). Allerdings ist die Nutzung des IE auf weniger als 1% der gesamten Internetnutzer geschrumpft. Das ist ein Segen für alle im Web!

Insgesamt nutzen etwa 95% der Internetnutzer einen Browser, der WebP unterstützt. Während es also sicherlich eine mehrheitliche Unterstützung hat, sind diese 5% eine kleine Hürde, vor allem wenn es sich um Safari-Nutzer auf älteren macOS-Versionen handelt. In unserem WordPress WebP-Tutorial zeigen wir dir, wie du damit umgehst, damit alle deine Besucher ein tolles Erlebnis haben.

WebP-Unterstützung in allen gängigen Browsern.

WebP-Unterstützung in allen gängigen Browsern.

Größenvergleich zwischen WebP vs JPG vs PNG

Laut Googles Tests sind WebP-Bilder:

Wenn du mehr über Googles Methodik erfahren möchtest, findest du unten direkte Links zu den vollständigen Ergebnissen:

Beide Tests basieren auf über 11.000 Bildern, darunter:

Wie man WebP-Bilder in WordPress verwendet

Beginnend mit WordPress 5.8, kannst du das WebP-Bildformat auf die gleiche Weise wie JPEG, PNG und GIF verwenden. Lade deine Bilder einfach in deine Mediathek hoch und füge sie in deinen Inhalt ein. Da WordPress 5.8+ das WebP-Format standardmäßig unterstützt, musst du keine Drittanbieter-Plugins installieren, um WebP-Bilder hochzuladen. Das sollte für die meisten gängigen Anwendungsfälle ausreichen.

Um sofort loszulegen, kannst du dir unsere Kurzanleitung zur Verwendung von WebP-Bildern in WordPress 5.8+ ansehen. Wir empfehlen dir, die Vorbehalte gegen die WebP-Unterstützung in WordPress durchzugehen.

Etwa 5% der Nutzer (hauptsächlich Safari-Nutzer auf älteren macOS-Systemen) verwenden jedoch einen Webbrowser, der WebP nicht unterstützt. Wenn du WebP-Bilder konvertierst und sie direkt in deinem Content verwendest, können diese Besucher deine Bilder nicht sehen, was ihr Browsing-Erlebnis ruinieren würde.

Außerdem ist die Erstellung von WebP-Bildern nicht so einfach wie die eines JPG/JPEG-Bildes, welches das Standard-Bildformat der meisten Kameras, Smartphones und Online-Bildbibliotheken ist. WordPress unterstützt (noch!) keine automatische Conversion von Bildern in das WebP-Format.

Mach dir keine Sorgen! Es gibt eine Lösung.

Du kannst ein WordPress-Plugin verwenden, das deine Originalbilder in das WebP-Format konvertiert und außerdem das Originalbild als Fallback bereitstellt, wenn der Browser eines Besuchers WebP nicht unterstützt.

Wenn du zum Beispiel eine JPEG-Datei auf deine Webseite hochlädst, wird das Plugin:

Auf diese Weise kann jeder dein Bild sehen, und jeder bekommt die schnellstmögliche Erfahrung.

Im Folgenden stellen wir dir einige der besten WebP-Plugins für WordPress vor, die alle mit Kinsta und dem Kinsta CDN funktionieren.

Info

Wenn du bei Kinsta hostest, musst du dich mit unserem Support in Verbindung setzen, damit wir eine Nginx-Regel für WebP-Cache-Buckets für einige dieser Plugins erstellen können.

ShortPixel

ShortPixel WordPress Plugin

ShortPixel WordPress Plugin

ShortPixel ist ein beliebtes WordPress Plugin zur Bildoptimierung, das dir helfen kann, die Größe der Bilder, die du auf deine Webseite hochlädst, automatisch zu ändern und zu komprimieren.

Als Teil der Feature-Liste kann ShortPixel dir auch dabei helfen, Bilder automatisch in WebP zu konvertieren und diese Bilder an Browser zu senden, die dies unterstützen.

ShortPixel hat einen begrenzten kostenlosen Plan, mit dem du ~100 Bilder pro Monat kostenlos optimieren kannst. Bezahlte Pläne beginnen bei $4,99 pro Monat für bis zu 5.000 Bilder/Credits oder $9,99 einmalig für ein Paket von 10.000 Credits.

ShortPixel zählt jede WordPress Bildgröße, die du optimierst, als einen Credit. Wenn du also mehrere Thumbnail-Größen optimieren willst, kann ein Bild durchaus mehrere Credits verbrauchen. Es gibt keine Dateigrößenbegrenzung für Bilder.

Du kannst deine ShortPixel-Credits auf beliebig viele Webseiten verteilen – es gibt keine Beschränkungen pro Webseite (und alle deine Webseiten können denselben ShortPixel-Account nutzen).

Um ShortPixel für die Bereitstellung von WebP-Bildern in WordPress zu nutzen, musst du das Plugin von WordPress.org installieren und deinen API-Schlüssel hinzufügen (den du erhältst, wenn du dich für ein kostenloses ShortPixel-Konto registrierst).

Im Reiter Allgemein kannst du grundlegende Einstellungen vornehmen, wie die Bildoptimierung funktioniert. Zum Beispiel, welche Komprimierungsstufe verwendet werden soll und ob die Größe der Bilder angepasst werden soll oder nicht:

Wie man das Komprimierungslevel und die Bildgröße in ShortPixel einstellt

Wie man das Komprimierungslevel und die Bildgröße in ShortPixel einstellt

Um WebP-Bilder zu aktivieren, gehe auf den Reiter Erweitert und:

  1. Markiere das Kästchen für WebP-Bilder
  2. Markiere das Kästchen für Deliver the WebP versions… (dies erscheint, nachdem du das erste Kästchen markiert hast)
  3. Aktiviere das Kontrollkästchen für Using the <PICTURE> tag syntax (dies erscheint, nachdem du das vorherige Kästchen markiert hast)
  4. Belasse die Standardauswahl Only via WordPress hooks
Wie man WordPress WebP Bilder in ShortPixel aktiviert

Wie man WordPress WebP Bilder in ShortPixel aktiviert

Dann speichere deine Änderungen.

Wenn du bei Kinsta hostest, wird ShortPixel dir eine Warnmeldung über die Konfiguration der Serverkonfigurationsdateien auf Nginx geben. Um diese Einstellungen zu konfigurieren, kannst du dich an den Kinsta-Support wenden, und wir werden die Serverkonfiguration gerne für dich einrichten.

Imagify

Imagify WordPress Plugin

Imagify WordPress Plugin

Imagify ist ein beliebtes Plugin zur Bildoptimierung vom gleichen Entwickler wie WP Rocket (eins der wenigen Caching-Plugins, die mit Kinsta funktionieren).

Es kann die Bilder, die du auf deine WordPress-Seite hochlädst, automatisch komprimieren und in der Größe anpassen. Dann kann es dir auch helfen, sie in WebP zu konvertieren und diese Versionen den Besuchern mit Browsern, die dies unterstützen, zur Verfügung zu stellen.

Bist du es leid, einen langsamen Host für deine WordPress-Seite zu haben? Wir bieten blitzschnelle Server und 24/7 Weltklasse-Support von WordPress-Experten.
Schau dir unsere Pläne an

Was die Funktionen angeht, haben ShortPixel und Imagify viele Gemeinsamkeiten. Der größte Unterschied liegt in der Preisgestaltung. Während ShortPixel auf Basis der Bilder abrechnet, ohne Größenbeschränkung pro Bild, rechnet Imagify auf Basis der gesamten Dateigröße ab, ohne Bildbeschränkung.

Wenn du also viele große Bilder optimieren musst, ist der Ansatz von ShortPixel vielleicht günstiger. Aber wenn du viele kleine Bilder optimieren musst, ist Imagify vielleicht erschwinglicher.

Imagify hat eine begrenzte kostenlose Version, die 25 MB an Optimierungen pro Monat erlaubt. Danach beginnen die kostenpflichtigen Pläne bei $4,99 pro Monat für bis zu 1 GB oder $9,99 für ein einmaliges Guthaben von 1 GB.

Wie bei ShortPixel kannst du dein Kontolimit auf unbegrenzte Webseiten verteilen.

Um Imagify für die Bereitstellung von WordPress WebP-Bildern zu nutzen, musst du das Plugin von WordPress.org installieren und deinen API-Schlüssel hinzufügen, um loszulegen.

Sobald du das Plugin aktiviert hast, kannst du in den allgemeinen Einstellungen deine Komprimierungsstufe wählen.

So stellst du die Kompressionsstufe in Imagify ein

So stellst du die Kompressionsstufe in Imagify ein

Um WebP-Bilder zu aktivieren, scrolle runter zum Abschnitt Optimierung und gehe zum Abschnitt WebP-Format:

  1. Aktiviere das Kästchen, um Webp-Versionen von Bildern zu erstellen.
  2. Aktiviere das Kästchen, um Bilder im WebP-Format anzuzeigen…
  3. Wähle den Radiobutton, um<picture> Tags zu verwenden
  4. Wenn du bei Kinsta hostest und das Kinsta CDN verwendest, gib die URL deines Kinsta CDN (einschließlich https://) in das Feld Wenn du ein CDN verwendest ein (wir sagen dir weiter unten, wie du die Kinsta CDN URL findest)
Wie man WordPress WebP Bilder in Imagify aktiviert

Wie man WordPress WebP Bilder in Imagify aktiviert

Wenn du das Kinsta CDN verwendest, kannst du deine CDN-URL finden, indem du deine Webseite im MyKinsta-Dashboard öffnest und den Reiter Kinsta CDN in den Einstellungen der Webseite besuchst:

Wie man die Kinsta CDN URL findet

Wie man die Kinsta CDN URL findet

Wenn du bei Kinsta hostest, musst du wie bei ShortPixel eine Nginx-Regel für WebP-Cache-Buckets erstellen (wende dich an den Kinsta-Support).

Optimole

Optimole WordPress Plugin

Optimole WordPress Plugin

Optimole ist ein WordPress Plugin zur Bildoptimierung, das ein wenig anders funktioniert als Imagify und ShortPixel. Optimole kann deine Bilder automatisch komprimieren und die Größe ändern. Allerdings hat es auch zwei andere bemerkenswerte Funktionen:

  1. Es kann deine Bilder über sein CDN (powered by Amazon CloudFront) bereitstellen.
  2. Es bietet adaptive Bilder in Echtzeit, wobei Optimole für jeden Besucher das Bild in der optimalen Größe ausliefert. Zum Beispiel wird jemand, der auf einem kleinen Bildschirm surft, ein niedriger aufgelöstes Bild erhalten als jemand, der auf einem Retina-Bildschirm surft.

Dieser Ansatz ist vergleichbar mit anderen Echtzeit-Optimierungs-/Bearbeitungsdiensten wie Cloudinary, imgix, KeyCDN Image Processing, etc.

Optimole kann auch WebP-Bilder an Besucher mit Browsern ausliefern, die dies als Teil dieser Echtzeit-Bildoptimierung unterstützen.

Optimole hat einen begrenzt kostenlosen Plan, der die Auslieferung von Bildern an ca. 5.000 Besucher pro Monat ermöglicht. Danach beginnen die kostenpflichtigen Pläne bei $19 pro Monat für ~25.000 Besucher.

Um loszulegen, musst du das Plugin von WordPress.org installieren und es mit einem API-Schlüssel aktivieren (den du bekommst, wenn du dich für einen kostenlosen Optimole-Account registrierst).

Sobald du das getan hast, wird Optimole automatisch deine Bilder optimieren und sie über das CDN ausliefern. Die WebP-Unterstützung ist standardmäßig aktiviert, du musst sie also nicht manuell einschalten.

Um andere Einstellungen zu konfigurieren, wie z.B. Kompressionsstufen und Skalierungsverhalten, kannst du zu Medien → Optimole → Einstellungen gehen:

Optimole aktiviert standardmäßig WordPress WebP-Bilder.

Optimole aktiviert standardmäßig WordPress WebP-Bilder.

Da Optimole die Auslieferung deiner Bilder über sein CDN abwickelt, musst du keine Nginx-Regeln einrichten, wenn du bei Kinsta hostest.

Erhöhe ⬆️ die Geschwindigkeit deiner Webseite ⬇️ und verringere die Größe deiner Bilder. Lerne, wie du die Vorteile des WebP-Formats auf deiner #WordPress-Seite nutzen kannst 💥Click to Tweet

Zusammenfassung

Die Bilder deiner WordPress-Seite machen einen großen Teil der Dateigröße einer durchschnittlichen Seite aus. Wenn du Wege findest, die Größe deiner Bilder zu reduzieren, kannst du deine Webseite beschleunigen, ohne das Nutzererlebnis zu beeinträchtigen. WebP ist ein modernes Bildformat, das genau das tut, indem es eine ~25%ige Reduzierung der Dateigröße gegenüber vergleichbaren JPEG oder PNG Dateien bietet.

Rund 95% der Internetnutzer verwenden bereits einen Browser, der WebP unterstützt. Auch WordPress 5.8+ Versionen unterstützen WebP nun von Haus aus. Es gibt also keinen Grund, warum du es nicht nutzen solltest.

Eine Minderheit von Browsern, vor allem Safari auf älteren macOS-Versionen, bietet jedoch immer noch keine WebP-Unterstützung. Daher kannst du WebP-Bilder noch nicht allen Besuchern anbieten. Um dieses Problem zu lösen, kannst du ein WordPress-Plugin verwenden, das Bilder in WebP konvertiert und WebP-Versionen an Besucher ausliefert, deren Browser dies unterstützen, während du die Originalbilder für Besucher verwendest, deren Browser dies nicht unterstützen.

Für weitere Taktiken zur Optimierung von Bildern, schau dir unseren vollständigen Leitfaden zur Optimierung von Bildern für die Web-Performance an.

Wenn du Fragen zur Verwendung von WebP in WordPress hast, frag uns bitte in den Kommentaren unten!


Spare Zeit, Kosten und maximiere die Leistung deiner Seite mit:

  • Schnelle Hilfe von WordPress Hosting Experten, 24/7.
  • Cloudflare Enterprise Integration.
  • Globale Reichweite mit 28 Rechenzentren weltweit.
  • Optimierung mit unserem integrierten Application Performance Monitoring.

All das und noch viel mehr, in einem Plan ohne langfristige Verträge, betreute Migrationen und eine 30-Tage-Geld-zurück-Garantie. Schau Dir hier unsere Pakete an oder sprich mit dem Vertrieb, um den richtigen Tarif für dich zu finden.