So verwenden Sie WebP-Bilder in WordPress (Bilddateigröße um bis zu 35 % verkleinern)

Wenn Sie Ihre WordPress-Site beschleunigen möchten, bietet die Reduzierung der Dateigröße Ihrer Bilder eine erhebliche Rendite für Ihre Investition. Im Durchschnitt machen Bilder etwa die Hälfte der Dateigröße einer Webseite aus, sodass selbst geringfügige Verbesserungen zu gewaltigen Ergebnissen führen können. WebP kann Ihnen dabei enorm helfen!

WebP ist ein modernes Bildformat, mit dem Sie die Größe Ihrer Bilder reduzieren können, ohne ihr Aussehen zu verändern. Wenn Sie lernen, wie Sie ein Bild in WebP konvertieren, kann die Dateigröße im Durchschnitt um ca. 25-35 % ohne erkennbaren Qualitätsverlust verringert werden.

Die meisten modernen Browser und WordPress 5.8+ unterstützen WebP standardmäßig. In diesem Artikel tauchen wir tief in dieses aufregende neue Bildformat ein und zeigen Ihnen, wie Sie seine Großartigkeit nutzen können.

Bereit? Lass uns anfangen!

Was ist WebP?

Was ist also eine WebP-Datei? Kurz gesagt, WebP ist ein von Google entwickeltes Bildformat, um Bilder besser zu optimieren als (damals) gängige Bildformate. Sie haben beispielsweise Bildformate wie JPEG oder JPG und PNG.

Hinweis: Sehen Sie sich an, wie sich verschiedene Bilddateitypen auf die Geschwindigkeit Ihrer Website auswirken können.

WebP konzentriert sich darauf, dieselbe Bilddatei bereitzustellen, nur mit kleineren Dateigrößen. Indem Sie die Größe Ihrer Bilddateien reduzieren, können Sie den Besuchern Ihrer Website immer noch dasselbe Erlebnis bieten, aber Ihre Website wird schneller geladen.

Beispielsweise hat Google in der WebP-Komprimierungsstudie von Google herausgefunden, dass eine WebP-Bilddatei im Durchschnitt:

• 25-34 % kleiner als ein vergleichbares JPEG-Bild.
• 26 % kleiner als ein vergleichbares PNG-Bild.

Aus diesem Grund lautet eine der vielen Empfehlungen, wenn Sie Ihre Website über PageSpeed ​​Insights betreiben, Bilder in Next-Gen-Formaten wie WebP bereitzustellen :

Wie also erreicht das WebP-Format von Google diese Verringerung der Dateigröße?

Erstens unterstützt es verlustbehaftete und verlustfreie Komprimierung, sodass die genaue Reduzierung davon abhängt, ob Sie verlustbehaftete oder verlustfreie Komprimierung verwenden.

Bei verlustbehafteter Komprimierung verwendet WebP etwas, das als „prädiktive Codierung“ bezeichnet wird, um die Dateigröße zu verringern. Die prädiktive Codierung verwendet die Werte benachbarter Pixel in einem Bild, um Werte vorherzusagen, und codiert dann nur die Differenz. Es basiert auf der VP8-Keyframe-Codierung.

Lossless WebP verwendet viel kompliziertere Methoden, die vom WebP-Team entwickelt wurden.

Wenn Sie die WebP-Komprimierungstechniken im Detail kennenlernen möchten, ist dieser Artikel ein guter Ausgangspunkt.

Welche Webbrowser unterstützen WebP?

Damit WebP-Bilder funktionieren, muss der Webbrowser eines Besuchers sie unterstützen. Obwohl die Browserunterstützung stark zugenommen hat, ist die WebP-Kompatibilität leider immer noch nicht universell .

WebP-Bilder werden von gängigen Browsern unterstützt, wie z. B.:

• Chrome ( Desktop und Mobil )
• Firefox ( Desktop und Mobil )
• Microsoft Edge
• iOS und macOS Safari ( nur macOS 11 Big Sur und höher )
• Opera ( Desktop und Mobil )

Zum Zeitpunkt des Schreibens dieses Beitrags unterstützt Safari WebP-Bilder nur teilweise.

Internet Explorer fehlt auch die WebP-Unterstützung (Edge unterstützt WebP, da es auf Chromium basiert). Die IE-Nutzung ist jedoch auf weniger als 1 % aller Internetnutzer geschrumpft. Das ist ein Segen für alle im Web!

