WebP-Format: Was es ist und wann es sich im Shop lohnt

Das WebP-Format ist ein Bildformat von Google, das Fotos stärker komprimiert als JPG und PNG, bei sehr ähnlicher Bildqualität. Es unterstützt Transparenz und Animationen und wird von allen gängigen Browsern angezeigt: Chrome, Firefox, Edge und Safari. Lohnt sich WebP für deinen Onlineshop? In den meisten Fällen ja. Deine Produktseiten werden leichter und laden schneller, und deine Kundschaft sieht trotzdem dasselbe Bild.

Im Folgenden erfährst du, wie WebP funktioniert, wo es gegenüber anderen Formaten punktet und wo nicht, und wie du ohne großen Aufwand umsteigst.

Das WebP-Format kurz erklärt

WebP ist ein Dateiformat für Bilder, genau wie JPG oder PNG. Google hat es 2010 vorgestellt und seitdem weiterentwickelt. Die Dateien tragen die Endung .webp.

Das Ziel ist einfach: dasselbe Bild mit weniger Speicherplatz. Laut der offiziellen Entwicklerdokumentation von Google gilt:

• Verlustfreie WebP-Bilder sind 26 % kleiner als vergleichbare PNGs.
• Verlustbehaftete WebP-Bilder sind 25 bis 34 % kleiner als JPGs mit vergleichbarer Qualität.

Wie viel du tatsächlich sparst, hängt vom einzelnen Foto ab. Bei Katalogen mit Hunderten Produktbildern macht sich der Unterschied aber deutlich bemerkbar.

So funktioniert WebP: verlustbehaftet und verlustfrei

WebP bietet zwei Kompressionsarten. Es lohnt sich zu wissen, wann du welche einsetzt.

Verlustbehaftetes WebP

Hier werden Bildinformationen entfernt, die das Auge kaum wahrnimmt, ähnlich wie bei JPG. Das ist die richtige Wahl für Produktfotos, Stimmungsbilder und Banner. Die Qualität lässt sich einstellen: Werte zwischen 75 und 85 sind meist ein guter Kompromiss zwischen Dateigröße und Schärfe.

Verlustfreies WebP

Alle Pixel bleiben unverändert erhalten, wie bei PNG. Ideal für Logos, Icons, Grafiken mit Text oder Bilder mit sehr klaren Kanten.

Transparenz und Animation

WebP unterstützt einen Alphakanal (transparenten Hintergrund), und zwar sowohl verlustbehaftet als auch verlustfrei. Das ist ein klarer Vorteil gegenüber PNG: Du kannst ein freigestelltes Produkt mit transparentem Hintergrund speichern und die Datei bleibt deutlich kleiner. Außerdem sind Animationen möglich, als Alternative zu GIFs.

WebP im Vergleich zu JPG, PNG und AVIF

WebP gewinnt nicht überall. In einigen Punkten ziehen andere Formate gleich oder liegen vorn:

• Kompatibilität: JPG gewinnt. JPG öffnet praktisch jedes Programm, jedes Smartphone, jedes Mailprogramm und jeder Drucker. Manche ältere Bildbearbeitungsprogramme, einige Plattformen und Marktplätze akzeptieren WebP beim Hochladen noch nicht.
• Kompression: AVIF liegt oft vorn. Das neuere Format erzeugt häufig noch kleinere Dateien als WebP bei ähnlicher Qualität. Dafür dauert das Kodieren länger, und weniger Tools unterstützen es.
• Farbtreue bei feinen Details: JPG oder PNG können besser sein. Verlustbehaftetes WebP reduziert die Farbinformationen (Chroma-Subsampling 4:2:0). Bei Stoffen mit sehr feinen Mustern oder kleiner farbiger Schrift kann das zu leichter Unschärfe führen.
• Maximale Bildgröße: Gleichstand oder Vorteil für die anderen. WebP unterstützt maximal 16.383 × 16.383 Pixel. Für das Web reicht das locker, für riesige Druckdateien aber nicht.

Kurz gesagt: WebP eignet sich hervorragend, um Bilder im Web anzuzeigen. Zum Archivieren von Originalen oder für die Druckerei bleibst du besser bei JPG, PNG oder TIFF.

Warum sich WebP für deinen Onlineshop lohnt

Schnellere Ladezeiten

In Onlineshops machen Bilder meist den größten Teil des Seitengewichts aus. Auf Produktseiten ist das Hauptbild oft das größte Element, das geladen wird. Google misst das mit der Kennzahl LCP (Largest Contentful Paint), einem der Core Web Vitals.

Mit leichteren Dateien erscheint dieses Bild früher, vor allem auf Smartphones mit langsamer Verbindung. Ein schneller Shop sorgt für ein besseres Nutzererlebnis, und Google berücksichtigt die Page Experience in seinen Suchergebnissen.

Leichtere freigestellte Produkte

Wenn du Produktfotos ohne Hintergrund nutzt, etwa vor deinen Markenfarben oder in Collagen, war bisher meist PNG die Standardwahl, und PNG-Dateien sind schwer. Mit WebP bleibt die Transparenz erhalten, die Datei wird aber deutlich kleiner.

Weniger Speicher und weniger Traffic

Jeder Seitenaufruf lädt deine Bilder herunter. Kleinere Dateien bedeuten weniger übertragene Daten von deinem Server oder CDN. Wenn dein Hosting nach Speicher oder Traffic abrechnet oder diese begrenzt, merkst du das auch dort.

Ein Format für viele Zwecke

Fotos, Grafiken, transparente Bilder und kleine Animationen: WebP deckt alles mit einem Format ab. Das vereinfacht die Organisation deines Katalogs.

