So verwenden Sie WebP-Bilder in WordPress: Alles, was Sie wissen müssen

Sind Sie daran interessiert, WebP-Bilder auf WordPress zu verwenden? Oder verwirrt darüber, was WebP-Bilder überhaupt sind und warum Sie sich überhaupt um sie kümmern sollten?

In diesem Beitrag werden wir diese beiden Probleme lösen. Wenn Sie bereits wissen, was WebP ist, und sofort loslegen möchten, zeigen wir Ihnen eine Schritt-für-Schritt-Anleitung für die Einrichtung und den Betrieb.

Und wenn Sie sich immer noch nicht sicher sind, warum Sie sich überhaupt für WebP-Bilder für Ihre WordPress-Site interessieren sollten, beginnen wir mit einer Einführung in das WebP-Bildformat, seinen Vorteilen und Vergleichen mit anderen Bildformaten sowie einigen wichtigen Details zur Browserunterstützung .

Lassen Sie uns graben!

Was ist WebP?

WebP ist ein modernes Bilddateiformat, das von Google entwickelt wurde.

Mit „Bilddateiformat“ meinen wir, dass es genauso funktioniert wie andere Bildformate wie PNG , JPEG , GIF usw.

Wenn Sie Bilder auf Ihrer WordPress-Website verwenden, können Sie diese Bilder aus Formaten wie JPEG oder PNG in das WebP-Format konvertieren.

Für menschliche Besucher sehen Ihre WebP-Bilder genauso aus wie Bilder in anderen Formaten – es gibt nichts Besonderes daran, wie sie für das menschliche Auge aussehen.

Also – was ist dann der Vorteil der Verwendung von WebP-Bildern? Brunnen..,

Was ist der Vorteil der Verwendung von WebP-Bildern?

Der Hauptnutzen und das Ziel des WebP-Projekts besteht darin, kleinere Bilddateien bei gleicher Bildqualität zu erstellen.

Wenn Sie die Dateigröße der Bilder, die Sie auf Ihrer WordPress-Seite verwenden, verkleinern können, können Sie die Ladezeiten Ihrer Seite beschleunigen, ohne irgendeinen Teil der Benutzererfahrung Ihrer Seite zu verändern.

Das ist der Vorteil von WebP-Bildern auf den Punkt gebracht – kleinere Bilder → schnellere Website-Ladezeiten .

Als Google beispielsweise 2014 WebP-Bilder für YouTube-Thumbnails einführte, behauptete das Google-Team, dass dies zu einer Verkürzung der Seitenladezeit um bis zu 10 % geführt habe. In demselben Beitrag sagte Google auch, dass sie die Größe von Bildern im Google Play Store um 35 % verkleinern konnten.

Aus diesem Grund schlagen Geschwindigkeitsanalyse-Tools wie PageSpeed ​​Insights oft vor, dass Sie „Bilder in Next-Gen-Formaten bereitstellen“. Mit „Formaten der nächsten Generation“ meinen diese Tools WebP ( oder ein ähnlich optimiertes Format ).

Ihre nächste Frage könnte lauten: Wie viel kleiner ist WebP im Vergleich zu anderen Bildformaten wie PNG und JPEG?

Nun, der genaue Unterschied hängt von dem spezifischen Bild- und Dateiformat ab, das Sie vergleichen ...

WebP vs. JPEG

Google führte eine große vergleichende Bewertung zwischen WebP- und JPEG-Bildkomprimierung durch und stellte fest, dass die WebP-Bilder 25-34 % kleiner waren als entsprechende JPEG-Bilder. In ihren Worten: „Diese Ergebnisse weisen darauf hin, dass WebP erhebliche Komprimierungsverbesserungen gegenüber JPEG bieten kann.“

Wenn Sie einige aktuelle Bilder sehen möchten, um zu beurteilen, ob sich die Qualität geändert hat, unterhält Google hier eine WebP-Galerie, die das gleiche Bild-WebP- und JPEG-Format vergleicht.

WebP im Vergleich zu PNG

Bei PNG-Bildern stellte Google fest, dass die WebP-Version im Durchschnitt 26 % kleiner war.

Andere Studien haben geringfügig kleinere oder größere Unterschiede festgestellt, je nachdem, welche Variablen Sie verwenden (z. B. welche JPEG-Codierungsmethode Sie verwenden ), aber die Ergebnisse sind im Allgemeinen ziemlich konsistent, da WebP kleinere Dateigrößen bei vergleichbarer Qualität bietet, weshalb es wächst an Popularität.

