Wie das Bildformat WebP bei der Optimierung von Produktbildern für Websites hilft

Als Marketing Manager steht man permanent vor der Aufgabe, den komplizierten Spagat zwischen aufregenden Creatives und kleinen, schnell ladenden Formaten zu bewältigen. Besonders wenn Sie die Präsentation von vielen Produkten und deren Varianten in einem Online-Shop mitverantworten, wissen Sie, wie schnell sich zahlreiche Medien ansammeln und die Ladezeit der Produktseiten verlangsamen können, ggfs. sogar dadurch die Geduld der potenziellen Käufer überstrapazieren. 

Um die Leistung, Größe und Ladegeschwindigkeit Ihres E-Commerce Shops zu Gunsten Ihrer Käufer zu optimieren, lohnt es sich also immer über technologische Innovationen informiert zu bleiben und neue Möglichkeiten zeitnah auszuprobieren.

Hier kommt das 2010 entwickelte Bildformat WebP ins Spiel.

WebP ist die Open Source Antwort des Internet-Riesen Google, auf die Auswahl an bisher bestehenden, älteren Bildformaten. Das innovative Bildformat soll Website Verantwortlichen dabei helfen, langfristig Speicherplatz von Medien zu reduzieren, ohne das Nutzererlebnis einzuschränken.

Was ist das WebP-Bildformat?

WebP ist ein kompaktes Bildformat, welches im Vergleich zu anderen Bildformaten, wie JPEG und PNG, eine hervorragende Komprimierung und Qualität fürs Web bietet. Besonders interessant dabei ist, dass dieses Bildformat explizit für das Web gedacht und entwickelt wurde, um die Größe von Bildern ohne Qualitätseinbußen zu reduzieren. Diese Eigenschaft macht WebP als Exportformat zur idealen Wahl für Produktbilder im E-Commerce oder in Online-Shops.

WebP-Bilder gibt es in zwei Varianten – verlustbehaftet und verlustfrei. Verlustbehaftete WebP-Bilder sind stark komprimiert, wodurch sie kleiner werden, aber dennoch eine gute Bildqualität beibehalten. Verlustfreie WebP-Bilder bieten ebenfalls eine bessere Komprimierung ohne Einbußen bei der Bildqualität.

Beide Varianten können - ohne die Bildqualität Ihrer Website zu beeinträchtigen - aktiv dazu beitragen das Gewicht und die Leistung Ihrer Website erheblich für Ihre “ungeduldigen” Nutzer zu verbessern. Nicht zu vergessen, dass Ihre Website mit kleineren Produktbildern schneller laden kann und so für die gängigen Suchmaschinen und deren Qualitätskriterien einer “guten Website” besser geeignet ist.

Wie kann die Verwendung des WebP-Bildformats meine Website Leistung verbessern?

Die Dateigröße eines Produktbilds ist für eine leistungsstarke Produktseite ein wichtiger Faktor. Mit dem Wachstum der digitalen Welt entwickelten sich die verwendbaren Bildformate auch für Produktbilder weiter; das richtige Bildformat zu kennen und zu nutzen, kann also einen großen Unterschied machen. 

Als relativ neues Bildformat verspricht WebP, die Dateigröße Ihres Bildes zu reduzieren und die Leistung der Website zu verbessern. Aber was sind die Vor- und Nachteile dieses neuen Bildformats und wie unterscheidet es sich von älteren Formaten wie JPG oder PNG?

Vergleich des WebP-Bildformats mit anderen Bildformaten

Um die Mächtigkeit des WebP Bildformats - wie bessere Komprimierung und Kompaktheit - in die Formatlandschaft einsortieren zu können, muss man das WebP-Bildformat im Vergleich zu anderen gängigen Exportformaten wie JPG und PNG betrachten. Die folgende Tabelle zeigt die wesentlichen Unterschiede der Formate:

‍

Insgesamt wird bei der Verwendung von WebP-Bildern weniger Pixelierung angezeigt, was zu viel kleineren Dateigrößen führt. Bei der verlustbehafteten Komprimierung werden einige oder alle Rohdaten in einem Bild entfernt, während einige Informationen über dieses Bild erhalten bleiben. Bei der verlustfreien Komprimierung hingegen bleiben alle Rohdaten in einer Originaldatei so erhalten, wie sie vor der Komprimierung vorhanden waren.

Vor- und Nachteile der Verwendung des WebP-Bildformats

WebP ist ein Bildformat, welches Ihre Website Leistung in vielerlei Hinsicht verbessert, indem es die Größe von Bildern durch eine innovative Komprimierungsmethode reduziert.

Die Vorteile der Verwendung des WebP Bildformats sind: 

Bessere Komprimierung bei sehr guter Bildqualität

Beide WebP-Bildformat Typen - verlustfrei und verlustbehaftet -  überzeugen durch ihre hervorragende Komprimierung: Verlustfreie WebP-Bilder sind, verglichen mit gängigen PNG Bildern, ungefähr 26% kleiner. Auch verlustbehaftete WebP Bilder weisen ca. 25 bis 34% kleinere Bilder auf, als vergleichbare JPEG Bilder. 