Wann WebP nicht die richtige Wahl ist

• Originale und Arbeitsdateien. Bewahre das Original immer in hoher Qualität auf (JPG, PNG, TIFF oder RAW). Wandle nur die Version in WebP um, die online geht.
• Uploads auf Marktplätze oder Social Media. Prüfe vor dem Hochladen, welche Formate die jeweilige Plattform akzeptiert. Im Zweifel ist JPG die sichere Wahl.
• E-Mails. Nicht jedes Mailprogramm zeigt WebP an. Für Newsletter sind JPG und PNG zuverlässiger.
• Druck. Druckereien und Printkataloge arbeiten mit anderen Formaten.

Bilder in WebP umwandeln: Schritt für Schritt

Du musst nichts installieren. Mit dem Bildkonverter von Pictulab wandelst du JPG und PNG direkt im Browser in WebP um. Das Tool ist kostenlos und deine Bilder werden auf keinen Server hochgeladen: Die Umwandlung läuft komplett auf deinem eigenen Gerät.

1. Bilder auf die richtige Größe bringen. Lade kein 4.000-Pixel-Bild hoch, wenn es nur mit 1.200 Pixeln angezeigt wird. Das Verkleinern spart oft mehr als der Formatwechsel.
2. In WebP umwandeln. Wähle verlustbehaftete Kompression für Fotos und verlustfreie für Logos oder Grafiken.
3. Qualität einstellen. Starte bei etwa 80 und vergleiche. Siehst du keinen Unterschied, geh etwas weiter runter.
4. Details prüfen. Zoome in heikle Bereiche: Nähte, Texturen, Schrift auf Etiketten.
5. Bei Bedarf komprimieren. Mit dem Tool zum Bild komprimieren kannst du die Dateigröße noch weiter optimieren.

Brauchst du das Produkt freigestellt, entferne zuerst den Hintergrund und exportiere es dann als WebP. So bleibt die Transparenz erhalten, bei kleiner Dateigröße.

WebP im Onlineshop ausliefern

WordPress und WooCommerce

Seit Version 5.8 kannst du WebP-Bilder direkt in die WordPress-Mediathek hochladen. Du kannst deine .webp-Dateien selbst hochladen oder ein Optimierungs-Plugin nutzen, das WebP-Versionen automatisch erstellt.

Gehostete Shopsysteme

Manche E-Commerce-Plattformen optimieren Bilder selbst und liefern kompatiblen Browsern automatisch moderne Formate aus. Schau in die Dokumentation deines Shopsystems, bevor du alles von Hand umwandelst: Vielleicht erledigt es das schon für dich.

Eigene Website: das picture-Element

Wenn du den Code selbst in der Hand hast, kannst du mit dem <picture>-Element WebP ausliefern und ein JPG als Fallback für ältere Browser hinterlegen:

<picture>
  <source srcset="ledertasche-braun.webp" type="image/webp">
  <img src="ledertasche-braun.jpg" alt="Braune Ledertasche mit kurzem Henkel" width="1200" height="1200">
</picture>

Der Browser wählt das erste Format, das er versteht. So sieht jeder das Foto.

Best Practices für WebP im Produktkatalog

• Sprechende Dateinamen: ledertasche-braun-vorne.webp sagt mehr als IMG_4532.webp.
• Aussagekräftige Alt-Texte für Barrierefreiheit und die Bildersuche.
• Breite und Höhe angeben im HTML, damit das Layout beim Laden nicht springt.
• Lazy Loading nutzen (loading="lazy") für Bilder, die beim Öffnen der Seite nicht sichtbar sind, aber nicht für das Hauptbild.
• Einheitliche Qualität im ganzen Katalog, damit alle Produktseiten stimmig wirken.

Wenn du tiefer einsteigen willst, lies auch [ENLACE: Bilder für den Onlineshop komprimieren ohne Qualitätsverlust] und [ENLACE: empfohlene Bildgrößen für Produktseiten].

Und wenn du deine Produktfotos außerdem mit KI erstellen oder verbessern möchtest, kannst du das bei Pictulab ausprobieren. Starte kostenlos — 100 Tokens geschenkt, ohne Kreditkarte.

Häufige Fragen

Verliert WebP im Vergleich zu JPG an Qualität?

Im verlustbehafteten Modus werden, wie bei JPG, einige Bildinformationen verworfen. Mit gut eingestellter Qualität ist der Unterschied mit bloßem Auge meist nicht zu erkennen, die Datei ist aber kleiner. Im verlustfreien Modus geht nichts verloren.

Zeigen alle Browser WebP an?

Alle gängigen aktuellen Browser wie Chrome, Firefox, Edge und Safari stellen WebP problemlos dar. Nur sehr alte Versionen unterstützen es nicht. Für sie kannst du das <picture>-Element mit einem JPG als Fallback verwenden.

Verbessert WebP das SEO meines Shops?

WebP ist für sich genommen kein Rankingfaktor. Es verringert aber das Gewicht deiner Seiten und verbessert damit die Ladezeit und Kennzahlen wie LCP, die zur Page Experience gehören, die Google berücksichtigt.

Ist WebP oder AVIF besser?

AVIF komprimiert oft stärker, braucht aber länger zum Kodieren und wird von weniger Tools unterstützt. WebP bietet eine gute Balance zwischen Ersparnis und Kompatibilität. Viele Websites liefern AVIF aus und halten WebP oder JPG als Fallback bereit.

Wie wandle ich Bilder in WebP um, ohne sie ins Internet hochzuladen?

Mit dem Bildkonverter von Pictulab läuft die Umwandlung direkt in deinem Browser: Deine Bilder werden auf keinen Server hochgeladen, und das Tool ist kostenlos.