Wenn du deine WordPress-Seite beschleunigen willst, bietet die Verringerung der Dateigröße deiner Bilder eine erhebliche Rendite für deine Investition. Im Durchschnitt machen Bilder etwa die Hälfte der Dateigröße einer Webseite aus, also können selbst kleine Verbesserungen enorme Ergebnisse bringen. WebP kann dir dabei immens helfen!
WebP ist ein modernes Bildformat, das dir helfen kann, die Größe deiner Bilder zu reduzieren, ohne ihr Aussehen zu verändern. Wenn du lernst, wie man ein Bild in WebP konvertiert, kann die Dateigröße im Durchschnitt um ~25-35% schrumpfen; ohne erkennbaren Qualitätsverlust.
Die meisten modernen Browser und WordPress 5.8+ unterstützen WebP von Haus aus. In diesem Artikel werden wir tief in dieses aufregende neue Bildformat eintauchen und dir zeigen, wie du seine Vorzüge nutzen kannst.
Bist du bereit? Dann lass uns loslegen!
Was ist WebP?
Also, was ist eine WebP Datei? Kurz gesagt ist WebP ein Bildformat, das von Google entwickelt wurde, um Bilder besser zu optimieren als gängige Bildformate (zu dieser Zeit). Du hast zum Beispiel Bildformate wie JPEG oder JPG und PNG.
Hinweis: Sieh dir an, wie sich unterschiedliche Bilddateitypen auf die Geschwindigkeit deiner Webseite auswirken können.
WebP konzentriert sich darauf, die gleiche Bilddatei zu liefern, nur mit kleineren Dateigrößen. Indem du die Größe deiner Bilddateien reduzierst, kannst du den Besuchern deiner Webseite immer noch das gleiche Erlebnis bieten, aber deine Webseite wird schneller geladen.
In Googles WebP-Kompressionsstudie hat Google zum Beispiel herausgefunden, dass eine WebP-Bilddatei im Durchschnitt:
- 25-34% kleiner ist als ein vergleichbares JPEG-Bild.
- 26% kleiner als ein vergleichbares PNG-Bild.
Das ist der Grund, warum du deine Webseite durch PageSpeed Insights laufen lässt und eine der vielen Empfehlungen ist, Bilder in Next-Gen-Formaten wie WebP zu verwenden:
Wie erreicht das WebP-Format von Google diese Verringerung der Dateigröße?
Erstens unterstützt es verlustbehaftete und verlustfreie Komprimierung. Die genaue Reduzierung hängt also davon ab, ob du verlustbehaftete oder verlustfreie Komprimierung verwendest.
Bei der verlustbehafteten Komprimierung verwendet WebP eine sogenannte „prädiktive Kodierung“, um die Dateigröße zu verringern. Predictive Coding nutzt die Werte von benachbarten Pixeln in einem Bild, um Werte vorherzusagen und kodiert dann nur die Differenz. Es basiert auf dem VP8 Key Frame Encoding.
Lossless WebP verwendet eine viel kompliziertere Reihe von Methoden, die vom WebP Team entwickelt wurden.
Wenn du die WebP-Kompressionsverfahren im Detail kennenlernen möchtest, ist dieser Artikel ein guter Ausgangspunkt.
Welche Webbrowser unterstützen WebP?
Damit WebP-Bilder funktionieren, muss der Webbrowser des Besuchers sie unterstützen. Leider ist die WebP-Kompatibilität immer noch nicht überall gegeben, obwohl die Browserunterstützung stark gewachsen ist.
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 später)
- Opera (Desktop und mobil)
Zu dem Zeitpunkt, zu dem wir diesen Beitrag schreiben, unterstützt Safari WebP-Bilder nur teilweise.
Dem Internet Explorer fehlt ebenfalls die WebP-Unterstützung (aber Edge unterstützt WebP, da es auf Chromium basiert). Allerdings ist die Nutzung des IE auf weniger als 1% der gesamten Internetnutzer geschrumpft. Das ist ein Segen für alle im Web!
Insgesamt nutzen etwa 95% der Internetnutzer einen Browser, der WebP unterstützt. Während es also sicherlich eine mehrheitliche Unterstützung hat, sind diese 5% eine kleine Hürde, vor allem wenn es sich um Safari-Nutzer auf älteren macOS-Versionen handelt. In unserem WordPress WebP-Tutorial zeigen wir dir, wie du damit umgehst, damit alle deine Besucher ein tolles Erlebnis haben.
Größenvergleich zwischen WebP vs JPG vs PNG
Laut Googles Tests sind WebP-Bilder:
- 25-34% kleiner als vergleichbare JPEG-Bilder.
- 26% kleiner als vergleichbare PNG-Bilder.
Wenn du mehr über Googles Methodik erfahren möchtest, findest du unten direkte Links zu den vollständigen Ergebnissen:
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 zufällige Auswahl von 11.000+ Bildern aus der Google Bildersuche
Wie man WebP-Bilder in WordPress verwendet
Beginnend mit WordPress 5.8, kannst du das WebP-Bildformat auf die gleiche Weise wie JPEG, PNG und GIF verwenden. Lade deine Bilder einfach in deine Mediathek hoch und füge sie in deinen Inhalt ein. Da WordPress 5.8+ das WebP-Format standardmäßig unterstützt, musst du keine Drittanbieter-Plugins installieren, um WebP-Bilder hochzuladen. Das sollte für die meisten gängigen Anwendungsfälle ausreichen.
Um sofort loszulegen, kannst du dir unsere Kurzanleitung zur Verwendung von WebP-Bildern in WordPress 5.8+ ansehen. Wir empfehlen dir, die Vorbehalte gegen die WebP-Unterstützung in WordPress durchzugehen.
Etwa 5% der Nutzer (hauptsächlich Safari-Nutzer auf älteren macOS-Systemen) verwenden jedoch einen Webbrowser, der WebP nicht unterstützt. Wenn du WebP-Bilder konvertierst und sie direkt in deinem Content verwendest, können diese Besucher deine Bilder nicht sehen, was ihr Browsing-Erlebnis ruinieren würde.
Außerdem ist die Erstellung von WebP-Bildern nicht so einfach wie die eines JPG/JPEG-Bildes, welches das Standard-Bildformat der meisten Kameras, Smartphones und Online-Bildbibliotheken ist. WordPress unterstützt (noch!) keine automatische Conversion von Bildern in das WebP-Format.
Mach dir keine Sorgen! Es gibt eine Lösung.
Du kannst ein WordPress-Plugin verwenden, das deine Originalbilder in das WebP-Format konvertiert und außerdem das Originalbild als Fallback bereitstellt, wenn der Browser eines Besuchers WebP nicht unterstützt.
Wenn du zum Beispiel eine JPEG-Datei auf deine Webseite hochlädst, wird das Plugin:
- Die JPEG-Datei in WebP umwandeln und die WebP-Version für Chrome, Firefox, Edge, etc. bereitstellen.
- Die originale JPEG-Datei für Besucher anzeigen, die mit Safari (auf älteren macOS-Versionen) und anderen Browsern, die WebP nicht unterstützen, surfen.
Auf diese Weise kann jeder dein Bild sehen, und jeder bekommt die schnellstmögliche Erfahrung.
Im Folgenden stellen wir dir einige der besten WebP-Plugins für WordPress vor, die alle mit Kinsta und dem Kinsta CDN funktionieren.
Kinsta’s Bildoptimierungsfunktion
Bei der ersten Funktion handelt es sich nicht um ein Plugin, sondern um eine integrierte Funktion: Kinsta’s Bildoptimierung.
Diese Funktion, auf die du über das Dashboard von Kinsta, MyKinsta, zugreifen kannst, erstellt automatisch optimierte WebP-Kopien der Originalbilder deiner Seite und stellt deinen Besuchern dann die kleinere der beiden Bilddateien zur Verfügung.
Die Bildoptimierung sorgt dafür, dass immer die kleinstmögliche Datei abgerufen wird, und verkürzt so die Ladezeiten, was sowohl deine SEO-Ergebnisse als auch die Nutzererfahrung erheblich verbessern kann. Die Funktion nutzt direkt das blitzschnelle CDN von Kinsta, um die Dateien noch schneller auszuliefern.
Seitenbetreiber können je nach Bedarf zwischen verlustbehafteter und verlustfreier Komprimierung für ihre WebP-Bilder wählen. Die Optimierung kann auch nach Belieben ein- oder ausgeschaltet werden, wenn du etwas testen musst.
Die Bildoptimierungsfunktion ist für alle Kinsta-Kunden kostenlos. So aktivierst du sie:
- Lade deine Bilder in deine von Kinsta gehostete WordPress-Mediathek hoch.
- Melde dich in deinem MyKinsta-Dashboard an.
- Navigiere zu WordPress-Seiten > Seitenname > CDN.
- Klicke auf die Schaltfläche Einstellungen unter dem Abschnitt Bildoptimierung.
- Wähle zwischen verlustfreier und verlustbehafteter Komprimierung und klicke dann auf Einstellungen speichern.
Wenn du noch nicht auf der Kinsta-Plattform bist, kannst du die Funktion selbst kostenlos ausprobieren, indem du eine Demo anmeldest.
Verlustfreie vs. verlustbehaftete Komprimierung
Du kannst zwischen verlustfreier und verlustbehafteter Komprimierung für deine Dateien wählen. Obwohl beide Methoden deine Bilddateien komprimieren und ihre Metadaten entfernen, gibt es einen großen Unterschied zwischen ihnen:
- Verlustfreie Bildoptimierung: Die verlustfreie Bildkomprimierung hat keinen Einfluss auf die Qualität deiner Bilder. Du solltest diese Option wählen, wenn dir die Bildqualität wichtiger ist als die Geschwindigkeit.
- Verlustbehaftete Bildoptimierung: Verlustbehaftete Bildkomprimierung kann die Qualität deiner Bilder beeinträchtigen. Wähle diese Option, wenn dir die Geschwindigkeit wichtiger ist als die Bildqualität.
Als Nächstes werden wir uns einige installierbare WordPress-Plugins zur Optimierung ansehen.
ShortPixel
ShortPixel ist ein beliebtes WordPress Plugin zur Bildoptimierung, das dir helfen kann, die Größe der Bilder, die du auf deine Webseite hochlädst, automatisch zu ändern und zu komprimieren.
Als Teil der Feature-Liste kann ShortPixel dir auch dabei helfen, Bilder automatisch in WebP zu konvertieren und diese Bilder an Browser zu senden, die dies unterstützen.
ShortPixel zählt jede WordPress Bildgröße, die du optimierst, als einen Credit. Wenn du also mehrere Thumbnail-Größen optimieren willst, kann ein Bild durchaus mehrere Credits verbrauchen. Es gibt keine Dateigrößenbegrenzung für Bilder.
Du kannst deine ShortPixel-Credits auf beliebig viele Webseiten verteilen – es gibt keine Beschränkungen pro Webseite (und alle deine Webseiten können denselben ShortPixel-Account nutzen).
Um ShortPixel für die Bereitstellung von WebP-Bildern in WordPress zu nutzen, musst du das Plugin von WordPress.org installieren und deinen API-Schlüssel hinzufügen (den du erhältst, wenn du dich für ein kostenloses ShortPixel-Konto registrierst).
Im Reiter Allgemein kannst du grundlegende Einstellungen vornehmen, wie die Bildoptimierung funktioniert. Zum Beispiel, welche Komprimierungsstufe verwendet werden soll und ob die Größe der Bilder angepasst werden soll oder nicht:
Um WebP-Bilder zu aktivieren, gehe auf den Reiter Erweitert und:
- Markiere das Kästchen für WebP-Bilder
- Markiere das Kästchen für Deliver the WebP versions… (dies erscheint, nachdem du das erste Kästchen markiert hast)
- Aktiviere das Kontrollkästchen für Using the <PICTURE> tag syntax (dies erscheint, nachdem du das vorherige Kästchen markiert hast)
- Belasse die Standardauswahl Only via WordPress hooks
Dann speichere deine Änderungen.
Wenn du bei Kinsta hostest, wird ShortPixel dir eine Warnmeldung über die Konfiguration der Serverkonfigurationsdateien auf Nginx geben. Um diese Einstellungen zu konfigurieren, kannst du dich an den Kinsta-Support wenden, und wir werden die Serverkonfiguration gerne für dich einrichten.
Imagify
Imagify ist ein beliebtes Plugin zur Bildoptimierung vom gleichen Entwickler wie WP Rocket.
Es kann die Bilder, die du auf deine WordPress-Seite hochlädst, automatisch komprimieren und in der Größe anpassen. Dann kann es dir auch helfen, sie in WebP zu konvertieren und diese Versionen den Besuchern mit Browsern, die dies unterstützen, zur Verfügung zu stellen.
Was die Funktionen angeht, haben ShortPixel und Imagify viele Gemeinsamkeiten. Der größte Unterschied liegt in der Preisgestaltung. Während ShortPixel auf Basis der Bilder abrechnet, ohne Größenbeschränkung pro Bild, rechnet Imagify auf Basis der gesamten Dateigröße ab, ohne Bildbeschränkung.
Wenn du also viele große Bilder optimieren musst, ist der Ansatz von ShortPixel vielleicht günstiger. Aber wenn du viele kleine Bilder optimieren musst, ist Imagify vielleicht erschwinglicher.
Imagify hat eine begrenzte kostenlose Version, die 25 MB an Optimierungen pro Monat erlaubt. Danach beginnen die kostenpflichtigen 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 kannst du dein Kontolimit auf unbegrenzte Webseiten verteilen.
Um Imagify für die Bereitstellung von WordPress WebP-Bildern zu nutzen, musst du das Plugin von WordPress.org installieren und deinen API-Schlüssel hinzufügen, um loszulegen.
Sobald du das Plugin aktiviert hast, kannst du in den allgemeinen Einstellungen deine Komprimierungsstufe wählen.
Um WebP-Bilder zu aktivieren, scrolle runter zum Abschnitt Optimierung und gehe zum Abschnitt WebP-Format:
- Aktiviere das Kästchen, um Webp-Versionen von Bildern zu erstellen.
- Aktiviere das Kästchen, um Bilder im WebP-Format anzuzeigen…
- Wähle den Radiobutton, um<picture> Tags zu verwenden
Wenn du bei Kinsta hostest, musst du wie bei ShortPixel eine Nginx-Regel für WebP-Cache-Buckets erstellen (wende dich an den Kinsta-Support).
Optimole
Optimole ist ein WordPress Plugin zur Bildoptimierung, das ein wenig anders funktioniert als Imagify und ShortPixel. Optimole kann deine Bilder automatisch komprimieren und die Größe ändern. Allerdings hat es auch zwei andere bemerkenswerte Funktionen:
- Es kann deine Bilder über sein CDN (powered by Amazon CloudFront) bereitstellen.
- Es bietet adaptive Bilder in Echtzeit, wobei Optimole für jeden Besucher das Bild in der optimalen Größe ausliefert. Zum Beispiel wird jemand, der auf einem kleinen Bildschirm surft, ein niedriger aufgelöstes Bild erhalten als jemand, der auf einem Retina-Bildschirm surft.
Dieser Ansatz ist vergleichbar mit anderen Echtzeit-Optimierungs-/Bearbeitungsdiensten wie Cloudinary, imgix, KeyCDN Image Processing, etc.
Optimole kann auch WebP-Bilder an Besucher mit Browsern ausliefern, die dies als Teil dieser Echtzeit-Bildoptimierung unterstützen.
Optimole hat einen begrenzt kostenlosen Plan, der die Auslieferung von Bildern an ca. 5.000 Besucher pro Monat ermöglicht. Danach beginnen die kostenpflichtigen Pläne bei $19 pro Monat für ~25.000 Besucher.
Um loszulegen, musst du das Plugin von WordPress.org installieren und es mit einem API-Schlüssel aktivieren (den du bekommst, wenn du dich für einen kostenlosen Optimole-Account registrierst).
Sobald du das getan hast, wird Optimole automatisch deine Bilder optimieren und sie über das CDN ausliefern. Die WebP-Unterstützung ist standardmäßig aktiviert, du musst sie also nicht manuell einschalten.
Um andere Einstellungen zu konfigurieren, wie z.B. Kompressionsstufen und Skalierungsverhalten, kannst du zu Medien → Optimole → Einstellungen gehen:
Da Optimole die Auslieferung deiner Bilder über sein CDN abwickelt, musst du keine Nginx-Regeln einrichten, wenn du bei Kinsta hostest.
Zusammenfassung
Die Bilder deiner WordPress-Seite machen einen großen Teil der Dateigröße einer durchschnittlichen Seite aus. Wenn du Wege findest, die Größe deiner Bilder zu reduzieren, kannst du deine Webseite beschleunigen, ohne das Nutzererlebnis zu beeinträchtigen. WebP ist ein modernes Bildformat, das genau das tut, indem es eine ~25%ige Reduzierung der Dateigröße gegenüber vergleichbaren JPEG oder PNG Dateien bietet.
Rund 95% der Internetnutzer verwenden bereits einen Browser, der WebP unterstützt. Auch WordPress 5.8+ Versionen unterstützen WebP nun von Haus aus. Es gibt also keinen Grund, warum du es nicht nutzen solltest.
Eine Minderheit von Browsern, vor allem Safari auf älteren macOS-Versionen, bietet jedoch immer noch keine WebP-Unterstützung. Daher kannst du WebP-Bilder noch nicht allen Besuchern anbieten. Um dieses Problem zu lösen, kannst du ein WordPress-Plugin verwenden, das Bilder in WebP konvertiert und WebP-Versionen an Besucher ausliefert, deren Browser dies unterstützen, während du die Originalbilder für Besucher verwendest, deren Browser dies nicht unterstützen.
Für weitere Taktiken zur Optimierung von Bildern, schau dir unseren vollständigen Leitfaden zur Optimierung von Bildern für die Web-Performance an. Und vergiss nicht, dass Kinsta-Kunden automatisch komprimierte WebP-Bilder erzeugen können, ohne dass dies Speicherplatz kostet, indem sie die kostenlose, integrierte Bildoptimierungsfunktion von Kinsta nutzen.
Wenn du Fragen zur Verwendung von WebP in WordPress hast, frag uns bitte in den Kommentaren unten!
Salman Ravoof ist ein autodidaktischer Webentwickler, Autor, Kreativer und ein großer Bewunderer von Free and Open Source Software (FOSS). Neben Technik begeistert er sich für Wissenschaft, Philosophie, Fotografie, Kunst, Katzen und Essen. Erfahre mehr über ihn auf seiner Website und trete mit Salman auf X in Kontakt.
Schreibe einen Kommentar