Welche Webbrowser unterstützen WebP-Bilder?

Wenn wir diesen Beitrag vor einem Jahr geschrieben hätten, hätten wir gesagt, dass ein Nachteil des WebP-Formats darin besteht, dass es keine vollständige Browserunterstützung gibt.

Chrome und Firefox haben seit langem WebP-Unterstützung, aber der einzige große Widerstand war Safari. Apple gab jedoch im September 2020 schließlich nach und fügte WebP-Unterstützung in Safari 14 und höher hinzu.

Ab Juni 2021 unterstützen alle gängigen Browser WebP mit Ausnahme des Internet Explorers, den Microsoft bereits im August 2021 als veraltet markiert. Dies ist laut der großartigen Website Can I Use:

Es gibt jedoch eine kleine Einschränkung bei der Safari-Unterstützung für WebP – sie ist nur für Mac-Benutzer verfügbar, die macOS 11 Big Sur oder höher verwenden. Wenn also jemand eine ältere Version von macOS/Safari verwendet, hat er möglicherweise immer noch keine WebP-Unterstützung.

Insgesamt schätzt Can I Use, dass im Juni 2021 rund 95 % aller Besucher einen Browser verwenden, der WebP unterstützt.

Aber was ist mit den anderen 5 %?

Glücklicherweise ist es ziemlich einfach, dies zu umgehen, indem Sie das richtige WordPress-Plugin verwenden (auf das wir weiter unten näher eingehen werden ). Grundsätzlich können Sie Ihre Originalbilder im JPEG/PNG/GIF-Format hochladen und vom Plugin konvertieren lassen. Dann liefert das Plugin die WebP-Version an Browser, die es unterstützen, und die Originalversion an Browser, die dies nicht tun.

So verwenden Sie WebP-Bilder in WordPress

WordPress 5.8 hat WebP-Unterstützung hinzugefügt. Das bedeutet, dass Sie WebP-Bilder direkt auf WordPress hochladen können. Sie können sie jedoch nicht umwandeln. Außerdem wird die Möglichkeit, WebP-Bilder direkt in die Medienbibliothek hochzuladen, immer noch nicht die ~5% der Besucher reparieren, deren Browser WebP nicht unterstützen.

Das bedeutet jedoch nicht, dass Sie WebP-Bilder nicht auf WordPress verwenden können. Stattdessen sollten Sie:

1. Laden Sie weiterhin Bilder in ihren Originalformaten hoch – z. B. PNG, JPEG, GIF usw.
2. Verwenden Sie ein WordPress-Plugin, um Bilder in WebP zu konvertieren, und stellen Sie die WebP-Versionen nach Möglichkeit bereit.

Um beides zu erreichen und Ihre Bilder auf andere Weise zu optimieren, können Sie Imagify verwenden.

Imagify ist ein vollständiges WordPress-Bildoptimierungs-Plugin. Neben der Unterstützung beim Konvertieren von Bildern in WebP und deren Bereitstellung für unterstützte Browser kann es Ihnen auch helfen:

• Komprimieren Sie mehrere Bilder in ihren ursprünglichen Formaten.
• Ändern Sie die Größe von Bildern automatisch auf eine Reihe von maximalen Abmessungen, ohne an Qualität zu verlieren.

Imagify optimiert und konvertiert Bilder beim Hochladen automatisch in WebP . Und für ältere Bilder können Sie einige oder alle Ihre vorhandenen Bilder mit einem einzigen Klick massenweise optimieren und konvertieren.

So richten Sie es ein…

1. Installieren Sie das Imagify-Plugin und aktivieren Sie den API-Schlüssel

Installieren und aktivieren Sie zunächst das kostenlose Imagify-Plugin von WordPress.org.

Sobald Sie dies getan haben, fordert Sie das Plugin auf, Ihren API-Schlüssel einzugeben.

Sie können Ihren API-Schlüssel erhalten, indem Sie sich für ein kostenloses Imagify-Konto registrieren. Mit Imagify können Sie 20 MB Bilder pro Monat kostenlos optimieren und konvertieren, was ungefähr 200 Bildern entspricht.

Wenn Sie weniger als ~200 Bilder pro Monat hochladen, können Sie für immer beim kostenlosen Plan bleiben. Wenn Sie mehr benötigen, können Sie auf einen kostenpflichtigen Plan upgraden, der 4,99 $/Monat für 500 MB ( ~5.000 Bilder ) oder 9,99 $ pro Monat für unbegrenzte Nutzung kostet.

