Bilder in WebP konvertieren (und wann man es lassen sollte)

WebP ist ein von Google entwickeltes Bildformat, das bei gleicher sichtbarer Qualität in der Regel Dateien erzeugt, die 25 % bis 35 % kleiner sind als JPEG, und deutlich kleiner als PNG, wenn das Bild Transparenz enthält. Ein Bild in WebP zu konvertieren bedeutet, es mit einem WebP-Encoder neu zu kodieren (im Browser, im Terminal oder per Code) und mit <picture> oder direkt mit <img> auszuliefern, denn alle aktuellen Browser unterstützen es.

In diesem Artikel erfährst du, was WebP genau ist, wie du Bilder auf drei Arten konvertierst, wie du sie korrekt in HTML einbindest und in welchen Fällen du besser darauf verzichtest.

Was WebP ist

WebP ist ein Bildformat mit verlustbehafteter Kompression (wie JPEG) und verlustfreier Kompression (wie PNG), das außerdem Transparenz (Alphakanal) und Animation (wie GIF) unterstützt. Google veröffentlichte es 2010; die offizielle Dokumentation liegt weiterhin unter developers.google.com/speed/webp.

Für eine Website zählt vor allem eines: Mit WebP kannst du JPEG, PNG und GIF durch ein einziges, effizienteres Format ersetzen, ohne dass sich das sichtbare Bild ändert.

Welche Ersparnis du realistisch erwarten kannst

Google gibt in seiner Dokumentation an, dass verlustbehaftete WebP-Bilder bei gleichem Qualitätsindex 25 % bis 34 % kleiner sind als JPEG und verlustfreie WebP-Bilder etwa 26 % kleiner als PNG. Die konkrete Ersparnis hängt vom Bild ab: Ein detailreiches Foto lässt sich schlechter komprimieren als ein Screenshot mit flächigen Bereichen.

Als praktische Referenz wurde beim Erstellen dieses Artikels das Titelbild des Artikels selbst (eine PNG-Grafik von 1200×630 Pixeln mit Text und Verläufen) mit sharp konvertiert. Das waren die Ergebnisse:

Format und Einstellung	Größe
Original-PNG	35 KB
WebP verlustfrei	28 KB
WebP verlustbehaftet, Qualität 80	24 KB
JPEG Qualität 85 (gleiches Bild)	50 KB
WebP Qualität 85 (aus dem JPEG)	30 KB

Das ist ein einzelnes Beispiel, keine Statistik, aber es zeigt zwei Dinge: Verlustfreies WebP verkleinert ein PNG bereits, und für eine Grafik mit Text ist JPEG mit Abstand die schlechteste Wahl.

Drei Wege, Bilder in WebP zu konvertieren

1. Im Browser, ohne Installation

Wenn du nur wenige Bilder konvertieren musst, ist ein Online-Tool, das im Browser arbeitet, der schnellste Weg. Auf AIMRAN Tools kannst du Bilder per Drag-and-drop in WebP (und in AVIF, PNG oder JPG) konvertieren; die Konvertierung läuft auf deinem Gerät, das Bild wird an keinen Server geschickt.

Das ist die passende Option für Artikelbilder, ein Logo oder einen einzelnen Screenshot.

2. Im Terminal mit cwebp

cwebp ist der offizielle Encoder. Du installierst ihn mit dem Paketmanager deines Systems (apt install webp unter Debian/Ubuntu, brew install webp unter macOS) und nutzt ihn so:

# Qualität 80 (guter Kompromiss für Fotos)
cwebp -q 80 foto.jpg -o foto.webp

# Verlustfrei (Screenshots, Grafiken, Logos mit Transparenz)
cwebp -lossless logo.png -o logo.webp

# Alle JPG-Bilder eines Ordners konvertieren
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

Der Parameter -q reicht von 0 bis 100. Für Fotos ist 75 bis 85 meist der sinnvolle Bereich; unter 60 werden Artefakte in Verläufen und an Kanten sichtbar.

3. In Node.js mit sharp

