Bei WPBeginner bewerten wir ständig neue Technologien, die WordPress-Benutzern helfen können, schnellere und besser funktionierende Websites zu erstellen. WebP-Bilder sind uns schon seit einiger Zeit ein Begriff, und obwohl wir sie noch nicht auf unserer eigenen Website implementiert haben, sind wir uns des Potenzials des Formats bewusst.
Was WebP interessant macht, ist seine Fähigkeit, die Dateigrößen von Bildern um bis zu 35 % zu reduzieren, ohne dass es zu einem spürbaren Qualitätsverlust kommt. Wir haben gesehen, dass Websites, die WebP verwenden, aussagekräftige Verbesserungen bei der Ladegeschwindigkeit und im Nutzerengagement erzielen.
Basierend auf unseren Forschungs- und Testprozessen zeigen wir Ihnen, wie Sie WebP-Bilder in WordPress verwenden, um von den Geschwindigkeitsvorteilen dieses modernen Bildformats zu profitieren.
Was ist WebP?
WebP ist ein modernes Bildformat, das von Google speziell für die Webnutzung entwickelt wurde. Was es besonders macht, ist seine überlegene Komprimierungstechnologie. WebP-Bilder sind typischerweise 25-35 % kleiner als JPEG- und PNG-Dateien, während sie eine identische visuelle Qualität beibehalten.
Um dies zu verdeutlichen: Wenn Ihr aktuelles PNG-Bild 100 KB groß ist, wäre dasselbe Bild im WebP-Format etwa 65-75 KB groß, ohne sichtbaren Qualitätsunterschied. Diese Größenreduzierung führt direkt zu schnelleren Ladezeiten von Seiten und einer besseren Benutzererfahrung.
Das Format unterstützt sowohl verlustbehaftete als auch verlustfreie Komprimierung sowie Funktionen wie Transparenz und Animation, was es zu einem vielseitigen Ersatz für mehrere traditionelle Formate macht.
Sie können sich in unserem Leitfaden unter Optimieren von Bildern für das Web über Bildkomprimierung informieren.
Browser-Unterstützung: Ist WebP bereit für Ihre Website?
Derzeit erfreut sich WebP einer starken Browserunterstützung mit über 95 % globaler Abdeckung. Alle wichtigen Browser, einschließlich Chrome, Firefox, Safari (seit iOS 14) und Edge, unterstützen WebP-Bilder vollständig.
Die verbleibenden 5 % bestehen hauptsächlich aus älteren Browserversionen, deren Nutzung rapide abnimmt.
Sollten Sie WebP-Bilder in WordPress verwenden?
Für die meisten WordPress-Sites lautet die Antwort ja. Die Implementierung von WebP kann Ihre WordPress-Website erheblich beschleunigen und funktioniert perfekt neben anderen Leistungsoptimierungen wie Caching-Plugins und CDNs.
Seit WordPress 5.8 hat die Plattform native WebP-Unterstützung, was bedeutet, dass Sie WebP-Bilder direkt ohne Plugins hochladen und verwenden können. Diese grundlegende Unterstützung beinhaltet jedoch keine automatische Konvertierung oder Fallback-Optionen.
Für beste Ergebnisse empfehlen wir die Verwendung eines speziellen Plugins zur Bildoptimierung. Diese Plugins konvertieren Ihre vorhandenen Bilder automatisch in das WebP-Format und liefern traditionelle JPEG- oder PNG-Versionen für den kleinen Prozentsatz von Benutzern mit nicht unterstützten Browsern.
WebP ist besonders vorteilhaft, wenn Ihre Website viele Bilder enthält (wie Fotografie-Blogs, E-Commerce-Shops oder Portfolios) oder wenn Ihr WordPress-Blog derzeit aufgrund großer Bilder mit langsamen Ladezeiten zu kämpfen hat.
Hier erfahren Sie, wie Sie WebP-Bilder in WordPress verwenden. Wir zeigen Ihnen mehrere Methoden, damit Sie diejenige auswählen können, die am besten für Sie geeignet ist:
- WebP-Bilder in WordPress mit EWWW Optimizer verwenden
- WebP-Bilder in WordPress mit Imagify verwenden
- WebP-Bilder in WordPress mit SG Optimizer verwenden
- Expertenanleitungen zur Verwendung von Bildern in WordPress
Video-Tutorial
Wenn Sie schriftliche Anleitungen bevorzugen, lesen Sie einfach weiter.
Methode 1: WebP-Bilder in WordPress mit EWWW Optimizer verwenden
EWWW Image Optimizer ist eines der besten WordPress-Plugins zur Bildkomprimierung, mit dem Sie Ihre WordPress-Bilder optimieren können. Es unterstützt auch WebP-Bilder und kann diese automatisch in unterstützten Browsern anzeigen. Lesen Sie unseren EWWW Image Optimizer Testbericht für weitere Details.
Das erste, was Sie tun müssen, ist, das Plugin EWWW Image Optimizer zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung, wie man ein WordPress-Plugin installiert.
Gehen Sie nach der Aktivierung zur Seite Einstellungen » EWWW Image Optimizer, um die Plugin-Optionen zu konfigurieren. Sie werden von einem Einrichtungsassistenten begrüßt, aber Sie können auf den Link „Ich weiß, was ich tue“ klicken, um den Assistenten zu verlassen.
Auf dem nächsten Bildschirm sehen Sie eine Reihe von Plugin-Optionen.
Scrollen Sie nach unten und aktivieren Sie das Kontrollkästchen neben der Option „WebP-Konvertierung“.
Klicken Sie danach auf die Schaltfläche „Änderungen speichern“, um Ihre Einstellungen zu speichern.
Als Nächstes müssen Sie zum Abschnitt WebP-Konvertierung scrollen. Das Plugin zeigt Ihnen nun einige Rewrite Rules mit einem roten Vorschaubild an.
Sie müssen auf die Schaltfläche „Rewrite Rules einfügen“ klicken, und das Plugin versucht automatisch, diese Rewrite Rules in Ihre .htaccess-Datei einzufügen.
Wenn das Plugin erfolgreich diese Regeln hinzufügt, wird die rote Bildvorschau grün mit dem Text „WebP“.
Manchmal kann das Plugin die Regeln nicht einfügen. In diesem Fall müssen Sie die Rewrite-Regeln von der Einstellungsseite des Plugins kopieren und manuell am Ende Ihrer .htaccess-Datei einfügen.
Sobald Sie fertig sind, kehren Sie zur Einstellungsseite des Plugins zurück und klicken Sie erneut auf die Schaltfläche „Änderungen speichern“. Wenn das Vorschaubild grün wird, bedeutet dies, dass Sie die WebP-Bildauslieferung auf Ihrer WordPress-Website erfolgreich aktiviert haben.
Alternativ können Sie zwischen den Methoden JS WebP Rewriting oder WebP Rewriting als Ihre WebP-Bereitstellungsoptionen wählen. Diese sind etwas langsamer als die .htaccess-Methode, aber sie erledigen die Aufgabe.
Konvertieren Sie Ihre alten Bilder stapelweise in WebP-Versionen
EWWW Image Optimizer ermöglicht es Ihnen, Ihre zuvor hochgeladenen Bilddateien einfach in WebP-Bilder zu konvertieren. Gehen Sie einfach zur Seite Mediathek und wechseln Sie zur Listenansicht.
Als Nächstes müssen Sie auf die Schaltfläche „Bildschirmoptionen“ klicken und „Anzahl der Elemente pro Seite“ auf 999 ändern. Wenn Sie 1000+ Bilder haben, werden diese Bilder auf der nächsten Seite angezeigt.
Auf diese Weise können Sie schnell eine große Anzahl von Bildern für die Stapeloptimierung auswählen. Klicken Sie dann auf das Kontrollkästchen „Alle auswählen“ oben, um alle Bilder auszuwählen.
Klicken Sie danach auf das Dropdown-Menü „Massenaktionen“ und wählen Sie die Option „Massenoptimierung“. Klicken Sie schließlich auf die Schaltfläche „Anwenden“.
Auf dem nächsten Bildschirm bietet Ihnen das Plugin die Option, die Bildkomprimierung zu überspringen und sie nur in WebP zu konvertieren. Sie können diese Option aktivieren, wenn Ihre Bilder bereits optimiert sind.
Klicken Sie danach auf die Schaltfläche 'Nach nicht optimierten Bildern suchen', um fortzufahren. Das Plugin zeigt Ihnen dann die Anzahl der gefundenen Bilder an, sodass Sie auf die Schaltfläche 'Optimieren' klicken können, um fortzufahren.
Ihre Bilder werden nun optimiert und EWWW Optimizer generiert WebP-Versionen für Ihre Bilder.
Testen Ihrer WebP-Bildauslieferung
Sobald Sie Ihre Bilder optimiert haben, können Sie zu einem Blogbeitrag mit mehreren Bildern gehen.
Bewegen Sie die Maus über ein beliebiges Bild und klicken Sie mit der rechten Maustaste, um das Bild in einem neuen Tab zu öffnen.
Dies öffnet das Bild in einem neuen Browser-Tab.
Sie können sehen, dass es in der Adressleiste eine .webp-Erweiterung hat.
Wenn das Plugin das WebP-Bild nicht ausliefern kann, können Sie zu den Einstellungen des Plugins zurückkehren. Von hier aus können Sie die WebP-Auslieferungsoption auf die Methoden 'JS WebP Rewriting' oder 'WebP Rewriting' ändern.
Methode 2: WebP-Bilder in WordPress mit Imagify verwenden
Imagify ist ein WordPress-Bildoptimierungs-Plugin, das von den Machern von WP Rocket, dem besten WordPress-Caching-Plugin, entwickelt wurde. Es ermöglicht Ihnen, Bilder einfach zu optimieren und in das WebP-Bildformat zu konvertieren. Lesen Sie unseren Imagify-Testbericht, um mehr zu erfahren.
Das erste, was Sie tun müssen, ist, das Imagify Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Nach der Aktivierung müssen Sie die Seite Einstellungen » Imagify besuchen, um die Plugin-Einstellungen zu konfigurieren. Klicken Sie von hier aus auf die Schaltfläche 'Kostenlosen API-Schlüssel erstellen', um fortzufahren.
Sie werden aufgefordert, eine geschäftliche E-Mail-Adresse einzugeben. Danach können Sie Ihren Posteingang auf eine E-Mail mit Ihrem API-Schlüssel überprüfen. Kopieren Sie den Schlüssel und fügen Sie ihn auf der Einstellungsseite des Plugins ein und klicken Sie auf die Schaltfläche „Änderungen speichern“.
Als Nächstes müssen Sie zum Abschnitt Optimierung scrollen. Dort müssen Sie die Optionen neben „WebP-Versionen von Bildern erstellen“ und „Bilder im WebP-Format auf der Website anzeigen“ aktivieren.
Darunter können Sie aus zwei Bereitstellungsmethoden wählen, um WebP-Bilder in WordPress anzuzeigen. Die erste ist die .htaccess-Methode und die zweite ist die Verwendung eines Tags.
Die .htaccess-Methode ist schneller, funktioniert aber nicht, wenn Sie einen CDN-Dienst verwenden. Die Tag-Methode funktioniert auch mit CDNs, kann aber einige WordPress-Themes beschädigen.
Sie können eine der beiden Optionen wählen, die gut für Ihre Website funktioniert. Klicken Sie danach unten auf die Schaltfläche 'Speichern & zum Bulk-Optimierer gehen'.
Dies bringt Sie zur Seite Medien » Massenoptimierung.
Das Plugin beginnt automatisch damit, alle Ihre WordPress-Bilder im Hintergrund zu optimieren.
Wenn Sie viele Bilder haben, kann dies eine Weile dauern. Machen Sie sich keine Sorgen, Sie können die Seite schließen und später zurückkehren, da das Schließen der Seite den Bildoptimierungsprozess nicht stoppt.
Testen Ihrer WebP-Bilder in WordPress
Sobald die Optimierung abgeschlossen ist, können Sie eine Seite oder einen Beitrag mit einigen Bildern besuchen. Fahren Sie mit der Maus über ein Bild und klicken Sie dann mit der rechten Maustaste, um 'Bild in neuem Tab öffnen' auszuwählen.
Dies öffnet das Bild in einem neuen Browser-Tab.
Sie können die Erweiterung .webp in der Adressleiste sehen.
Methode 3: WebP-Bilder in WordPress mit SG Optimizer verwenden
Diese Methode wird empfohlen, wenn Sie ein SiteGround-Benutzer sind.
SiteGround ist eines der besten WordPress-Hosting-Unternehmen. Sie bieten ihren Benutzern ein kostenloses SG Optimizer-Plugin an, mit dem Sie die Leistung Ihrer WordPress-Website optimieren können. Es enthält auch die Option, WordPress-Bilder zu optimieren.
Zuerst müssen Sie das SG Optimizer-Plugin installieren und aktivieren.
Nach der Aktivierung fügt das Plugin einen neuen Menüpunkt zur Admin-Seitenleiste hinzu, der mit 'SG Optimizer' beschriftet ist. Ein Klick darauf führt Sie zur Einstellungsseite des Plugins.
Von hier aus können Sie die Caching-Einstellungen aktivieren, wenn Sie das integrierte Caching-System von SiteGround nutzen möchten.
Danach können Sie zum Tab „Medienoptimierung“ wechseln und die Option „WebP-Kopien neuer Bilder generieren“ aktivieren.
Darunter sehen Sie die Option „WebP-Dateien massenhaft generieren“.
Durch Klicken auf den Umschaltknopf dieser Option werden WebP-Kopien für alle Bilddateien in Ihrer WordPress-Mediathek generiert.
Sobald Sie fertig sind, wird Ihre WordPress-Website WebP-Bilder ausliefern.
WebP-Bilder in SG Optimizer testen
Um zu sehen, ob Ihre Website WebP-Bilder ausliefert, müssen Sie eine Seite auf Ihrer Website mit einigen Bildern öffnen.
Klicken Sie anschließend mit der rechten Maustaste und wählen Sie das Inspektionstool aus. Dies öffnet die Entwicklerkonsole, wo Sie zum Tab Netzwerk wechseln müssen.
Klicken Sie von hier aus auf den Tab „img“ und laden Sie die Seite neu (STRG+R unter Windows und BEFEHL+R auf dem Mac). Wenn Ihre Website neu geladen wird, sehen Sie alle Bilder, die in der Entwicklerkonsole geladen wurden.
Expertenanleitungen zur Verwendung von Bildern in WordPress
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie WebP-Bilder in WordPress verwenden. Möglicherweise möchten Sie auch einige andere Anleitungen zur Verwendung von Bildern auf Ihrer WordPress-Website sehen:
- So fügen Sie Bilder in WordPress richtig hinzu (Schritt für Schritt)
- So fügen Sie Beitragsbilder oder Beitrags-Thumbnails in WordPress hinzu
- WebP vs. PNG vs. JPEG: Das beste Bildformat für WordPress
- Wie man Bilder für Web-Performance optimiert, ohne Qualität zu verlieren
- Die besten WordPress-Bildkomprimierungs-Plugins im Vergleich
- Tools zur Erstellung besserer Bilder für Ihre Blogbeiträge
- Großartige WordPress-Plugins zur Verwaltung von Bildern (aktualisiert)
- Bild-Alt-Text vs. Bildtitel in WordPress – Was ist der Unterschied?
- Wo speichert WordPress Bilder auf Ihrer Website?
- Bilder in WordPress einfach per Lazy Load laden
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
Olaf
Wenn wir uns die Frage stellen, wie wir eine Website beschleunigen können, ist Medien ein Bereich, in dem es fast immer Optimierungspotenzial gibt. Praktisch jeder WordPress-Benutzer, es sei denn, er ist ein Profi, lädt Bilder auf die Website hoch, so wie sie auf seinem Computer gespeichert sind, oft unnötig groß in Abmessungen und Dateigröße. Es ist interessant zu sehen, wie sehr sich die Geschwindigkeit einer Website nur durch die Anpassung von Medien, insbesondere durch die Komprimierung von Bildern in ein anderes Format, verbessern kann. Ich mag WebP, weil es immer noch eine ausreichende Qualität bietet und gleichzeitig die Dateigrößen im Vergleich zum Original viel kleiner hält. Für bestehende Websites mit Dutzenden von Bildern ist es nützlich, eine Methode zu kennen, um dies alles in großen Mengen zu tun, und dann sind Anleitungen wie diese unglaublich wertvoll.
Paul
Ich habe die von Ihnen beschriebenen Schritte befolgt, aber beim Testen endet der neue Tab, der sich öffnet, wenn ich „Bild in neuem Tab öffnen“ auswähle, nicht mit webp, wie Sie zeigen, sondern mit der ursprünglichen Dateierweiterung. Wenn ich jedoch „Bild speichern unter…“ auswähle, wird webp angezeigt. Ich bin mir nicht ganz sicher, was das bedeutet. Ist das Bild wirklich webp und wird es als solches angezeigt? Der von mir verwendete Browser ist die neueste Version von Chrome, daher sollte er nicht das Fallback-Bild laden. Ich verwende ein Caching-Plugin, habe den Cache aber vor dem Testen geleert.
WPBeginner Support
Sie verwenden WebP-Bilder, wenn Sie dies beim Speichern sehen. Es hängt vom verwendeten Tool ab, aber es gibt eine WebP-Umleitung für die URL, sodass Sie die URL beibehalten, aber die WebP-Version des Bildes anzeigen, um 404-Fehler zu vermeiden.
Admin
MOINUDDIN WAHEED
Ich habe nach einem Mechanismus gesucht, um meine WordPress-Bilder in WebP zu konvertieren, da ich einen riesigen Unterschied in der Dateigröße zwischen PNG- und JPG-Bildern und WebP-Bildern festgestellt habe.
WebP-Bilder werden definitiv dazu beitragen, die Website schneller zu laden. Sie werden die Geschwindigkeit und Leistung der Website verbessern.
Vielen Dank für die Anleitung zur Konvertierung bestehender WordPress-Bilder in das WebP-Format.
WPBeginner Support
You’re welcome, glad you found our guide helpful
Admin
Jiří Vaněk
Normalerweise generiere ich WebP-Bilder in einem externen Editor. Ist es jedoch besser, Bilder im PNG-Format ins Web hochzuladen und sie dann in WebP zu konvertieren? Ich meine, ist es besser, beide Formate für den Browser zur Auswahl zu haben oder nicht? Ich mache mir Sorgen, dass jemand immer noch einen alten Browser verwendet, der WebP nicht unterstützt, und dann werden diese Bilder für diesen Benutzer auf meiner Website nicht angezeigt.
WPBeginner Support
Wenn Sie speziell ein Fallback-Bild wünschen, dann wäre die beste Option, Plugins die Bilder für Sie konvertieren zu lassen. Das Erstellen der WebP-Bilder mit einem Editor wäre der empfohlene Weg, um Speicherplatz auf Ihrer Website zu sparen.
Admin
Jiří Vaněk
Vielen Dank für Ihre Antwort. Ich habe noch viel Speicherplatz auf meinem FTP (100 GB), daher werde ich basierend auf Ihrer Antwort eher ein Plugin verwenden, um mehr Bildformate auf der Website zu haben und sicherzustellen, dass es auch für ältere Browser, die WebP nicht unterstützen, gut funktioniert. Ich weiß, dass es nur noch sehr wenige solcher Browser gibt, aber sie existieren immer noch. Danke für den Rat.
Emir
Wir haben einige Bilder von WebP in WooCommerce verwendet, während wir WooCommerce auf einem anderen Server gesichert haben, wurden die WebP-Bilder nicht übertragen, wir sind wieder zum JPEG-Format zurückgekehrt.
WPBeginner Support
Vielen Dank, dass Sie Ihre Erfahrungen mit WebP-Bildern geteilt haben. Wenn Sie sich an den Support für Ihr Backup-Tool wenden, gibt es normalerweise Snippets oder andere Möglichkeiten, dieses Problem zu beheben!
Admin
Ashikur Rahman
if i follow step 1 i would have old files in jpg/png format right? it will create a mess in upload folder. they have remove original file option, if i use that option. will it break my post images?
and most importantly what if i deactive/delete eww plugin will it also delete converted webp image also?
what should i do?
WPBeginner Support
Das Plugin behält derzeit die alten Bilder für Browser, die keine WebP-Bilder unterstützen, und erstellt nur dann ein WebP-Bild, wenn es eine bessere Größe als JPG/PNG hat. Das Entfernen des Originals würde Ihre Website nicht beeinträchtigen, aber wenn die Mehrheit Ihrer Besucher ältere Browser verwendet, die WebP nicht unterstützen, könnte es für diese Benutzer zu Problemen kommen.
Sie müssten sich beim Support des Plugins erkundigen, wie der aktuelle Status der erstellten Bilder ist, wenn das Plugin entfernt wird.
Admin
Rebecca
Hallo, ich habe bemerkt, dass einige Plugins wie wp-optimize eine Option zum Erhalt von EXIF-Daten für die WebP-Konvertierung anbieten. Sind diese Daten notwendig zu behalten?
Vielen Dank im Voraus
WPBeginner Support
Es ist nicht erforderlich, aber nützlich für die Websites, die diese Informationen verwenden.
Admin
Theo
hier ist, was ich suche,
Sehr hilfreich
WPBeginner Support
Wir freuen uns, dass unser Leitfaden hilfreich war!
Admin
Kim
Vielen Dank für die schnelle Antwort!
WPBeginner Support
Glad we could help
Admin
Kim
Das ist ein toller Tipp, nur eine Frage... muss ich den EWWW-Optimizer jedes Mal ausführen, wenn ich ein neues Bild (PNG, JPG) hochlade?
WPBeginner Support
The plugin will automate the process for new uploads
Admin