Wenn du deine WordPress Webseite beschleunigen möchtest, bietet die Suche nach Möglichkeiten, die Größe deiner Bilder zu reduzieren, einen großen Gewinn für deine Investition.

Im Durchschnitt machen die Bilder etwa die Hälfte der Dateigröße einer Webseite aus, so dass selbst kleine Verbesserungen große Auswirkungen haben können.

WebP ist ein modernes Bildformat, das dir dabei helfen kann, die Größe deiner Bilder zu reduzieren, ohne dass sie ihr Aussehen verändern. Wenn du lernst, wie man ein Bild ins WebP-Format konvertiert, kann es im Durchschnitt ohne erkennbaren Qualitätsverlust um ~25-35% verkleinert werden.

Darum werden wir in diesem Blogbeitrag tief in das Thema eintauchen!

Bereit? Dann lasst uns anfangen!

Was ist WebP?

Also… was ist eine WebP-Datei? Kurz gesagt, WebP ist ein Bildformat, das von Google entwickelt wurde. Du hast zum Beispiel Bildformate wie JPEG oder JPG und PNG, oder? Nun, WebP ist ein alternatives Dateiformat für Bilder.

WebP konzentriert sich darauf, die gleiche Bilddatei zu liefern, nur mit einer kleineren Dateigröße. Wenn du die Größe deiner Bilddateien reduzierst, kannst du den Besuchern deiner Webseite immer noch dasselbe Erlebnis bieten, aber deine Webseite wird schneller geladen.

In der WebP-Komprimierungsstudie von Google fand Google zum Beispiel heraus, dass eine WebP-Bilddatei im Durchschnitt…

Deshalb ist eine der vielen Empfehlungen, wenn du deine Webseite über PageSpeed Insights laufen lässt, Bilder in Formaten der nächsten Generation wie WebP zu veröffentlichen:

Google PageSpeed Insights schlägt vor, WebP-Bilder zu verwenden

Google PageSpeed Insights schlägt vor, WebP-Bilder zu verwenden

Wie also erreicht Googles WebP-Format diese Reduzierung der Dateigröße?

WebP unterstützt sowohl verlustbehaftete als auch verlustfreie Komprimierung, also hängt die genaue Reduzierung davon ab, ob du verlustbehaftete oder verlustfreie Komprimierung verwendest

Bei der verlustbehafteten WebP-Komprimierung verwendet WebP etwas, das „prädiktive Kodierung“ genannt wird, um die Dateigröße zu verringern. Bei der prädiktiven Kodierung werden die Werte benachbarter Pixel in einem Bild verwendet, um Werte vorherzusagen, und dann wird nur der Unterschied kodiert. Es basiert auf VP8-Keyframe-Kodierung.

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

Wenn du mehr über die WebP-Komprimierungstechniken im Detail lernen möchtest, ist dieser Artikel ein guter Ausgangspunkt.

Welche Webbrowser unterstützen WebP?

Damit WebP-Bilder funktionieren, muss der Webbrowser des Besuchers diese unterstützen. Leider hat die Browserunterstützung zwar stark zugenommen, aber die WebP-Kompatibilität ist immer noch nicht universell.

WebP-Bilder werden von beliebten Browsern unterstützt, wie zum Beispiel

Der bemerkenswerte Verweigerer ist jedoch Safari. Zum Zeitpunkt, an dem wir diesen Beitrag schreiben, unterstützen weder die Desktop- noch die Mobilversion von Safari WebP-Bilder. Apple hat 2016 kurz mit der WebP-Unterstützung für Safari experimentiert, aber seitdem hat es keinen weiteren Schub mehr gegeben.

Auch im Internet Explorer fehlt die WebP-Unterstützung (aber Edge unterstützt WebP, weil es auf Chromium basiert).

Insgesamt benutzen etwa 77 % der Internetnutzer einen Browser, der WebP unterstützt. Während es also sicherlich die Mehrheit unterstützt, sind diese 23% zu groß, um sie zu ignorieren (in unserem WordPress WebP-Tutorial weiter unten zeigen wir euch, wie man damit umgeht, damit alle eure Besucher ein tolles Erlebnis haben):