Wenn du Bilder in einem Build-Prozess erzeugst (zum Beispiel für eine statische Website), ist sharp die meistgenutzte Bibliothek:

import sharp from 'sharp';

await sharp('eingabe.jpg')
  .resize({ width: 1200, withoutEnlargement: true })
  .webp({ quality: 80 })
  .toFile('ausgabe.webp');

Der Vorteil beim Build: Du kannst in einem Schritt skalieren und konvertieren und mehrere Breiten für srcset erzeugen. Frameworks wie Astro, Next.js oder Nuxt integrieren sharp bereits in ihre Bildkomponenten.

WebP in HTML ausliefern

Einfache Variante: direkt <img>

Laut Can I use wird WebP von Chrome, Edge, Firefox, Safari (seit Version 14 aus dem Jahr 2020) und den wichtigsten mobilen Browsern unterstützt. Wenn du keine Browser von vor 2020 unterstützen musst, kannst du <img> direkt verwenden:

<img src="/img/foto.webp" alt="Beschreibung des Fotos" width="1200" height="800" loading="lazy" decoding="async" />

Beachte width und height: Sie erlauben dem Browser, den Platz vor dem Download zu reservieren, und verhindern Layoutsprünge, eines der Probleme, die die Core Web Vitals messen.

Variante mit Fallback: <picture>

Wenn du zusätzlich AVIF anbieten (noch effizienter) oder ein JPEG als Fallback behalten willst, nutze <picture>:

<picture>
  <source srcset="/img/foto.avif" type="image/avif" />
  <source srcset="/img/foto.webp" type="image/webp" />
  <img src="/img/foto.jpg" alt="Beschreibung des Fotos" width="1200" height="800" loading="lazy" decoding="async" />
</picture>

Der Browser wählt die erste Quelle, deren type er unterstützt. Das abschließende <img> ist Pflicht: Es wird angezeigt und trägt alt, Abmessungen und loading.

Wann du nicht in WebP konvertieren solltest

• Wenn du bereits AVIF auslieferst. AVIF komprimiert die meisten Fotos besser als WebP. WebP bleibt als Zwischen-Fallback in <picture> nützlich.
• Bilder, die Nutzer herunterladen und bearbeiten. Wenn du eine Ressource zum Öffnen in einem Editor anbietest, sind PNG oder JPEG mit Desktop-Software kompatibler.
• Winzige Bilder. Ein 2-KB-Icon rechtfertigt kein zusätzliches Format; oft ist ein SVG die beste Wahl.
• Stark komprimierte JPEGs erneut komprimieren. Hat das Original bereits Artefakte, addieren sich diese bei verlustbehaftetem WebP. Gehe immer von der besten verfügbaren Qualität aus.

Häufige Fehler

1. Konvertieren ohne Skalieren. Ein 4000 Pixel breites WebP bleibt riesig. Verkleinere zuerst auf die maximale Anzeigebreite.
2. Verlustfrei für Fotos verwenden. Der Lossless-Modus erzeugt bei Fotos größere Dateien als das ursprüngliche JPEG. Reserviere ihn für Grafiken, Screenshots und Logos.
3. Das alt vergessen. Ein Formatwechsel ändert nichts an der Pflicht, das Bild für Menschen zu beschreiben, die es nicht sehen.
4. Originale löschen. Behalte die Quelldateien: Wenn du später zu AVIF oder einem anderen Format wechselst, brauchst du die bestmögliche Qualität als Ausgangspunkt.

Fazit

Bilder in WebP zu konvertieren gehört zu den Optimierungen mit dem besten Verhältnis von Aufwand und Nutzen: weniger Bytes, gleiche sichtbare Qualität und universelle Unterstützung in aktuellen Browsern. Für wenige Bilder reicht ein Browser-Tool wie das von AIMRAN Tools; bei Projekten mit vielen Bildern automatisierst du die Konvertierung mit cwebp oder sharp im Build, deklarierst immer width, height und alt und nutzt <picture>, wenn du AVIF davorschalten willst.