WebP Optimized Images für Magento 2

WebP ist ein Bildformat, das erstmals im Jahr 2010 veröffentlicht wurde. Es wird derzeit von Google entwickelt und beworben.
WebP ist eine Alternative zu herkömmlichen Bildformaten wie JPG oder PNG. WebP verwendet sowohl verlustbehaftete als auch verlustfreie Komprimierung und verspricht kleinere Dateigrößen als JPG oder PNG.
WebP ist jedoch kein vollständiger Ersatz für JPG / PNG-Bilddateien. Da derzeit noch nicht alle Browser WebP unterstützen, müssen Websites neben WebP auch alte Bildtypen bereithalten und WebP nur für Besucher bereitstellen, die einen Browser verwenden, der das neue Bildformat anzeigen kann.

WebP ermöglicht kleinere Dateigrößen im Vergleich zu JPG oder PNG bei gleichbleibender Qualität oder nur minimalem Qualitätsverlust.
Da Websites und insbesondere Online-Shops in der Regel viele Bilder verwenden, machen Bilder den größten Teil der Daten aus die auf einer Website heruntergeladen werden müssen.
Daher bedeutet das Verringern der Dateigröße von Bildern ein schnelleres Laden und einen geringeren Bandbreitenverbrauch von Websites.
Insbesondere, aber nicht nur Benutzer mit mobilen Geräten oder langsamer Internetverbindung, profitieren in hohem Maße von schnelleren Ladezeiten bei Verwendung von WebP-Bildern.

Der Prozentsatz, wie viel kleiner WebP-Bilder im vergleich zu JPG und PNG sein können, hängt stark vom Einzelfall ab. Z. B. Welche Art von Bildern haben Sie, wie stark sind Ihre JPG/PNG-Dateien bereits durch verlustbehaftete/verlustfreie Komprimierungstechniken optimiert? Welche Qualitätsanforderungen werden an Sie gestellt? Laut Google können mit WebP folgende Dateigrößenreduzierungen realisiert werden:

Verlustfreie WebP-Bilder sind im Vergleich zu PNGs 26% kleiner. WebP-verlustbehaftete Bilder sind 25-34% kleiner als vergleichbare JPEG-Bilder bei SSIM-Qualitätsindex

und

Lossless WebP unterstützt Transparenz (auch als Alpha-Kanal bezeichnet) zu einem Preis von nur 22% zusätzlichen Bytes. In Fällen, in denen eine verlustbehaftete RGB-Komprimierung akzeptabel ist, unterstützt lossy WebP auch Transparenz und bietet im Vergleich zu PNG in der Regel eine dreimal kleinere Dateigröße.

(source)

Mit unserer eigenen Studie, die auf Magento Luma-Beispielbildern basiert, haben wir jedoch festgestellt, dass viel höhere Einsparungen und eine Reduzierung der Dateigrößen um bis zu 75% und mehr bei guter Bildqualität erzielt werden können - siehe Grafik und Tabelle oben.

Ja, WebP bietet dieselbe Qualität wie JPG oder PNG.
Bei Bildern, die auf Websites verwendet werden, ist jedoch ein ausgewogenes Verhältnis zwischen Dateigröße und Qualität von Bedeutung. Oder mit anderen Worten, eine positive Benutzererfahrung in Bezug auf sowohl schnelle Ladezeiten als auch überzeugende, schön anzuschauende Bilder.
WebP bietet genau das, in Abhängigkeit von den Originalbildern: Eine höhere Komprimierungsrate kann zu einem enormen Rückgang der Dateigröße führen, jedoch nur zu einem geringfügigen, für das menschliche Auge kaum wahrnehmbaren Qualitätsverlust.
Einen Eindruck davon, wie sich unterschiedliche Komprimierungsraten auf die Dateigröße und die Qualität auswirken, erhalten Sie in unserem obigen Qualitätsvergleich WebP vs. JPG.
Können Sie den Qualitätsunterschied erkennen?