JPEG-Dateigröße: 251,03 KB

WebP-Dateigröße: 172,82 KB

Transparente WebP-Produktbilder

Ohne Wenn und Aber ermöglicht das WebP Bildformat auch Transparenz innerhalb von Produktbildern. Verlustfreie WebPs unterstützen die notwendige Transparenz in einem Produktbild mit bis zu 3-mal so kleinen Dateigrößen im Vergleich zu gängigen PNGs. Wo bisher bei freigestellten Produktbildern die logische Wahl auf PNGs fiel, brauchen Sie heute keine taktischen Überlegungen mehr zu machen.

PNG-optimierte Dateigröße: 110,7 KB

Verlustfreie WebP-Dateigröße: 79,9 KB

Verlustbehaftete WebP-Dateigröße: 17,7 KB

Animierte WebP-Produktbilder

Und es kommt noch besser: anders als ein klassisches JPEG kann das Web-Bildformat auch, wie ein typisches GIF, animiert werden. Animierte WebP Bilder sind natürlich auch kleiner als eine gängige GIF Datei.

Eingebettete Eigenschaften in WebP-Produktbildern

Üblicherweise fügt man für den digitalen Kontext und fürs SEO bei Produktbildern hilfreiche Beschreibungen in den Metadaten hinzu. Das WebP Bildformat liefert auch hier die Möglichkeit, Produktbilder mit XMP und EXIF Metadaten zu versehen. Für das Farbmanagement gilt das Gleiche: Sie können ein ICC-Profil in eine WebP-Datei einbetten, um die Farben in einer Datei geräteübergreifend zu verwalten.

Umfassende WebP-Bildformat Unterstützung in Browsern

Ein weiteres großes Plus von WebP ist die Unterstützung durch verschiedene Betriebssysteme und Browser (97 % Marktabdeckung). Die meisten modernen Geräte unterstützen WebP bereits, sodass WebP Bilder auch ohne Plug-ins verwendet werden können und sich die Marktabdeckung stetig verbessert.

Moderne WebP Bilder sorgen also nicht nur dafür, dass Ihre Produktseiten durch kleinere Formate schneller laden und nutzerfreundlicher werden. Sie benötigen auch weniger Speicherplatz für Medien, sorgen so womöglich noch für Budgeteinsparungen beim Hosting und nehmen Ihnen lästige Bildformat Entscheidungen ab.

Die Nachteile der Verwendung des WebP Bildformats sind:

Open Graph Preview und Social Media Unterstützung

Aktuell unterstützen einige große Social Media Plattformen beim Teilen einer Produktseiten Preview (auch Open Graph genannt) leider noch nicht das Format WebP. Dadurch können Sie oder Ihre Kunden Links zwar wie üblich teilen, aber innerhalb der Plattform wird eventuell kein Vorschaubild angezeigt werden. Nicht optimal, aber glücklicherweise bauen viele Plattformen die Formatlücke aus und in Zukunft sollten WebP-Produktbilder auch als Vorschau funktionieren.

Tools und Plug-Ins für die Bildkonvertierung zu WebP

Bis vor kurzem waren extra Tools oder Plugins nötig, um ein jpeg oder png Bild in das WebP Bildformat umzuwandeln. Mittlerweile bieten viele Grafikprogramme wie z.B. Adobe Photoshop native Exportmöglichkeiten oder CMS Anbieter die Umwandlung via Plug-ins in das beliebte Format an. Entwickler Aufwand oder Fallback-Lösungen, wie z.B. zusätzlich PNG oder JPEG Fallback Formate hochzuladen, sind damit vom Tisch.

Wie verwende ich WebP-Bilder ohne die Nutzererfahrung zu beeinträchtigen?

WebP-Bilder sind eine großartige Möglichkeit, die Ladezeiten von Produktseiten zu verkürzen und dadurch die Leistung eines Online-Shops zu verbessern. Indem Sie WebP-Bilder nutzen und die richtigen Techniken verwenden, können Sie sicherstellen, dass Ihre Benutzer die bestmögliche Erfahrung machen.

Grundsätzlich sollten Sie damit beginnen, Ihre bereits in PNG oder JPEG existierenden Produktbilder ins WebP-Format zu konvertieren und neues Bildmaterial im Bildformat WebP einzuplanen; ggfs. direkt bei der Beauftragung von neuen Produktbildern. Für beide Anforderungen gibt es einfache Lösungen, die Ihnen dabei helfen, Ihre Produktbilder leicht und effizient im WebP-Bildformat zu veröffentlichen.

Wie konvertiere ich meine vorhandenen Bilder in das WebP-Format?

Die Bildkonvertierung ins WebP-Format wird aufgrund der geringeren Dateigröße und besseren Qualität immer beliebter. Wenn Sie viele Produktbilder im JPG- oder PNG-Format besitzen, können Sie diese einfach mit einem Online-Bildkonverter, CMS Plattform Plugin oder Grafikprogramm in WebP konvertieren. Bei einigen Bildkonvertern können Sie sogar mehrere Bilder gleichzeitig konvertieren und so Zeit sparen. Die Kosten für die Konvertierung zu WebP sind ebenfalls vom genutzten Tool abhängig, viele Online-Bildkonverter oder CMS Plugins sind kostenlos. Grafikprogramme hingegen sind als Gesamtpaket kostenpflichtig, auch wenn der Export im WebP-Format enthalten ist.