WebP-Support

WebP-Support

Größenvergleich WebP vs. JPG vs. PNG

Den Tests von Google zufolge sind WebP-Bilder:

Wenn du mehr über die Methodik von Google erfahren möchtest, findest du unten direkte Links zu den vollständigen Ergebnissen:

Beide Tests basieren auf über 11.000 Bildern:

Wie man WebP-Bilder in WordPress verwendet

Da nicht alle Browser WebP-Bilder unterstützen, kannst du nicht einfach WebP-Bilddateien in deine Mediathek hochladen und direkt in WordPress verwenden, wie du es mit JPEGs und PNGs kannst.

Wiederum 23% der Leute (einschließlich aller Safari-Benutzer) benutzen einen Webbrowser, der kein WebP unterstützt. Wenn du WebP-Bilder konvertierst und sie direkt in deinen Inhalten verwendest, könnten diese Besucher deine Bilder nicht sehen, was ihr Surf-Erlebnis ruinieren würde.

Keine Sorge, es gibt eine Lösung!

Anstatt WebP-Bilder direkt in WordPress hochzuladen, kannst du ein WordPress-Plugin verwenden, das deine Originalbilder in das WebP-Format konvertiert und auch das Originalbild als Fallback zur Verfügung stellt, falls der Browser eines Besuchers kein WebP unterstützt.

Wenn du zum Beispiel eine JPEG-Datei auf deine Webseite hochlädst, wird das Plugin dies tun:

Auf diese Weise kann jeder dein 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.

Info

Wenn du bei Kinsta als Host arbeitest, musst du dich an unseren Support wenden, damit wir eine Nginx-Regel für WebP-Cache-Buckets für einige dieser Plugins erstellen können.

ShortPixel

ShortPixel WordPress-Plugin

ShortPixel WordPress-Plugin

 

ShortPixel ist ein beliebtes Bildoptimierungs-Plugin für WordPress, das dir helfen kann, die Größe und Komprimierung der Bilder, die du auf deine Webseite hochlädst, automatisch zu ändern.

Als Teil seiner Funktionsliste kann ShortPixel dir auch dabei helfen, Bilder automatisch in WebP zu konvertieren und diese Bilder Browsern zur Verfügung zu stellen, die WebP unterstützen.

ShortPixel hat einen begrenzten kostenlosen Plan, mit dem du ~100 Bilder pro Monat kostenlos optimieren kannst. Danach beginnen kostenpflichtige Pläne 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 WordPress-Bildgröße, die du optimierst, als Credits. Wenn du also mehrere Bild-Thumbnailgrößen optimieren möchtest, ist es denkbar, dass ein Bild mehrere Credits benötigt. Es gibt keine Dateigrößenbeschränkungen für Bilder.

Du kannst deine ShortPixel-Credits über eine unbegrenzte Anzahl von Webseiten verteilen – es gibt keine Begrenzungen pro Webseite (und alle deine Webseiten können dasselbe ShortPixel-Konto verwenden).

Um ShortPixel für die Bereitstellung von WebP-Bildern in WordPress zu verwenden, musst du das Plugin von WordPress.org installieren und deinen API-Schlüssel hinzufügen (den du bekommst, wenn du dich für einen kostenlosen ShortPixel-Account registrierst).

Im Reiter „Allgemein“ kannst du grundlegende Einstellungen vornehmen, wie die Bildoptimierung funktioniert. Zum Beispiel, welche Kompressionsstufe verwendet werden soll und ob Bilder in der Größe verändert werden sollen oder nicht:

Wie man die Kompressionsstufe und die Bilddimensionen in ShortPixel einstellt

Wie man die Kompressionsstufe und die Bilddimensionen in ShortPixel einstellt

Um WebP-Bilder zu aktivieren, gehe auf die Registerkarte Erweitert und

  1. Markiere das Kästchen für WebP-Bilder
  2. Klicke das Kästchen an, um die WebP-Versionen bereitzustellen. (dies erscheint, nachdem du das erste Kästchen angekreuzt hast)
  3. Wähle den Radiobutton für Benutze die <PICTURE> Tag-Syntax (dies erscheint, nachdem du die vorherige Box angekreuzt hast)
  4. Lass die Standardauswahl nur über WordPress Hakenauswahl