Mit WebP können Sie Bilder auf Ihrer Website mit kleineren Dateigrößen speichern. Kleinere Dateigrößen bedeuten schnellere Ladezeiten und ein besseres Nutzererlebnis.
Sie möchten, dass Ihre Website auch auf Mobilgeräten schnell geladen wird, selbst für Kunden, die langsame Verbindungen mit geringer Bandbreite verwenden?
WebP ist Ihre Wahl, um genau das zu erreichen.
Pagespeed ist wichtig und jeder liebt schnelle Websites und Onlineshops, oder? Natürlich liebt auch Onkel Google schnelle Websites. Sie möchten, dass der Google-Bot Ihre Website mag, hohe Punktzahlen bei Google Page Speed Insight und Lighthouse Audits erzielen?
Genau darum geht es bei WebP. Alles dreht sich um Geschwindigkeit und Leistung von Websites. Aus diesem Grund empfiehlt und fördert Google WebP und aus diesem Grund sollte es auf jeder Website verwendet werden.

Die Browserabdeckung für WebP beträgt inzwischen fast 100 %.

Siehe https://caniuse.com

Nein, Magento unterstützt WebP standardmässig nicht. Benutzerdefinierte Funktionen für die Konvertierung von JPG / PNG Dateien in WebP und die Bereitstellung von WebP Dateien für Kunden, die kompatible Browser verwenden, müssen hinzugefügt werden. Am einfachsten geht das mit einer Erweiterung wie JaJuMa WebP Optimized Images-Extension für Magento 2, die diese Funktionen sowie weitere Optionen für Benutzerfreundlichkeit und maximale Kompatibilität für Ihren Magento-Shop bietet.

Der beste und schnellste Weg, um WebP-Bilder zu Ihrem Magento-Shop hinzuzufügen, ist die Verwendung einer Erweiterung wie
JaJuMa WebP Optimized Images Extension für Magento 2
Die Erweiterung konvertiert Ihre vorhandene Bilder automatisch. Unterstützt 3 Konvertierungstools für maximale Kompatibilität, läuft zu 100% auf Ihrem Server ohne wiederkehrende Kosten oder zusätzliche Abhängigkeiten für Sie.

Damit die Erweiterung ordnungsgemäß funktioniert, muss mindestens eines der unterstützten Konvertierungstools auf Ihrem Server verfügbar sein:

• GD (mit WebP Support aktiviert)
• cwebp
• Imagemagick

Mindestens eines dieser Konvertierungswerkzeuge muss auf Ihrem Server verfügbar sein.
GD sollte bei den meisten Magento-Installationen sofort funktionieren. Die Befehlszeilentools cwebp + Imagemagick müssen vom Webbenutzer ausführbar sein und erfordern möglicherweise zusätzliche Installations- oder Konfigurationsschritte, um ordnungsgemäß auf Ihrem Server ausgeführt zu werden - Weitere Informationen und Anweisungen finden Sie im Handbuch.

Vom Backend aus prüfen:
Wenn Sie die Erweiterung bereits installiert haben, können Sie mit dem Conversion Test Tool aus dem Backend überprüfen, ob die Konvertierungstools auf Ihrem Server funktionieren.
Führen Sie folgende Schritte aus, um die Konvertierung zu testen und eine Vorschau des Konvertierungsergebnisses anzuzeigen:

1. 1. Schließen Sie die Konvertierungskonfiguration ab, wie im Handbuch beschrieben
2. 2. Geben Sie die Produkt-ID (nicht die Artikelnummer) in das Textfeld neben "Test Conversion Tool"-Button ein
3. 3. Klicken Sie auf "Test Conversion Tool"-Button
4. 4. Siehe PopUp mit Konvertierungsergebnis:
   Success: Falls die Konvertierung erfolgreich ist:
   Sie sehen das Ergebnis als Vergleich zwischen dem Originalbild (links) und dem erstellten WebP-Bild (rechts).
   Sie können den vertikalen Schieberegler verschieben, um mehr von dem Originalbild oder dem WebP-Bild anzuzeigen, um den perfekten Eindruck in Bezug auf die Qualität zu erhalten.
   Fail: Falls die Konvertierung fehlschlägt, gibt das PopUp einen Hinweis darauf, was schief gelaufen ist und wie es behoben werden kann.

