Inhaltsverzeichniss
By Marine Larmier - Zuletzt aktualisiert am
Du fragst dich, wie du WebP in WordPress nutzt und wie du deine vorhandenen Bilder in der WordPress-Mediathek konvertierst? Dann bist du hier genau richtig!
Wenn du einen Performance-Test mit PageSpeed Insights durchführst, siehst du vielleicht die Empfehlung „Bilder in modernen Formaten bereitstellen“, die die Performance steigern soll. Google rät dir, JPEG und PNG zu vergessen und deine Bemühungen bei der Bildoptimierung auf Bildformate wie WebP zu konzentrieren.
Diese Anleitung erklärt, wie du diese Warnung behebst, und alles, was du über WebP in WordPress wissen musst. Außerdem bekommst du eine Liste der besten Tools, mit denen du fast jedes Format in WebP konvertieren kannst.
Was ist das WebP-Bildformat?
Das WebP-Format wurde von Google entwickelt und ist ein Next-Gen-Format für das Web. Es bietet eine überlegene verlustfreie und verlustbehaftete Komprimierung für Bilder und erhält dabei die Qualität. Im Vergleich zu herkömmlichen JPEGs oder PNGs kannst du mit diesem modernen Format noch kleinere Dateigrößen erzielen, sodass die Seite schneller lädt.
WebP vs. PNG vs. JPEG
Wenn du zwischen den drei Formaten schwankst und dir die Performance wichtig ist, wähle WebP, um in WordPress optimierte Bilder bereitzustellen. Du wirst gleich verstehen, warum.
JPEG vs. WebP
Beide Dateiformate komprimieren Bilder, damit sie sich im Web leichter teilen lassen und ihre Qualität behalten. Sie sehen sich recht ähnlich, warum also WebP wählen?
Eine WebP-Datei ist in der Regel deutlich kleiner als ein herkömmliches JPEG. Laut Google kann ein WebP-Bild mit verlustbehafteter Komprimierung 25 bis 34 % kleiner sein als eine vergleichbare JPEG-Datei.
Sieh dir die Grafik unten an: WebP (in Rot) erzielt eine bessere Komprimierung als JPEG.
Prüfen wir diese Aussage an unserem JPEG-Bild mit 3,7 MB. Nach der Konvertierung in WebP hatte das Bild dieselbe Qualität, aber die Dateigröße sank auf 1,3 MB.
PNG vs. WebP
PNGs werden vor allem für Webgrafiken ohne Hintergrund wie Logos und Illustrationen verwendet und weniger für hochwertige Fotos. Sie belegen in der Regel mehr Speicherplatz als die anderen Formate. Verlustfreie WebP-Bilder sind im Durchschnitt 26 % kleiner als PNGs.
Machen wir noch einen kurzen Test und konvertieren ein PNG-Bild in WebP. Unsere Originaldatei war 432 KB groß und schrumpfte durch eine einfache Konvertierung in WebP auf 244 KB.
JPEG vs. PNG vs. WebP
Kurz zusammengefasst: Wenn du den Lighthouse-Performance-Score deiner WordPress-Website verbessern willst, entscheide dich für WebP. So schneiden die drei Formate im Vergleich ab:
Welche Browser unterstützen WebP?
Im Jahr 2023 unterstützen alle gängigen Browser WebP. Dieses moderne Format wird zum Beispiel von Google Chrome, Safari, Firefox, Edge, dem Opera-Browser und weiteren Tools nativ unterstützt.
WebP-Bilder mit Fallback für ältere Browser anzeigen
Bilder sind entscheidend für eine hervorragende Nutzererfahrung, deshalb sollten sie jedem Besucher angezeigt werden, auch denen, die ältere Browserversionen verwenden. Wenn du auf Nummer sicher gehen willst, solltest du einen Fallback auf andere herkömmliche Formate wie PNG oder JPEG aktivieren.
So fügst du WebP-Bildern einen Fallback hinzu
- Du kannst deinem Bild das <picture>-Tag hinzufügen, um einen Fallback umzusetzen, falls dein Besucher eine alte Version verwendet. Browser mit WebP-Unterstützung werden „dog.webp“ anzeigen, ältere Browserversionen ohne WebP-Unterstützung dagegen auf das Element „dog.jpg“ zurückgreifen.
- Mit einem WordPress-Plugin wie Imagify, das es dir ermöglicht, deine Bilder in WebP zu konvertieren und die <picture>-Tags zu verwenden, um den Fallback für WebP-Bilder zu aktivieren.
So erstellst und nutzt du WebP-Bilder in WordPress
Seit WordPress 5.8 wird das WebP-Format von WordPress vollständig unterstützt. Lade deine Bilder einfach in deine Mediathek hoch und füge sie in deine Inhalte ein.
Die 4 besten Plugins zum Erstellen eines WebP-Bildes
Es ist nicht mehr nötig, eine Drittanbieter-Erweiterung zu installieren, um WebP-Bilder in WordPress hochzuladen, aber um deine vorhandenen Bilder in WebP zu konvertieren, brauchst du ein Plugin. Hier sind 4 WebP-Plugins für WordPress, mit denen du Bilder in WebP konvertieren kannst:
- Imagify: ein einfach zu bedienendes Plugin zur Bildkomprimierung, das die Konvertierung in WebP bietet. Es ist für rund 200 Bilder pro Monat kostenlos.
- WebP Converter for Media: konvertiert Dateien in den Standardformaten JPEG, PNG und GIF in das WebP-Format.
- WebP Express: fügt eine Codezeile hinzu, um Nutzern WebP-Bilder bereitzustellen.
- ShortPixel Image Optimizer: ein weiteres Plugin zur Bildoptimierung, das JPEG, PNG oder GIF in WebP und AVIF konvertiert.
So erstellst du ein WebP-Bild in WordPress
Der einfachste Weg, in WordPress ein WebP-Bild zu erstellen, ist ein Plugin wie Imagify. Alle deine Bilder lassen sich mit einem einzigen Klick in WebP konvertieren, und das zusammen mit der Bulk-Komprimierung.
- Lade deine JPEG-, PNG-, PDF- oder GIF-Dateien in deine WordPress-Mediathek hoch
- Gehe in deinem WordPress-Dashboard zu Einstellungen > Imagify > Registerkarte Optimierung
- Aktiviere die folgenden Kontrollkästchen: „Create WebP versions of images“ und „Display images in WebP format on the site“
Bonus: Wenn du WordPress nicht nutzt, kannst du auch Designsoftware wie Photoshop, Lightroom oder Sketch verwenden und deine Medien direkt als WebP exportieren:
Gib der Bildoptimierung einen zusätzlichen Schub
Neben der Bildkomprimierung und der WebP-Konvertierung ist Lazy Loading eine weitere Möglichkeit, deinen Besuchern optimierte Bilder bereitzustellen und die Ladegeschwindigkeit deiner Seite zu steigern. Ein Skript wie Lazy Load zu verwenden, bedeutet, dass der Browser nur die Bilder above the fold lädt (im Viewport des Nutzers).
Außerdem empfiehlt PageSpeed Insights in seinem Performance-Bericht „Nicht sichtbare Bilder aufschieben“, also Lazy Loading anzuwenden:
So wendest du Lazy Loading auf deine WebP-Bilder an
Der einfachste Weg, das Lazy-Loading-Skript auf deine WebP-Bilder anzuwenden, ist ein WordPress-Plugin wie WP Rocket. Um Lazy Loading umzusetzen, folge diesen zwei einfachen Schritten direkt im WordPress-Adminbereich:
- Gehe zu Einstellungen > WP Rocket > Registerkarte LazyLoad
- Aktiviere die Kontrollkästchen deiner Wahl: Bilder, CSS-Hintergrundbilder, iframes und Videos.
🏆 WP Rocket ist das erste Plugin, das Lazy Loading für CSS-Hintergrundbilder mit einem einzigen Klick bietet!
Schließlich kann PageSpeed Insights erkennen, ob WP Rocket auf deiner WordPress-Website installiert ist, und empfiehlt dir dann gegebenenfalls, die Funktion „LazyLoad“ zu aktivieren:
🚀 Möchtest du deine Web-Performance insgesamt verbessern? WP Rocket ist außerdem eines der besten Cache-Plugins für WordPress, das deine Datenbank und deinen Code optimiert und deine Core Web Vitals mit wenigen Klicks verbessert.
FAQ
Was ist eine WebP-Datei?
Eine WebP-Datei ist ein Bild im WebP-Format, einem von Google entwickelten Next-Gen-Format für das Web. WebP bietet eine überlegene verlustfreie und verlustbehaftete Komprimierung und erhält dabei die Bildqualität. Im Vergleich zu herkömmlichen JPEGs oder PNGs kannst du damit noch kleinere Dateigrößen erzielen, sodass die Seite schneller lädt.
Ist WebP kleiner als JPG?
In der Regel ja: Eine WebP-Datei ist deutlich kleiner als ein herkömmliches JPEG. Laut Google kann ein WebP-Bild mit verlustbehafteter Komprimierung 25 bis 34 % kleiner sein als eine vergleichbare JPEG-Datei. In unserem Test sank die Dateigröße eines JPEG-Bildes mit 3,7 MB nach der Konvertierung in WebP bei gleicher Qualität auf 1,3 MB.
WebP oder PNG: Welches Format ist kleiner?
Verlustfreie WebP-Bilder sind im Durchschnitt 26 % kleiner als PNGs. In unserem Test schrumpfte eine PNG-Datei mit 432 KB durch eine einfache Konvertierung in WebP auf 244 KB. PNGs werden vor allem für Webgrafiken ohne Hintergrund wie Logos und Illustrationen verwendet und belegen in der Regel mehr Speicherplatz als die anderen Formate.
Welche Browser unterstützen WebP?
Im Jahr 2023 unterstützen alle gängigen Browser WebP; nativ unterstützt wird das Format zum Beispiel von Google Chrome, Safari, Firefox, Edge und Opera. Wenn du auf Nummer sicher gehen willst, solltest du für Besucher mit älteren Browserversionen einen Fallback auf herkömmliche Formate wie PNG oder JPEG aktivieren. Das geht mit dem <picture>-Tag oder mit einem WordPress-Plugin wie Imagify.
Wie kann ich in WordPress JPG in WebP umwandeln?
Am einfachsten wandelst du JPG-Bilder in WordPress mit einem Plugin wie Imagify in WebP um. Seit WordPress 5.8 kannst du WebP-Bilder zwar ohne Drittanbieter-Erweiterung hochladen, doch um deine vorhandenen Bilder in WebP zu konvertieren, brauchst du ein Plugin. Mit Imagify lassen sich alle deine Bilder unter Einstellungen > Imagify > Optimierung mit einem einzigen Klick in WebP konvertieren. Weitere Plugins dafür sind zum Beispiel WebP Converter for Media, WebP Express und ShortPixel Image Optimizer.
Fazit
Deine Bilder in WordPress im WebP-Format bereitzustellen, ist eine einfache Möglichkeit, die Performance zu steigern. Dieses Next-Gen-Format hilft, deine Core Web Vitals zu verbessern, indem es deinen Besuchern kleinere Bilddateien ausliefert, ohne die Qualität zu beeinträchtigen!
WordPress und die gängigen Browser unterstützen WebP inzwischen, du musst dir also keine Sorgen um die Kompatibilität machen. Mit einem Tool wie Imagify oder WebP Converter for Media ist es einfacher denn je, deine Bilder direkt im WordPress-Dashboard in WebP zu konvertieren.
Wenn du noch einen Schritt weiter gehen willst, um deine Performance zu steigern und deine Bilder noch stärker zu optimieren (zum Beispiel mit Lazy Loading), dann probier WP Rocket aus. Es wendet bei der Aktivierung 80 % der Performance-Best-Practices an, und technische Kenntnisse sind nicht erforderlich. Außerdem gibt es eine 14-tägige Geld-zurück-Garantie, du gehst also kein Risiko ein, außer dass du deine Website schneller laden siehst!