Wie man WordPress WebP-Bilder in ShortPixel aktiviert

Wie man WordPress WebP-Bilder in ShortPixel aktiviert

Dann speichere deine Änderungen.

Wenn du bei Kinsta hostet, 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, der die Serverkonfiguration gerne für dich einrichtet.

Imagify

Imagify WordPress-Plugin

Imagify WordPress-Plugin

Imagify ist ein populäres Bildoptimierungs-Plugin vom selben Entwickler wie WP Rocket (das eines der wenigen Caching-Plugins ist, das mit Kinsta funktioniert).

Es kann die Bilder, die du auf deine WordPress Webseite hochlädst, automatisch komprimieren und in der Größe anpassen. Dann kann es dir auch helfen, sie in WebP zu konvertieren und WebP-Versionen für Besucher mit Browsern, die es unterstützen, bereitzustellen.

Was die Funktionen angeht, haben ShortPixel und Imagify viele Gemeinsamkeiten. Der größte Unterschied kommt, wenn man sich die Preise ansieht. Während ShortPixel auf der Grundlage von Bildern ohne Größenbeschränkung pro Bild berechnet wird, berechnet Imagify die Preise auf der Grundlage der Gesamtdateigröße, ohne Größenbeschränkung pro Bild.

Wenn du also viele große Bilder optimieren musst, könnte ShortPixel’s Ansatz billiger sein. Wenn du aber viele kleine Bilder optimieren musst, ist der Ansatz von Imagify vielleicht billiger.

Imagify hat eine begrenzte kostenlose Stufe, die 25 MB an Optimierungen pro Monat erlaubt. Danach beginnen bezahlte Pläne bei $4.99 pro Monat für bis zu 1 GB oder $9.99 für ein einmaliges Guthaben von 1 GB.

Bist du es leid, einen langsamen Host für deine WordPress-Seite zu haben? Wir bieten blitzschnelle Server und 24/7 Weltklasse-Support von WordPress-Experten.
Schau dir unsere Pläne an

Wie bei ShortPixel kannst du deine Kontolimits über eine unbegrenzte Anzahl von Webseiten verteilen.

Um Imagify zu benutzen, um WordPress WebP-Bilder auszuliefern, musst du das Plugin von WordPress.org installieren und deinen API-Schlüssel hinzufügen, um zu beginnen.

Sobald du das Plugin aktiviert hast, kannst du in den Allgemeinen Einstellungen deine Kompressionsstufe wählen.

Wie man die Kompressionsstufe in Imagify einstellt

Wie man die Kompressionsstufe in Imagify einstellt

Um WebP-Bilder zu aktivieren, scrolle nach unten zum Abschnitt „Optimierung“ und suche den Abschnitt „WebP-Format„:

  1. Aktiviere das Kästchen, um Webp-Versionen von Bildern zu erstellen
  2. Aktiviere das Kästchen, um Bilder im Webp-Format anzuzeigen…
  3. Wähle den Radiobutton, um <picture>Tags zu verwenden
  4. Wenn du bei Kinsta hostest und das Kinsta CDN benutzt, gib die URL deines Kinsta CDN in das Feld wenn du ein CDN benutzt (wir sagen dir unten, wie du die Kinsta CDN URL findest)
Wie man WordPress WebP-Bilder in Imagify aktiviert

Wie man WordPress WebP-Bilder in Imagify aktiviert

Wenn du das Kinsta CDN verwendest, kannst du deine CDN-URL finden, indem du deine Webseite im MyKinsta-Dashboard öffnest und in den Einstellungen der Webseite den Reiter Kinsta CDN besuchst:

Wie man Kinsta CDN URL findet

Wie man Kinsta CDN URL findet

Wie bei ShortPixel müsstest du, wenn du bei Kinsta als Host arbeitest, eine Nginx-Regel für WebP-Cache-Buckets erstellen (wende dich einfach an den Kinsta-Support).

Optimole

Optimole WordPress-Plugin

Optimole WordPress-Plugin