Über CLI prüfen:
Wenn Sie per CLI überprüfen möchten, welche Konvertierungstools auf Ihrem Server verfügbar sind, ohne die Erweiterung installiert zu haben, gehen Sie folgendermaßen vor:

Führen Sie auf Ihrer CLI den folgenden Befehl aus:

php -i  grep -E 'WebP SupportGD'

Wenn GD auf Ihrem Server
- nicht unterstützt / installiert ist führt dies zu einem leeren Ergebnis.
- unterstützt / installiert ist sollte die Ausgabe ungefähr so aussehen::

GD Support => enabled
GD Version => bundled (2.1.0 compatible)

WebP Support => enabled

Hinweis: Die letzte Zeile dieser Ausgabe muss ein "enabled" sein.

Führen Sie den folgenden Befehl auf Ihrer CLI aus, um festzustellen, ob cwebp als globaler Befehl verfügbar ist:

cwebp

Wenn cwebp auf Ihrem Server
- nicht supported / installiert ist erhalten Sie mit diesem Befehl eine Fehlermeldung.
- supported / installiert sollte die Ausgabe sollte die Manpage für cwebp sein.

Falls cwebp auf Ihrem Server nicht als globaler Befehl verfügbar ist, können Sie die folgenden Schritte ausführen:

• cwebp auf Ihrem Server installieren
  a) Laden Sie die offizielle cwebp lib von hier https://developers.google.com/speed/webp/docs/precompiled auf Ihren Server
  b) Diese lib ist auch in unserer Erweiterung enthalten. Wenn Sie die Erweiterung bereits installiert haben, finden Sie sie in folgendem Pfad:
  /magento/root/app/code/Jajuma/WebpImages/bin/cwebp
• Stellen Sie sicher, dass die lib ausführbar ist
• Führen Sie auf Ihrer CLI den folgenden Befehl aus:

</path/to/cwebp/lib/on/your_server>/cwebp

Wenn cwebp mit dieser Methode auf Ihrem Server ausgeführt werden kann sollte die Ausgabe die Manpage für cwebp sein.
Wenn cwebp auf Ihrem Server mit dieser Methode nicht ausgeführt werden kann erhalten Sie eine Fehlermeldung / einen Hinweis zu fehlenden Abhängigkeiten.

Hinweis:
Damit cwebp mit der Erweiterung korrekt funktioniert:

• cwebp und alle Abhängigkeiten müssen korrekt auf Ihrem System installiert sein
• cwebp binary muss ausführbar sein (vom Webbenutzer)

Führen Sie den folgenden Befehl in Ihrer CLI aus, um festzustellen, ob ImageMagick als globaler Befehl verfügbar ist:

convert

Wenn Imagemagick auf Ihrem Server nicht unterstützt / installiert ist erhalten Sie damit eine Fehlermeldung.
Wenn Imagemagick auf Ihrem Server unterstützt / installiert ist sollte die Ausgabe die Manpage für Imagemagick sein.

JaJuMa WebP Optimized Images Extension unterstützt die Konvertierung von JPG- und PNG-Bildern in WebP-Dateien basierend auf der unten beschriebenen Konfiguration mit einem der drei unterstützten Konvertierungs-Tools:

• GD
• Cwebp
• Imagemagick