Welche Tools und Dienste helfen dabei, WebP-Bilder einfach zu erstellen und zu optimieren?

Damit Sie WebP-Bilder auf Ihrer Website oder in Ihrem E-Commerce Shop verwenden können, benötigen Sie ein CMS, welches das Bildformat WebP unterstützt. Viele beliebte CMS Plattformen unterstützen das WebP Bildformat heute bereits automatisch. Sollten Sie jedoch eine selbst entwickelte Website oder ein Shop System haben, welche die notwendige Format Unterstützung nicht nativ anbietet, können Entwickler mit der Google Dokumentation die Unterstützung des Web-Bildformats integrieren.

Wenn die Unterstützung des WebP-Bildformats geklärt ist, können Sie entweder Ihre existierenden Produktbilder ins WebP-Format konvertieren oder direkt neue Produktbilder in einer Grafik-Software erstellen, mit der Sie Dateien als WebP-Format speichern und exportieren können.

Produktbilder mit Online-Bildkonvertern oder Software ins WebP-Format konvertieren

Online-Bildkonverter

Für alle Nicht-Techies oder Personen, welche zunächst nur einmal das WebP-Bildformat ausprobieren wollen, bevor sie alle Produktseiten mit dem WebP-Bildformat optimieren, sind Online-Bildkonverter Tools genau das Richtige zum Testen. Empfehlenswerte (kostenlose) Tools sind z.B. Convertio, Anywebp oder Ador-design. Alternativ können Sie sich auch in einer Browser Suche selbst schnell und einfach ein kostenloses Tool Ihrer Wahl aussuchen und das WebP-Bildformat kennenlernen.

Online-Software

Sollten Sie im Unternehmen ein technisch versiertes Team haben, können Sie das vorkompilierte cwebp-Konvertierungstool von Google herunterladen und damit Ihre Produktbilder ins WebP-Bildformat konvertieren.

Auch für E-Commerce Teams mit Entwicklern bieten sich tolle Möglichkeiten: Mit der libwebp-API von Google können Entwickler auch WebP-Dateien zu codieren und decodieren oder mit der API von TinyPNG Batch Konvertierungen durchführen.

WebP-Produktbilder mit (nativen) CMS Plugins erstellen

Viele CMS Plattformen haben seit geraumer Zeit den Bedarf an WebP-Unterstützung erkannt und verhelfen dem Bildmaterial von Content Verantwortlichen entweder mit nativen Integrationen oder extra Plug-ins zum begehrten WebP-Bildformat.

Webflow

Webflow und das dazugehörige CMS unterstützt seit dem Frühjahr 2022 das Bildformat WebP. Sie können Produktbilder entweder direkt im neuen Format importieren oder bereits hochgeladene Bilder mit dem Asset-Manager ins WebP-Bildformat konvertieren. Das WebP-Konvertierungstool von Webflow konvertiert und ersetzt dann Bilder, die Sie bereits verwenden, in WebP. 

Wordpress

WordPress unterstützt das WebP-Bildformat beginnend mit der Version WordPress 5.8. Also einfach WebP-Bilder wie andere Bildformate hochladen, in der Medienbibliothek verwalten und für Ihre Produktseiten nutzen. WordPress hat leider kein native integriertes Konvertierungstool. Allerdings gibt es ein Plugin namens WebP Express, mit dem Sie automatisch WebP-Dateien erstellen und JPEG-Dateien ebenfalls verlustfrei komprimieren können.

Shopify

Shopify besitzt eine native und automatische Unterstützung für verlustfreie WebP-Bilder: Es sind keine Einstellungen oder Code Änderungen erforderlich, um diese Funktion nutzen zu können.

WebP-Produktbilder mit einer Grafik Software erstellen

Sie können WebP-Dateien auch nativ mit vielen verschiedenen Grafikprogrammen erstellen, darunter Photoshop, Google Fotos, Blender und viele andere. Wenn Sie ein fertiges Bild in einem Grafikprogramm speichern, das WebP unterstützt, ist WebP eine der Export Optionen.

Adobe Photoshop

(Produkt) Marketing Teams, welche mit Adobe Creative Cloud und Photoshop arbeiten, profitieren ab der Version 23.2 von der nativen Unterstützung des WebP Bildformats, sowohl bei der Produktbild-Erstellung als auch beim Export. Für ältere Versionen stellt Adobe ein kostenloses Plugin auf ihrer Website zum Download zur Verfügung.

Affinity Photo

Auch Affinity Photo unterstützt zur Freude seiner Nutzer seit der Version 2 das Importieren und Exportieren des WebP-Bildformats. Wer allerdings noch die Version 1 von Affinity Photo nutzt, muss leider das Upgrade zur nächsten Version bezahlen, um die Funktion nutzen zu können.