Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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.

Adding WebP images in WordPress

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.

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.

Insert rewrite rules

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.

WebP Delivery method successful

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.

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

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.

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

WebP image conversion finished

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.

checking image

Dadurch wird das Bild in einer neuen Browser-Registerkarte geöffnet.

In der Adressleiste sehen Sie, dass die Datei die Erweiterung .webp hat.

Verify WebP image is served

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.

Create Imagify API key

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.

Imagify WebP Settings

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

Save settings and start image optimizer

Dadurch gelangen Sie auf die Seite Medien “ Massenoptimierung.

Das Plugin optimiert automatisch alle Ihre 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 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“.

checking image

Dadurch wird das Bild in einer neuen Browser-Registerkarte geöffnet.

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

SG Optimizer settings

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.

Enable WebP images in SG Optimizer

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.

Bulk generate WebP images

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.

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.

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:

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.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

17 KommentareEine Antwort hinterlassen

  1. Syed Balkhi

    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!

  2. MOINUDDIN WAHEED

    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

      You’re welcome, glad you found our guide helpful :)

      Admin

  3. Jiří Vaněk

    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

      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

  4. emir

    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

      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

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

      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

  6. Rebecca

    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

      It is not required but is useful for the sites that use that information.

      Admin

  7. Theo

    here’s what I’m looking for,
    Very helpful

    • WPBeginner Support

      Glad our guide was helpful!

      Admin

  8. Kim

    Thanks so much for the quick reply!

    • WPBeginner Support

      Glad we could help :)

      Admin

  9. Kim

    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

      The plugin will automate the process for new uploads :)

      Admin

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.