Wie man WebP-Bilder in WordPress verwendet

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.

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 der WebP dateien (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.

Etwa 5% der Nutzer, verwenden jedoch einen Webbrowser, der das WebP format nicht unterstützt. Wie z.b Safari. Dem Internet Explorer fehlt ebenfalls die WebP-Unterstützung.

Die WebP Dateien sind ein neues Dateiformat, aus diesem grund 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 The 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.

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 Bilder und GIF hochladen, damit sie als Backup verwendet werden können.

Wenn Ihre Website viele JPEG 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 JPEG Bilder optimieren können. EWWW ist sehr bekannt durch eine verlustbehaftete Komprimierung.
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.

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.

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.

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

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

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

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 The WebP Dateien 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 JPEG 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.

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.

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.

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.

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 „The Webp-Versionen von Bildern erstellen“ und „Bilder im Webp-Format auf der Website anzeigen“ aktivieren.

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

Dies bringt Sie zur Seite Media “ Bulk Optimization. Das Plugin beginnt automatisch mit der Optimierung aller Ihrer 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 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“.

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

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, die Verwendung von WebP-Bildern in WordPress zu erlernen.