Alle Bilder, die im Markup aller Seiten Ihrer Website gefunden werden, sowie Bilder in der Fotorama-Mediengalerie auf der Produktseite werden konvertiert und als WebP-Bilder an Besucher gesendet.
Durch Verwendung von HTML5 -tags / Erkennung von WebP-Unterstützung des Browsers wird sichergestellt, dass .webp-Dateien nur Browsern bereitgestellt werden, die diesen Bildtyp anzeigen können. Für Besucher, die einen Webbrowser ohne .webp-Unterstützung verwenden, werden automatisch .jpg- oder .png-Dateien bereitgestellt.
Die Erweiterung integriert sich in das Magento Media Management.
Das heißt, WebP-Bilddateien werden für die gleichen Größenvarianten wie für JPG- / PNG-Dateien erstellt (z. B. Miniaturansichten und kleine Rasterbilder sowie Originalgröße).
Die Erweiterung enthält zudem einen separaten Mediencache für WebP-Bilder.
In diesem Cache erzeugte und gespeicherte WebP-Bilder können jederzeit gelöscht werden, z. B. um eine andere Konvertierungskonfiguration / Qualitätsstufe anwenden.

Ja, JaJuMa WebP Optimized Images ist vollständig kompatibel mit Full Page Cache (Default FPC & Varnish).

Wie jede Erweiterung im Magento Marketplace wurde JaJuMa WebP Optimized Images für Magento Default entwickelt.
Obwohl wir versuchen, Konflikte mit anderen benutzerdefinierten Funktionen zu vermeiden, können wir dies nicht für jede denkbare individuelle Anpassung garantieren.
Insbesondere für den Fall, dass Sie andere Anpassungen bezüglich der Auslieferung von Bildern an Ihre Kunden vorgenommen haben (z. B. Lazyloading, Bildaustausch bei Hover, per CDN ausgelieferte Bilder…), funktioniert die Extension möglicherweise noch einwandfrei. Es kann aber auch zu Konflikten kommen die verhindern, dass die Extension wie erwartet funktioniert.
Es kommt ganz darauf an, wie Ihre individuelle Implementierung funktioniert.
Neben der Unterstützung von 3 verschiedenen Konvertierungstools haben wir auch einige Konfigurationsoptionen hinzugefügt, um die Erweiterung in so vielen Szenarien wie möglich zu verwenden sowie checks eingebaut um Konflikte zu vermeiden.

Ja, natürlich.
Sie können die für die Konvertierung verwendete Qualität / Komprimierungsstufe so konfigurieren, dass eine perfekte Balance zwischen Dateigröße und Qualität erzielt wird, die Ihren Anforderungen entspricht.
Wenn Sie cwebp oder Imagemagick für die WebP-Konvertierung verwenden, können Sie die Konvertierungsergebnisse sogar mit einem vollständig benutzerdefinierten Konvertierungsbefehl an Ihre Anforderungen anpassen.
Detaillierte Anweisungen zur Konfiguration finden Sie im Handbuch.

JaJuMa WebP Optimized Images Extension enthält ein Tool für die Konvertierungsvorschau.
Es zeigt Ihnen einen direkten Vergleich zwischen dem Originalbild (links) und dem erstellten WebP-Bild (rechts) oder einige Hinweise, was bei einer fehlgeschlagenen Konvertierung schief gelaufen ist.
Spielen Sie einfach mit der Qualitätsstufe und den Konvertierungseinstellungen, bis die Qualitätsstufe so niedrig wie möglich ist, um Ihre Qualitätsanforderungen zu erfüllen und die kleinstmögliche Dateigröße zu erzielen.

