Möchten Sie WebP-Bilder in WordPress verwenden?
WebP-Bilder sind ein modernes Bildformat, das eine bessere Bildkomprimierung durch Verringerung der Dateigröße bietet. Dadurch wird Ihre Website schneller geladen und spart Bandbreite.
In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach WebP-Bilder in WordPress verwenden können.
Was ist WebP?
WebP ist ein neueres Dateiformat für Bilder, die im Internet verwendet werden sollen. Durch die Verwendung des WebP-Bildformats sind Ihre Bilder 25-34 % kleiner als PNG- und JPEG-Dateien, ohne an Qualität zu verlieren.
Wenn Bilder Ihre Website verlangsamen, kann die Konvertierung in das WebP-Format die Ergebnisse von Tests zur Seitenladegeschwindigkeit verbessern.
Weitere Informationen zur Bildkomprimierung finden Sie in unserem Leitfaden zur Optimierung von Bildern für das Web.
Da WebP ein neues Dateiformat ist, wird es noch nicht von allen Browsern unterstützt. Die meisten modernen Browser, wie Google Chrome, Firefox und Microsoft Edge, unterstützen jedoch WebP-Bilder.
Sollten Sie WebP-Bilder in WordPress verwenden?
WebP-Bilder können Ihnen helfen, Ihre WordPress-Website zu beschleunigen. Es ist eine empfohlene Best Practice, die zusammen mit einem WordPress-Caching-Plugin, CDN und mehr verwendet wird.
Seit WordPress 5.8 unterstützt WordPress standardmäßig WebP-Bilder. Das bedeutet, dass Sie Ihre WebP-Bilder auf Ihrer WordPress-Website speichern und hochladen können, ohne ein Plugin zu verwenden.
Dennoch sollten Sie ein Plugin zur Bildkomprimierung auf Ihrer WordPress-Website verwenden. Wenn viele Ihrer Nutzer nicht unterstützte Browser verwenden, sollten Sie die Verwendung eines Bildkomprimierungs-Plugins in Betracht ziehen.
Plugins zur Bildkomprimierung können Ihre vorhandenen Bilder in das WebP-Format konvertieren und JPEG- oder PNG-Bilder als Ausweichoption in Browsern anzeigen, die WebP noch nicht unterstützen.
Wenn Ihre Website viele Bilder verwendet und diese Ihren WordPress-Blog verlangsamen, sollten Sie unbedingt die Verwendung von WebP-Bildern in Betracht ziehen.
Hier erfahren Sie, wie Sie WebP-Bilder in WordPress verwenden können. Wir zeigen Ihnen mehrere Methoden, damit Sie diejenige auswählen können, die für Sie am besten funktioniert:
Video-Anleitung
Wenn Sie eine schriftliche Anleitung bevorzugen, dann lesen Sie einfach weiter.
Methode 1: Verwendung von WebP-Bildern in WordPress mit EWWW Optimizer
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 sie automatisch in unterstützten Browsern anzeigen.
Als Erstes müssen Sie das EWWW Image Optimizer-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.
Gehen Sie nach der Aktivierung auf die 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 Kästchen neben der Option „WebP-Konvertierung“.
Klicken Sie anschließend auf die Schaltfläche „Änderungen speichern“, um Ihre Einstellungen zu speichern.
Als Nächstes müssen Sie nach unten zum Abschnitt WebP-Konvertierung scrollen. Das Plugin zeigt Ihnen nun einige Umschreibregeln mit einem roten Vorschaubild.
Sie müssen auf die Schaltfläche „Rewrite-Regeln einfügen“ klicken, und das Plugin wird automatisch versuchen, diese Rewrite-Regeln in Ihre .htaccess-Datei einzufügen.
Wenn das Plugin diese Regeln erfolgreich hinzugefügt hat, wird die rote Bildvorschau mit dem Text „WebP“ grün.
Manchmal ist das Plugin nicht in der Lage, die Regeln einzufü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 erneut auf die Schaltfläche „Änderungen speichern“. Wenn das Vorschaubild grün wird, bedeutet dies, dass Sie die Bereitstellung von WebP-Bildern auf Ihrer WordPress-Website erfolgreich aktiviert haben.
Alternativ können Sie zwischen den Methoden JS WebP Rewriting oder WebP Rewriting als WebP-Bereitstellungsoptionen wählen. Diese Methoden sind etwas langsamer als die .htaccess-Methode, aber sie erfüllen ihre Aufgabe.
Massenkonvertierung Ihrer alten Bilder in WebP-Versionen
Mit EWWW Image Optimizer können Sie Ihre zuvor hochgeladenen Bilddateien ganz einfach in WebP-Bilder umwandeln. Gehen Sie einfach auf die Seite Medien “ Bibliothek und wechseln Sie zur Listenansicht.
Als nächstes müssen Sie auf die Schaltfläche „Bildschirmoptionen“ klicken und die „Anzahl der Elemente pro Seite“ auf 999 ändern. Wenn Sie mehr als 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 Massenoptimierung auswählen. Klicken Sie dann oben auf das Kontrollkästchen Alle auswählen, um alle Bilder auszuwählen.
Klicken Sie anschließend auf das Dropdown-Menü „Massenaktionen“ und wählen Sie die Option „Massenoptimierung“. Klicken Sie abschließend auf die Schaltfläche „Anwenden“.
Auf dem nächsten Bildschirm bietet Ihnen das Plugin die Möglichkeit, die Bildkomprimierung zu überspringen und die Bilder nur in WebP zu konvertieren. Sie können diese Option aktivieren, wenn Ihre Bilder bereits optimiert sind.
Danach klicken Sie 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 erzeugt WebP-Versionen für Ihre Bilder.
Testen der WebP-Bildübertragung
Sobald Sie Ihre Bilder optimiert haben, können Sie zu einem Blogbeitrag mit mehreren Bildern wechseln.
Gehen Sie mit der Maus auf ein beliebiges Bild und klicken Sie mit der rechten Maustaste, um das Bild in einer neuen Registerkarte zu öffnen.
Dadurch wird das Bild in einer neuen Browser-Registerkarte geöffnet.
In der Adressleiste sehen Sie, dass die Datei die Erweiterung .webp hat.
Wenn das Plugin nicht in der Lage ist, das WebP-Bild bereitzustellen, können Sie zur Einstellungsseite des Plugins zurückgehen. Von hier aus können Sie die WebP-Übermittlungsoption auf die Methoden „JS WebP Rewriting“ oder „WebP Rewriting“ ändern.
Methode 2: Verwendung von WebP-Bildern in WordPress mit Imagify
Imagify ist ein WordPress-Plugin zur Bildoptimierung, das von den Entwicklern von WP Rocket, dem besten WordPress-Caching-Plugin, entwickelt wurde. Es ermöglicht Ihnen die einfache Optimierung und Konvertierung von Bildern in das WebP-Bildformat.
Als Erstes müssen Sie das Imagify-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.
Nach der Aktivierung müssen Sie die Seite Einstellungen “ Imagify aufrufen, um die Plugin-Einstellungen zu konfigurieren. Klicken Sie hier auf die Schaltfläche „Create a Free API Key“, um fortzufahren.
Sie werden aufgefordert, eine geschäftliche E-Mail-Adresse einzugeben. Danach können Sie in Ihrem Posteingang nach einer E-Mail mit Ihrem API-Schlüssel suchen. Kopieren Sie den Schlüssel, 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 den Optionen „Webp-Versionen von Bildern erstellen“ und „Bilder im Webp-Format auf der Website anzeigen“ aktivieren.
Darunter können Sie zwischen zwei Methoden 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, aber sie funktioniert nicht, wenn Sie einen CDN-Dienst verwenden. Die Tag-Methode funktioniert auch mit CDNs, aber sie kann einige WordPress-Themes beschädigen.
Sie können eine der beiden Optionen wählen, die für Ihre Website gut geeignet ist. Klicken Sie dann unten auf die Schaltfläche „Speichern und zu Bulk Optimizer gehen“.
Dadurch gelangen Sie auf die Seite Medien “ Massenoptimierung.
Das Plugin optimiert automatisch alle Ihre WordPress-Bilder im Hintergrund.
Wenn Sie sehr viele Bilder haben, kann dies eine Weile dauern. Keine Sorge, Sie können die Seite schließen und später wieder darauf zurückkommen, denn das Schließen der Seite hält den Prozess der Bildoptimierung nicht auf.
Testen Ihrer WebP-Bilder in WordPress
Sobald die Optimierung abgeschlossen ist, können Sie eine Seite oder einen Beitrag mit einigen Bildern aufrufen. Gehen Sie mit der Maus auf ein Bild und wählen Sie mit der rechten Maustaste „Bild in neuer Registerkarte öffnen“.
Dadurch wird das Bild in einer neuen Browser-Registerkarte geöffnet.
In der Adressleiste wird die Erweiterung .webp angezeigt.
Methode 3: Verwendung von WebP-Bildern in WordPress mit SG Optimizer
Diese Methode wird empfohlen, wenn Sie ein SiteGround-Benutzer sind.
SiteGround ist einer der besten WordPress-Hosting-Anbieter. Sie bieten ihren Nutzern ein kostenloses SG Optimizer-Plugin, mit dem Sie die Leistung von WordPress optimieren können. Es beinhaltet auch die Option, WordPress-Bilder zu optimieren.
Zunächst müssen Sie das SG Optimizer-Plugin installieren und aktivieren.
Nach der Aktivierung fügt das Plugin einen neuen Menüpunkt mit der Bezeichnung „SG Optimizer“ zu Ihrer Admin-Seitenleiste hinzu. Wenn Sie darauf klicken, gelangen Sie zur Seite mit den Einstellungen des Plugins.
Von hier aus können Sie die Caching-Einstellungen aktivieren, wenn Sie das integrierte Caching-System von SiteGround verwenden möchten.
Danach können Sie zur Registerkarte „Medienoptimierung“ wechseln und die Option „WebP-Kopien neuer Bilder erzeugen“ aktivieren.
Darunter sehen Sie die Option „Bulk Generate WebP Files“.
Wenn Sie auf die Schaltfläche dieser Option klicken, werden WebP-Kopien für alle Bilddateien in Ihrer WordPress-Mediathek erstellt.
Sobald dies geschehen ist, wird Ihre WordPress-Website WebP-Bilder bereitstellen.
Testen von WebP-Bildern in SG Optimizer
Um festzustellen, ob Ihre Website WebP-Bilder bereitstellt, müssen Sie eine Seite mit einigen Bildern auf Ihrer Website öffnen.
Klicken Sie anschließend mit der rechten Maustaste und wählen Sie das Werkzeug Inspect. Dadurch wird die Entwicklerkonsole geöffnet, in der Sie auf die Registerkarte „Netzwerk“ wechseln müssen.
Klicken Sie hier auf die Registerkarte „img“ und laden Sie die Seite neu (STRG+R unter Windows und Befehl+R auf dem Mac). Während Ihre Website neu geladen wird, sehen Sie in der Entwicklerkonsole alle geladenen Bilder.
Expertenanleitungen zur Verwendung von Bildern in WordPress
Da Sie nun wissen, wie Sie WebP-Bilder in WordPress verwenden können, möchten Sie vielleicht einige andere Anleitungen zur Verwendung von Bildern auf Ihrer WordPress-Website sehen:
- Wie man Bilder in WordPress richtig einfügt (Schritt für Schritt)
- Wie man in WordPress Bilder oder Miniaturansichten von Beiträgen hinzufügt
- WebP vs. PNG vs. JPEG: Das beste Bildformat für WordPress
- Wie man Bilder für die Webleistung optimiert, ohne an Qualität zu verlieren
- Die besten WordPress Plugins zur Bildkomprimierung im Vergleich
- Tools zur Erstellung besserer Bilder für Ihre Blogbeiträge
- Tolle WordPress-Plugins für die Verwaltung von Bildern (aktualisiert)
- Image Alt Text vs Image Title in WordPress – Was ist der Unterschied?
- Wo speichert WordPress Bilder auf Ihrer Website?
- Wie man Bilder in WordPress ganz einfach Lazy Load
Wir hoffen, dieser Artikel hat Ihnen geholfen, die Verwendung von WebP-Bildern in WordPress zu erlernen. Vielleicht interessieren Sie sich auch für unsere Anleitung zur Erstellung eines E-Mail-Newsletters und unsere Expertenauswahl der besten Business-Telefondienste für Ihre Website.
Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
MOINUDDIN WAHEED says
I was searching for some mechanism to convert my wordpress images to webp as I have seen a huge difference in the file size between a png and jpg images and webp images.
Having webp images will definitely help load the website faster. It will enhance the speed and performance of the website.
Thanks for the guide for converting existing wordpress images to webp format.
WPBeginner Support says
You’re welcome, glad you found our guide helpful
Admin
Jiří Vaněk says
Usually, I generate WebP images in an external editor. However, is it better practice to upload images in PNG format to the web and then generate them into WebP? I mean, is it better to have both formats for the browser to choose from or not? I’m concerned that someone might still be using an old browser that doesn’t support WebP, and then those images won’t display on my website for that user.
WPBeginner Support says
If you specifically want a fallback image then allowing plugins to convert the images for you would be the best option. Creating the WebP images with an editor would be the recommended way to save space on your site.
Admin
emir says
We used a few images from webp in WooCommerce, while backing up woocommerce on another server, the webp images were not transferred, we returned to jpeg format again.
WPBeginner Support says
Thank you for sharing your experience with webp images. If you reach out to the support for your backup tool, there are normally snippets or other ways to fix that issue!
Admin
Ashikur Rahman says
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 says
The plugin currently keeps the old images for the browsers that do not support WebP images and would only create the WebP image if it is a better size than the jpg/png. Removing the original would not break your site but if a majority of your visitors are using older browsers that don’t support WebP it could be broken for those users.
You would need to check with the plugin’s support for the current status of the created images when the plugin is removed.
Admin
Rebecca says
Hi I notice some plugins like wp-optimize allows an option to preserve exif data for webp conversion. Is this data necessary to keep?
Thanks in advance
WPBeginner Support says
It is not required but is useful for the sites that use that information.
Admin
Theo says
here’s what I’m looking for,
Very helpful
WPBeginner Support says
Glad our guide was helpful!
Admin
Kim says
Thanks so much for the quick reply!
WPBeginner Support says
Glad we could help
Admin
Kim says
This is a great tip, just 1 question…will I need to run the EWWW optimizer every time that I upload a new image (PNG, JPG) ?
WPBeginner Support says
The plugin will automate the process for new uploads
Admin