Cookie Consent by FreePrivacyPolicy.com

Täglich suchen wir für euch die Neusten und meist begehrten Plugins aus dem Internet raus.

Teile diesen Beitrag

Share on facebook
Facebook
Share on twitter
Twitter
Share on email
Email
Share on telegram
Telegram
Share on whatsapp
WhatsApp
Share on xing
XING

Wie man WebP-Bilder in WordPress verwendet (3 Methoden)

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 WebP-Bilder ganz einfach in WordPress verwenden können.

Adding WebP images in WordPress

Was ist WebP und warum sollte man WebP-Bilder in WordPress verwenden?

WebP ist ein neues Dateiformat für Bilder, die im Web verwendet werden sollen. Durch die Verwendung des WebP-Bildformats sind Ihre Bilder 25-34% kleiner als PNG und JPEG, 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?

Mit WebP-Bildern können Sie Ihre WordPress-Website beschleunigen. Es ist eine empfohlene Best Practice, die zusammen mit einem WordPress-Caching-Plugin, CDN und mehr verwendet werden sollte.

Standardmäßig unterstützt WordPress keine WebP-Bilder und das Hochladen eines WebP-Bildes führt zu einer Fehlermeldung.

WebP image upload error in WordPress

Um dies zu beheben, müssen Sie ein Bildkomprimierungs-Plugin verwenden, um Bilder in das WebP-Bildformat zu konvertieren. Sie können Ihre Bilder immer noch in von WordPress unterstützten Dateiformaten wie PNG, JPEG und GIF hochladen, damit sie als Backup verwendet werden können.

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:

Methode 1. Verwendung von WebP-Bildern in WordPress mit EWWW Optimizer

Das EWWW Image Optimizer Plugin 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 Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung gehen Sie 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.

EWWW Wizard

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“.

WebP conversion in EWWW

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.

Klicken Sie auf die Schaltfläche „Rewrite-Regeln einfügen“, und das Plugin wird automatisch versuchen, diese Rewrite-Regeln in Ihre .htaccess-Datei einzufügen.

Insert rewrite rules

Wenn das Plugin diese Regeln erfolgreich hinzugefügt hat, wird die rote Bildvorschau mit dem Text „WebP“ grün.

WebP Delivery method successful

Manchmal kann es vorkommen, dass das Plugin die Regeln nicht einfügen kann. In diesem Fall müssen Sie die Rewrite-Regeln von der Einstellungsseite des Plugins kopieren und sie manuell am Ende Ihrer .htaccess-Datei einfügen.

Kehren Sie anschließend 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 Bereitstellung von WebP-Bildern auf Ihrer WordPress-Website erfolgreich aktiviert haben.

Alternativ können Sie zwischen den MethodenJS WebP Rewriting oder WebP Rewriting als WebP-Bereitstellungsoptionenwählen . Diese Methoden sind zwar etwas langsamer als die .htaccess-Methode, aber sie erfüllen ihren Zweck.

Bulk-Konvertierung Ihrer alten Bilder in die WebP-Version

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.

Select files in Media

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.

Bulk Optimize

Danach klicken Sie auf das Dropdown-Menü Massenaktionen und wählen 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 die Bilder nur in WebP zu konvertieren. Sie können diese Option aktivieren, wenn Ihre Bilder bereits optimiert sind.

Run optimization

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 wird WebP-Versionen für Ihre Bilder erzeugen.

WebP image conversion finished

Testen Ihrer WebP-Bildlieferung

Sobald Sie Ihre Bilder optimiert haben, können Sie zu einem Blogbeitrag oder einer Seite mit mehreren Bildern gehen. 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.

checking image

Dadurch wird das Bild in einer neuen Browser-Registerkarte geöffnet, und Sie können sehen, dass es eine .webp-Erweiterung in der Adressleiste hat.

Verify WebP image is served

Wenn das Plugin nicht in der Lage ist, das WebP-Bild zu liefern, können Sie zur Einstellungsseite des Plugins zurückgehen. Von hier aus können Sie die WebP-Auslieferungsoption auf „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 zur Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie die Seite Einstellungen “ Imagify besuchen, um die Plugin-Einstellungen zu konfigurieren. Klicken Sie hier auf die Schaltfläche „Create a Free API Key“, um fortzufahren.

Create Imagify API key

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, 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 nach unten 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.

Imagify WebP Settings

Darunter können Sie zwischen zwei Bereitstellungsmethoden wählen, um WebP-Bilder in WordPress anzuzeigen. Die erste ist die .htaccess-Methode, die zweite die Verwendung von 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 zerstören.

Sie können eine der beiden Methoden wählen, die für Ihre Website am besten geeignet ist. Klicken Sie anschließend unten auf die Schaltfläche „Speichern und zum Bulk Optimizer wechseln“.

Save settings and start image optimizer

Dies bringt Sie zur Seite Media “ Bulk Optimization. Das Plugin beginnt automatisch mit der Optimierung aller Ihrer WordPress-Bilder im Hintergrund.

Optimization status

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 stoppt den Prozess der Bildoptimierung nicht.

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 neuem Tab öffnen“.

checking image

Dadurch wird das Bild in einer neuen Browser-Registerkarte geöffnet, und in der Adressleiste wird die Erweiterung .webp angezeigt.

Verify WebP image is served

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 an, mit dem Sie Ihre WordPress-Leistung optimieren können. Es enthält 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 auf die Einstellungsseite des Plugins.

SG Optimizer settings

Von hier aus können Sie die Caching-Einstellungen aktivieren, wenn Sie das integrierte Caching-System von SiteGroundnutzen möchten.

Danach können Sie zur Registerkarte „Medienoptimierung“ wechseln und die Option „WebP-Kopien neuer Bilder generieren“ aktivieren.

Enable WebP images in SG Optimizer

Darunter sehen Sie die Option „Bulk Generate WebP Files“. Wenn Sie darauf klicken, werden WebP-Kopien für alle Bilddateien in Ihrer WordPress-Medienbibliothek erstellt.

Bulk generate WebP images

Sobald Sie fertig sind, wird Ihre WordPress-Website WebP-Bilder bereitstellen.

Testen von WebP-Bildern in SG Optimizer

Um zu sehen, ob Ihre Website WebP-Bilder bereitstellt, müssen Sie eine Seite mit einigen Bildern auf Ihrer Website öffnen.

Klicken Sie dann mit der rechten Maustaste auf die Seite und wählen Sie die Option Inspect tool. Daraufhin wird die Entwicklerkonsole geöffnet, in der Sie auf die Registerkarte Netzwerk wechseln müssen.

Viewing WebP Images in developer tools

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.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, die Verwendung von WebP-Bildern in WordPress zu erlernen. Vielleicht interessieren Sie sich auch für unsere Anleitung zum Erstellen eines E-Mail-Newsletters und unseren Vergleich der besten Business-Telefondienste für Ihre Website.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie doch unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.