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

Wir wissen, wie wichtig es ist, ein Gleichgewicht zwischen Bildqualität und kurzen Ladezeiten herzustellen. Viele Website-Besitzer fragen uns nach dem besten Weg, WebP-Bilder zu verwenden, um genau das zu erreichen.

WebP-Bilder sind ein modernes Bildformat, das eine bessere Bildkomprimierung bietet, indem es die Dateigröße reduziert, ohne die Bildqualität wesentlich zu beeinträchtigen. Dadurch wird Ihre Website schneller geladen und spart Bandbreite.

Das Problem ist, dass WordPress das Uploaden oder Anzeigen von WebP-Bildern nicht von Haus aus unterstützt.

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

Subscribe to WPBeginner

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. Lesen Sie unsere EWWW Image Optimizer Bewertung für weitere Details.

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 Machern 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. Lesen Sie unsere Imagify Bewertung, um mehr zu erfahren.

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.