Insgesamt verwenden rund 95 % der Internetnutzer einen Browser, der WebP unterstützt. Obwohl es sicherlich mehrheitlich unterstützt wird, sind diese 5 % eine kleine Hürde, insbesondere wenn es sich um Safari-Benutzer mit älteren macOS-Versionen handelt. In unserem WordPress WebP-Tutorial unten zeigen wir Ihnen, wie Sie damit umgehen, damit alle Ihre Besucher ein großartiges Erlebnis haben.

Größenvergleich von WebP vs. JPG vs. PNG

Laut den Tests von Google sind WebP-Bilder:

• 25-34 % kleiner als vergleichbare JPEG-Bilder.
• 26 % kleiner als ähnliche PNG-Bilder.

Wenn Sie mehr über die Methodik von Google erfahren möchten, finden Sie unten direkte Links zu den vollständigen Ergebnissen:

• JPEG
• PNG

Beide Tests basieren auf über 11.000 Bildern, darunter:

• Das berühmte Lenna-Bild
• 24 Bilder aus der Kodak True Color Image Suite
• 100 Bilder von Tecnick.com
• Eine Zufallsstichprobe von über 11.000 Bildern aus der Google-Bildsuche

So verwenden Sie WebP-Bilder in WordPress

Ab WordPress 5.8 können Sie das WebP-Bildformat auf die gleiche Weise wie JPEG-, PNG- und GIF-Formate verwenden. Laden Sie einfach Ihre Bilder in Ihre Medienbibliothek hoch und fügen Sie sie in Ihre Inhalte ein. Da WordPress 5.8+ standardmäßig das WebP-Format unterstützt, müssen Sie keine Plugins von Drittanbietern installieren, um WebP-Bilder hochzuladen. Das sollte für die meisten Anwendungsfälle ausreichen.

Um sofort loszulegen, kannst du unsere Kurzanleitung zur Verwendung von WebP-Bildern in WordPress 5.8+ lesen. Wir empfehlen Ihnen, die Vorbehalte zur WebP-Unterstützung in WordPress durchzugehen.

Allerdings verwenden etwa 5 % der Benutzer (hauptsächlich Safari-Benutzer auf älterem macOS) einen Webbrowser, der WebP nicht unterstützt. Wenn Sie WebP-Bilder konvertieren und direkt in Ihren Inhalten verwenden, können diese Besucher Ihre Bilder nicht sehen, was ihr Surferlebnis ruinieren würde.

Außerdem ist das Generieren von WebP-Bildern nicht so einfach wie das Erhalten eines JPG/JPEG-Bildes, das das Standard-Bilddateiformat auf den meisten Kameras, Smartphones und Online-Bildbibliotheken ist. WordPress unterstützt (noch!) keine automatische Bildkonvertierung in das WebP-Format.

Ärgern Sie sich nicht! Es gibt eine Lösung.

Sie können ein WordPress-Plugin verwenden, das Ihre Originalbilder in das WebP-Format konvertiert und das Originalbild auch als Fallback bereitstellt, wenn der Browser eines Besuchers WebP nicht unterstützt.

Wenn Sie beispielsweise eine JPEG-Datei auf Ihre Website hochladen, wird das Plugin:

• Konvertieren Sie die JPEG-Datei in WebP und stellen Sie die WebP-Version für Chrome, Firefox, Edge usw. bereit.
• Zeigen Sie Besuchern, die mit Safari (auf älteren macOS-Versionen) und anderen Browsern surfen, die WebP nicht unterstützen, die ursprüngliche JPEG-Datei.

Auf diese Weise kann jeder Ihr Bild sehen und jeder bekommt die schnellstmögliche Erfahrung.

Im Folgenden gehen wir einige der besten WebP-WordPress-Plugins durch, die alle mit Kinsta und dem Kinsta-CDN funktionieren.

ShortPixel

ShortPixel ist ein beliebtes WordPress-Bildoptimierungs-Plugin, mit dem Sie die Größe und Komprimierung der Bilder, die Sie auf Ihre WordPress-Site hochladen, automatisch ändern können.

Als Teil seiner Funktionsliste kann ShortPixel Ihnen auch dabei helfen, Bilder automatisch in WebP zu konvertieren und diese Bilder Browsern bereitzustellen, die dies unterstützen.