Die Konvertierungsergebnisse hängen in Bezug auf die Größe der WebP-Dateien, die im Vergleich zu JPG / PNG-Dateien gesparten Datenmengen, sowie die Qualität in hohem Maße von Ihren vorhandenen Bildern ab.
Darüber hinaus können die Erwartungen an die Bildqualität von Anwendungsfall zu Anwendungsfall sehr unterschiedlich sein.
Daher gibt es keine allgemeingültige Empfehlung für die Konfiguration von Qualitätsstufe / Konvertierung, die für jeden Anwendungsfall "perfekte" Ergebnisse liefert.
Mit den vorkonfigurierten Konvertierungsparametern im Basismodus haben wir versucht, Ihnen eine Konfiguration bereitzustellen, mit der Sie sofort gute Ergebnisse erzielen.
Die Verwendung von Qualitätsstufe 75 als Standardkomprimierungsfaktor scheint in den meisten Fällen eine gute und sichere Wahl zu sein, um solide und ausgewogene Ergebnisse zu erzielen.
Sollten die Ergebnisse mit dieser Konfiguration nicht zufriedenstellend sein, können Sie im erweiterten Modus mit den verschiedenen Parametern experimentieren, um eine Konfiguration zu finden, die Ihren Anforderungen besser entspricht. Ganz einfach mit dem von der Erweiterung bereitgestellten Konvertierungstest-Tool.

Weitere Informationen finden Sie in der offiziellen Dokumentation:
cwebp: https://developers.google.com/speed/webp/docs/cwebp
Imagemagick: https://www.imagemagick.org/script/webp.php

Ja, mit der Blacklist Konfiguration der Extension ist es möglich, bestimmte Bilder auf Ihrer Seite von der WebP-Konvertierung auszuschließen.
Sie können beliebige Zeichenfolgen oder RegEx als durch Kommas getrennte Liste hinzufügen. Alle -Tags, die mit einer der angegebenen Zeichenfolgen / RegEx übereinstimmen, werden von der Konvertierung ausgeschlossen.
Beispiel 1:Logo mit dem Namen logo.png ausschließen::
logo\.jpg
Beispiel 2: Schließen Sie das Logo logo.png UND alle über den WYSIWYG-Editor hochgeladenenen Bilder aus:
logo\.jpg,wysiwyg
Beispiel 3: Schließen Sie Bilder mit einer bestimmten CSS-Klasse aus, z. B. product-image-photo:
product-image-photo

Hinweis: IMG-Tags mit data-nowebp="true" sind standardmäßig von der Konvertierung ausgeschlossen.

Wir empfehlen die Verwendung von cwebp, dem von Google entwickelten offiziellen Konvertierungstool. Es ist die beste Wahl in Bezug auf Qualität, Conversion-Geschwindigkeit und liefert auch die meisten Conversion-Parameter Der Preis dafür ist jedoch die „Herausforderung“, cwebp auf Ihrem Server zum Laufen zu bringen, was möglicherweise nicht in jedem Fall möglich ist, z. B. mit einigen shared Hosts.
In diesem Fall empfehlen wir, GD zu verwenden. Es sollte auf den meisten Magento-Systemen ohne weitere Setup-Anforderungen sofort einsatzbereit sein und ist einfach zu verwenden, da nur eine Option konfiguriert werden muss. In den meisten Fällen liefert GD jedoch immer noch ziemlich gute Ergebnisse Imagemagick ist in Bezug auf die Konvertierungsgeschwindigkeit ebenfalls ziemlich gut, soll jedoch etwas weniger gute Qualität als die anderen 2 Tools liefern.

Ja, mit dieser Extension werden Browser, die WebP nicht unterstützen, automatisch auf das Laden der ursprünglichen .jpg/.png-Bilder zurückgreifen.

Nein, diese Extension funktioniert zu 100% lokal auf Ihrem Server, einschließlich WebP-Konvertierungen.

Es werden keine Daten an Dritte weitergegeben.

Nein, die ursprüngliche Bilddatei wird nicht verändert oder gelöscht, einschließlich der Bildpfade in der DB.

Erstellte WebP-Bilddateien werden separat in einem speziellen WebP-optimierten Bilder-Cache-Ordner gespeichert.

Ja, sowohl Bilder, die bei der Installation des Moduls bereits vorhanden sind, als auch Bilder, die später hinzugefügt werden, werden optimiert.