Optimole ist ein Bildoptimierungs-Plugin für WordPress, das ein wenig anders funktioniert als Imagify und ShortPixel. Optimole kann deine Bilder automatisch komprimieren und in der Größe verändern. Es hat aber noch zwei weitere bemerkenswerte Funktionen:

  1. Es kann deine Bilder über sein eigenes CDN (von der Amazon CloudFront) anbieten.
  2. Es bietet adaptive Bilder in Echtzeit, wobei Optimole für jeden Besucher das Bild in der optimalen Größe liefert. Zum Beispiel wird jemand, der auf einem kleinen Bildschirm surft, ein Bild mit geringerer Auflösung erhalten als jemand, der auf einem Retina-Bildschirm surft.

Dieser Ansatz ist ähnlich zu anderen Echtzeit-Optimierungs-/Manipulationsdiensten wie Cloudinary, imgix, KeyCDN Image Processing, etc.

Als Teil dieser Echtzeit-Bildoptimierung kann Optimole auch WebP-Bilder an Besucher mit Browsern liefern, die es unterstützen.

Optimole hat ein begrenztes Gratisangebot, mit dem Bilder an ca. 5.000 Besucher pro Monat ausgeliefert werden können. Danach beginnen kostenpflichtige Pläne bei $19 pro Monat für ~25.000 Besucher.

Um anzufangen, 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 sein CDN ausliefern. Die WebP-Unterstützung ist standardmäßig aktiviert, es ist also nicht nötig, es manuell zu aktivieren.

Um andere Einstellungen zu konfigurieren, wie Kompressionsstufen und Skalierungsverhalten, kannst du zu Media → Optimole → Einstellungen gehen:

Der Optimole-Einstellungsbereich - WordPress WebP-Bilder sind standardmäßig aktiviert

Der Optimole-Einstellungsbereich – WordPress WebP-Bilder sind standardmäßig aktiviert

Da Optimole die Lieferung deiner Bilder über sein eigenes CDN abwickelt, ist es nicht nötig, irgendwelche Nginx-Regeln aufzustellen, wenn du bei Kinsta hosten willst.

Erhöhe ⬆️ die Geschwindigkeit der Webseite, während du die Bildgröße ⬇️ verringerst. Lerne, wie du das WebP-Format auf deiner #WordPress Webseite 💥Click to Tweet

Zusammenfassung

Die Bilder deiner WordPress Webseite 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 schneller machen, ohne das Erlebnis deiner Besucher zu verändern.

WebP ist ein modernes Bildformat, das eine ~25%ige Reduzierung der Dateigröße im Vergleich zu vergleichenden JPEG- oder PNG-Dateien bieten kann.

Die meisten modernen Browser unterstützen WebP und etwa 77% der Internetnutzer haben einen Browser, der WebP unterstützt. Einige Browser, insbesondere Safari, bieten jedoch immer noch keine WebP-Unterstützung, so dass du nicht allen Besuchern WebP-Bilder zur Verfügung stellen kannst.

Um dieses Problem zu beheben, kannst du ein WordPress-Plugin verwenden, das Bilder in WebP konvertiert und Besuchern, deren Browser dieses Format unterstützt, WebP-Versionen zur Verfügung stellt, während Besuchern, deren Browser es nicht unterstützt, die Originalbilder zur Verfügung gestellt werden.

Drei Plugins, die dir dabei helfen können, sind:

Weitere Taktiken zur Optimierung von Bildern findest du in unserer vollständigen Anleitung zur Optimierung von Bildern für die Web-Performance.

Hast du Fragen über die Verwendung von WebP auf WordPress? Frag uns in den Kommentaren.


Wenn Dir dieser Artikel gefallen hat, dann wirst du Kinsta’s WordPress Hosting-Plattform lieben. Beschleunige deine Webseite und erhalte 24/7 Support von unserem erfahrenen WordPress-Team. Unsere Google Cloud basierte Infrastruktur konzentriert sich auf die Bereiche Auto-Scaling, Performance und Sicherheit. Lass uns dir den Kinsta-Unterschied zeigen! Schau Dir hier unsere Pakete an