ShortPixel hat einen begrenzten kostenlosen Plan, mit dem Sie ~ 100 Bilder pro Monat kostenlos optimieren können. Kostenpflichtige Pläne beginnen bei 4,99 $ pro Monat für bis zu 5.000 Bilder/Credits oder 9,99 $ einmalig für ein Paket mit 10.000 Credits.

ShortPixel zählt jede von Ihnen optimierte WordPress-Bildgröße als Credit. Wenn Sie also mehrere Thumbnail-Größen optimieren möchten, könnte ein Bild möglicherweise mehrere Credits verbrauchen. Es gibt keine Dateigrößenbeschränkungen für Bilder.

Sie können Ihr ShortPixel-Guthaben auf unbegrenzt viele Websites verteilen – es gibt keine Beschränkungen pro Website ( und alle Ihre Websites können dasselbe ShortPixel-Konto verwenden ).

Um ShortPixel zum Bereitstellen von WebP-Bildern auf WordPress zu verwenden, müssen Sie das Plugin von WordPress.org installieren und Ihren API-Schlüssel hinzufügen ( den Sie erhalten, indem Sie sich für ein kostenloses ShortPixel-Konto registrieren ).

Auf der Registerkarte Allgemein können Sie grundlegende Einstellungen zur Funktionsweise der Bildoptimierung vornehmen. Zum Beispiel, welche Komprimierungsstufe verwendet werden soll und ob die Bildgröße geändert werden soll oder nicht:

Um WebP-Bilder zu aktivieren, gehen Sie zur Registerkarte Erweitert und:

1. Aktivieren Sie das Kontrollkästchen für WebP-Bilder
2. Aktivieren Sie das Kontrollkästchen, um die WebP-Versionen bereitzustellen … (dies wird angezeigt, nachdem Sie das erste Kontrollkästchen aktiviert haben).
3. Wählen Sie das Optionsfeld für Verwenden der <BILD>-Tag-Syntax (dies wird angezeigt, nachdem Sie das vorherige Kontrollkästchen aktiviert haben).
4. Belassen Sie die Standardauswahl Nur über WordPress-Hooks

Speichern Sie dann Ihre Änderungen.

Wenn du bei Kinsta hostest, gibt dir ShortPixel eine Warnmeldung über die Konfiguration von Serverkonfigurationsdateien auf Nginx. Um diese Einstellungen zu konfigurieren, kannst du dich an den Kinsta-Support wenden, und wir richten die Serverkonfiguration gerne für dich ein.

Stellen Sie sich vor

Imagify ist ein beliebtes Bildoptimierungs-Plugin vom selben Entwickler wie WP Rocket (eines der wenigen Caching-Plugins, die mit Kinsta funktionieren).

Es kann die Bilder, die Sie auf Ihre WordPress-Site hochladen, automatisch komprimieren und in der Größe ändern. Dann kann es Ihnen auch dabei helfen, sie in WebP zu konvertieren und diese Versionen Besuchern mit Browsern bereitzustellen, die dies unterstützen.

In Bezug auf die Funktionen haben ShortPixel und Imagify viele Gemeinsamkeiten. Der größte Unterschied ergibt sich, wenn Sie sich die Preise ansehen. Während ShortPixel Ihnen basierend auf Bildern ohne Größenbeschränkung pro Bild Gebühren berechnet, berechnet Ihnen Imagify basierend auf der Gesamtdateigröße ohne Bildbeschränkung.

Wenn Sie also viele große Bilder optimieren müssen, ist der Ansatz von ShortPixel möglicherweise günstiger. Wenn Sie jedoch viele kleine Bilder optimieren müssen, ist der Ansatz von Imagify möglicherweise günstiger.

Imagify hat ein begrenztes kostenloses Kontingent, das 25 MB Optimierungen pro Monat ermöglicht. Danach beginnen kostenpflichtige Pläne bei 4,99 $ pro Monat für bis zu 1 GB oder 9,99 $ für ein einmaliges Guthaben von 1 GB.

Wie bei ShortPixel können Sie Ihre Kontolimits auf unbegrenzt viele Websites verteilen.

Um Imagify zum Bereitstellen von WordPress WebP-Bildern zu verwenden, müssen Sie das Plugin von WordPress.org installieren und Ihren API-Schlüssel hinzufügen, um loszulegen.

Sobald Sie das Plug-in aktiviert haben, können Sie im Feld „ Allgemeine Einstellungen “ Ihre Komprimierungsstufe auswählen.