Mit allen Plänen können Sie Ihr API-Konto auf unbegrenzten WordPress-Sites verwenden .

Sobald Sie Ihren API-Schlüssel haben, fügen Sie ihn in das Feld ein und klicken Sie auf Connect Me :

2. Richten Sie grundlegende Bildoptimierungseinstellungen ein

Nachdem Sie Ihren Imagify-API-Schlüssel hinzugefügt haben, gehen Sie zu Einstellungen → Imagify , um die Grundeinstellungen des Plugins zu konfigurieren.

Oben können Sie Ihre gewünschte Komprimierungsstufe zusammen mit einigen anderen Einstellungen auswählen. Wenn Sie sich nicht sicher sind, welche Komprimierungsstufe Sie verwenden sollen, können Sie den visuellen Vergleich ausprobieren:

Weiter unten auf der Seite können Sie eine Option aktivieren, um größere Bilder automatisch zu skalieren und die maximale Größe für skalierte Bilder festzulegen. Wenn Sie beispielsweise die maximale Breite auf 1.600 px festlegen, werden alle Bilder, die breiter als 1.600 px sind, automatisch auf 1.600 px verkleinert.

Sie können auch auswählen, welche Miniaturbildgrößen Sie optimieren möchten:

3. Richten Sie die WordPress WebP-Konvertierung ein

Um die WebP-Konvertierung in Imagify zu aktivieren, finden Sie die Einstellungen für das WebP-Format unter Optimierung .

Aktivieren Sie zunächst das Kontrollkästchen Webp-Versionen von Bildern erstellen . Dadurch wird Imagify angewiesen, Ihre Bilder in WebP zu konvertieren, aber es weist Imagify nicht an, diese WebP-Bilder für unterstützte Browser bereitzustellen.

Um dies zu erreichen, können Sie auch das Kontrollkästchen Bilder im Webp-Format auf der Website anzeigen aktivieren . Darunter empfehlen wir die Verwendung der Methode Use <picture> tags .

Wenn Sie ein Content Delivery Network (CDN) verwenden, um Bilder von einer separaten URL wie https://cdn.yoursite.com bereitzustellen , sollten Sie diese URL auch in das Feld eingeben:

Wie Sie im Screenshot sehen können, kann die <picture>-Tags- Methode bei einigen WordPress-Designs zu Problemen führen. Wenn Sie nach dem Aktivieren von WebP-Bildern Probleme mit Ihrem Design feststellen, können Sie stattdessen mit der Option Rewrite-Regeln verwenden experimentieren.

4. Konvertieren und optimieren Sie Ihre Bilder

Jetzt beginnt Imagify automatisch mit der Optimierung und Konvertierung neuer Bilder, die Sie hochladen.

Wenn Sie viele vorhandene Bilder auf Ihrer Website haben, können Sie zu Medien → Massenoptimierung gehen, um alle Ihre vorhandenen Bilder zu optimieren und sie in WebP zu konvertieren:

Und das ist es! Ihre WordPress-Site wird jetzt beginnen, wann immer möglich, kleinere, schnellere WebP-Bilder für Besucher zu verwenden.

Beginnen Sie noch heute mit der Verwendung von WebP-Bildern auf WordPress

Mit dem WebP-Bildformat können Sie die Dateigröße der Bilder Ihrer WordPress-Site reduzieren, ohne die Bildqualität oder die Benutzererfahrung zu ändern. Indem Sie die Dateigröße verkleinern, können Sie die Ladezeiten Ihrer Website verkürzen.

Ab Juni 2021 genießt das WebP-Format eine nahezu universelle Browserunterstützung, wobei ~95 % aller Besucher einen Browser verwenden, der WebP unterstützt.

Wenn Sie mit WebP-Bildern auf WordPress beginnen möchten, können Sie Imagify verwenden.

Imagify optimiert automatisch die Bilder Ihrer Website und konvertiert sie in WebP. Dann sorgt es auch dafür, dass Besucher die WebP-Version von Bildern sehen, wenn ihre Browser WebP unterstützen.

Installieren Sie zunächst das kostenlose Imagify-Plugin und registrieren Sie sich noch heute für ein Imagify-Konto.

Haben Sie noch Fragen zur Verwendung von WebP auf WordPress? Lass es uns im Kommentarbereich wissen!