Um WebP-Bilder zu aktivieren, scrollen Sie nach unten zum Abschnitt Optimierung und suchen Sie den Abschnitt WebP-Format :

1. Aktivieren Sie das Kontrollkästchen zum Erstellen von Webp-Versionen von Bildern
2. Aktivieren Sie das Kontrollkästchen Bilder im Webp-Format anzeigen…
3. Wählen Sie das Optionsfeld aus, um <Bild>-Tags zu verwenden

Wie bei ShortPixel musst du, wenn du bei Kinsta hostest, eine Nginx-Regel für WebP-Cache-Buckets erstellen (wende dich an den Kinsta-Support).

Optimol

Optimole ist ein WordPress-Plugin zur Bildoptimierung, das etwas anders funktioniert als Imagify und ShortPixel. Optimole kann Ihre Bilder automatisch komprimieren und ihre Größe ändern. Es hat jedoch auch zwei andere bemerkenswerte Eigenschaften:

1. Es kann Ihre Bilder über sein CDN (powered by Amazon CloudFront) bereitstellen.
2. Es bietet adaptive Bilder in Echtzeit, wobei Optimole jedem Besucher das Bild in optimaler Größe liefert. Beispielsweise erhält jemand, der auf einem kleinen Bildschirm surft, ein Bild mit niedrigerer Auflösung als jemand, der auf einem Retina-Bildschirm surft.

Dieser Ansatz ähnelt anderen Echtzeit-Optimierungs-/Manipulationsdiensten wie Cloudinary, imgix, KeyCDN Image Processing usw.

Optimole kann im Rahmen dieser Echtzeit-Bildoptimierung auch WebP-Bilder an Besucher mit Browsern liefern, die dies unterstützen.

Optimole hat einen begrenzten kostenlosen Plan, der die Bereitstellung von Bildern für etwa 5.000 Besucher pro Monat bewältigen kann. Danach beginnen kostenpflichtige Pläne bei 19 $ pro Monat für ~25.000 Besucher.

Um zu beginnen, müssen Sie das Plugin von WordPress.org installieren und es mit einem API-Schlüssel aktivieren ( den Sie erhalten, indem Sie sich für ein kostenloses Optimole-Konto registrieren ).

Sobald Sie dies getan haben, beginnt Optimole automatisch mit der Optimierung Ihrer Bilder und stellt sie über sein CDN bereit. Die WebP-Unterstützung ist standardmäßig aktiviert, sodass Sie sie nicht manuell aktivieren müssen.

Um andere Einstellungen wie Komprimierungsstufen und Skalierungsverhalten zu konfigurieren, können Sie zu Medien → Optimole → Einstellungen gehen:

Da Optimole die Bereitstellung Ihrer Bilder über sein CDN übernimmt, müssen Sie keine Nginx-Regeln einrichten, wenn Sie bei Kinsta hosten.

Zusammenfassung

Die Bilder Ihrer WordPress-Site machen einen großen Teil der Dateigröße einer durchschnittlichen Seite aus. Wenn Sie Möglichkeiten finden, die Größe Ihrer Bilder zu reduzieren, können Sie Ihre Website beschleunigen, ohne die Benutzererfahrung zu beeinträchtigen. WebP ist ein modernes Bildformat, das genau das tut, indem es eine ~25%ige Reduzierung der Dateigröße im Vergleich zu vergleichbaren JPEG- oder PNG-Dateien bietet.

Rund 95 % der Internetnutzer verwenden bereits einen Browser, der WebP unterstützt. Versionen von WordPress 5.8+ unterstützen jetzt auch WebP. Es gibt also keinen Grund, warum Sie es nicht verwenden sollten.

Eine Minderheit von Browsern, insbesondere Safari auf älteren macOS-Versionen, bietet jedoch immer noch keine WebP-Unterstützung. Daher können Sie WebP-Bilder noch nicht allen Besuchern bereitstellen. Um dieses Problem zu beheben, können Sie ein WordPress-Plugin verwenden, das Bilder in WebP konvertiert und WebP-Versionen für Besucher bereitstellt, deren Browser dies unterstützen, während die Originalbilder für Besucher verwendet werden, deren Browser dies nicht tun.

Weitere Taktiken zum Optimieren von Bildern finden Sie in unserem vollständigen Leitfaden zum Optimieren von Bildern für die Webleistung.

Wenn Sie Fragen zur Verwendung von WebP auf WordPress haben, stellen Sie uns diese bitte in den Kommentaren unten!