Bild in WebP konvertieren (und warum du das tun solltest)

Wenn du schon einmal einen Test mit Google PageSpeed Insights gemacht hast und den Hinweis "Bilder in Formaten der nächsten Generation bereitstellen" erhalten hast, bittet Google dich genau darum: deine JPG- und PNG-Bilder zu WebP zu konvertieren. Es ist eine der wirkungsvollsten Maßnahmen für die Performance einer Website — und auch eine der einfachsten umzusetzen.

Warum zu WebP konvertieren?

WebP ist ein von Google entwickeltes und 2010 veröffentlichtes Format, das speziell für das Web konzipiert wurde. Es nutzt modernere Kompressionsalgorithmen als JPG und PNG und bietet bei gleicher visueller Qualität:

• 25–35 % weniger Größe als JPG im Lossy-Modus (verlustbehaftete Kompression)
• 20–30 % weniger Größe als PNG im Lossless-Modus (verlustfreie Kompression)
• Unterstützung für Transparenz (Alphakanal) — anders als JPG, das dies nicht hat
• Unterstützung für Animationen — anders als PNG, das dies nicht nativ hat

In der Praxis ist der Effekt real. Eine E-Commerce-Produktgalerie mit 20 Fotos zu je 300 KB in JPG (6 MB insgesamt) kann in WebP bei gleicher visueller Qualität auf 4 MB kommen — eine Reduktion von 33 % der Seitengröße. Für Google bedeutet das einen schnelleren LCP, eine bessere PageSpeed-Bewertung und potenziell besseres Ranking.

Wann WebP nicht verwenden

Obwohl es das beste Format für das moderne Web ist, gibt es Situationen, in denen WebP noch nicht die richtige Wahl ist:

• E-Mail-Marketing: E-Mail-Clients wie Outlook und Apple Mail haben inkonsistente WebP-Unterstützung. Für HTML-E-Mails bleiben JPG und PNG sicherer.
• Grafischer Druck: Druckereien und traditionelle Drucksoftware arbeiten nicht mit WebP. Für Dateien für den Druck nutze hochwertiges JPG oder PNG.
• Plattformen mit Formatbeschränkungen: YouTube akzeptiert keine WebP-Dateien für den Upload von Thumbnails (nur JPG und PNG). Manche Legacy-Systeme fordern JPG. Prüfe vor der Konvertierung das akzeptierte Format.
• Dateien, die von jedem am Computer geöffnet werden müssen: Endnutzer, die auf Download-Links klicken und die Datei im Standard-Viewer von Windows öffnen wollen, können bei älteren Systemversionen Probleme mit WebP haben.

Methode 1 — Online-Konvertierung (am schnellsten, ohne Installation)

Um vereinzelte Bilder zu konvertieren — oder wenn du ein schnelles Ergebnis ohne Konfiguration brauchst — ist ein Online-Konverter der direkteste Weg. Der Bildkonverter von ImageTools konvertiert JPG, PNG und andere Formate direkt im Browser zu WebP, ohne die Dateien an externe Server zu senden.

1. Öffne den Bildkonverter.
2. Wähle oder ziehe die Bilder in den Upload-Bereich.
3. Wähle WebP als Ausgabeformat.
4. Lade die konvertierten Bilder einzeln oder als ZIP herunter, falls es mehrere Dateien sind.

Methode 2 — WordPress (automatisch für die ganze Website)

Für WordPress-Websites ist der effizienteste Ansatz ein Plugin, das WebP automatisch konvertiert und ausliefert — ohne jedes Bild manuell neu verarbeiten zu müssen.

WordPress 6.1+ (native Konvertierung)

Ab Version 6.1 konvertiert WordPress Bilder automatisch beim Upload zu WebP, sofern der Server die libwebp-Bibliothek unterstützt (die meisten modernen Server mit PHP 8+ haben das). Du musst nichts tun — WordPress erzeugt WebP-Versionen der Bilder und liefert automatisch das richtige Format für jeden Browser.

Um zu prüfen, ob es aktiv ist: gehe zu Einstellungen → Medien und suche nach der WebP-Konvertierungsoption. Ist sie nicht verfügbar, unterstützt der Server es nicht — erwäge ein Plugin.

Mit Plugins (ältere Versionen oder mehr Kontrolle)

Die am häufigsten genutzten Plugins für WebP-Konvertierung in WordPress sind:

• ShortPixel Image Optimizer — konvertiert neue Bilder beim Upload und bietet die Option, die gesamte bestehende Mediathek neu zu verarbeiten. Kostenlos bis 100 Bilder/Monat.
• Imagify — einfache Oberfläche, automatische Konvertierung und Option zur Stapeloptimierung. Kostenloser Plan verfügbar.
• WebP Express — Plugin, das sich speziell auf WebP konzentriert, konvertiert und konfiguriert die Serverregeln automatisch.

Methode 3 — Kommandozeile mit cwebp (für Entwickler)

Google stellt das Werkzeug cwebp — den offiziellen WebP-Encoder — kostenlos für die Konvertierung über das Terminal bereit. Es ist die schnellste Methode, um große Bildmengen auf einem Server oder in einer Build-Pipeline zu konvertieren.

Installation

# Ubuntu / Debian
sudo apt-get install webp

# macOS (Homebrew)
brew install webp

# Windows — lade die Binärdatei herunter: https://developers.google.com/speed/webp/download

Grundlegende Konvertierung

# Eine JPG-Datei mit Qualität 80 zu WebP konvertieren
cwebp -q 80 foto.jpg -o foto.webp

# PNG verlustfrei zu WebP konvertieren
cwebp -lossless logo.png -o logo.webp

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

Der Parameter -q steuert die Qualität (0–100). Für das Web bieten Werte zwischen 75 und 85 das beste Gleichgewicht zwischen visueller Qualität und Dateigröße. Nutze -lossless für Bilder, die verlustfreie Kompression benötigen (Logos, Screenshots mit Text).

Methode 4 — Node.js mit sharp (für Build-Pipelines)

Für Projekte, die Node.js verwenden — wie Websites in Next.js, Gatsby, Nuxt oder jeden automatisierten Build — ist die Bibliothek sharp die effizienteste Option für WebP-Konvertierung in der Pipeline:

// npm install sharp

const sharp = require('sharp');

// JPG mit Qualität 80 zu WebP konvertieren
sharp('foto.jpg')
  .webp({ quality: 80 })
  .toFile('foto.webp');

// PNG verlustfrei zu WebP konvertieren
sharp('logo.png')
  .webp({ lossless: true })
  .toFile('logo.webp');

// Alle Dateien eines Ordners konvertieren
const fs = require('fs');
const path = require('path');

fs.readdirSync('./bilder')
  .filter(f => /\.(jpg|jpeg|png)$/i.test(f))
  .forEach(file => {
    const input = path.join('./bilder', file);
    const output = path.join('./bilder', file.replace(/\.[^.]+$/, '.webp'));
    sharp(input).webp({ quality: 80 }).toFile(output);
  });

Das sharp-Paket nutzt die native Bibliothek libvips und ist deutlich schneller als reine JavaScript-Lösungen — ideal, um WebP-Versionen während des Builds statischer Websites zu erzeugen.

WebP mit Fallback für ältere Browser implementieren

Obwohl die WebP-Kompatibilität 2026 über 97 % liegt, kann es noch Kontexte geben, in denen ein Fallback nötig ist — Unternehmenssysteme mit IE11, sehr alte Geräte oder einfach für maximale Kompatibilitätssicherheit.

Die richtige Lösung ist das HTML-Tag <picture>, mit dem du alternative Bildquellen in Präferenzreihenfolge deklarieren kannst:

<!-- Der Browser nutzt WebP, wenn unterstützt, sonst JPG -->
<picture>
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" alt="Beschreibung des Fotos" width="800" height="600">
</picture>

<!-- Mit mehreren Größen für Retina-Displays -->
<picture>
  <source
    srcset="foto-800.webp 800w, foto-1600.webp 1600w"
    type="image/webp">
  <source
    srcset="foto-800.jpg 800w, foto-1600.jpg 1600w"
    type="image/jpeg">
  <img src="foto-800.jpg" alt="Beschreibung des Fotos"
    width="800" height="600" loading="lazy">
</picture>

Der Browser prüft die Quellen in der deklarierten Reihenfolge: unterstützt er WebP, nutzt er das <source>-Element mit type="image/webp". Andernfalls fällt er auf das JPG im <img>-Tag zurück. Das <img>-Tag am Ende ist Pflicht — es definiert das alt, die Abmessungen und das Standardverhalten.

Server so konfigurieren, dass WebP automatisch ausgeliefert wird (Apache)

Eine Alternative zu <picture> ist, den Server so zu konfigurieren, dass er erkennt, ob der Browser WebP akzeptiert, und automatisch die richtige Version ausliefert. Bei Apache füge dies zur .htaccess hinzu:

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Liefert .webp aus, wenn vorhanden und vom Browser akzeptiert
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}\.webp -f
  RewriteRule ^ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

Mit dieser Konfiguration reicht es, die .webp-Dateien neben den Originalen im selben Ordner zu haben. Apache erkennt anhand des Accept-Headers, ob der Browser WebP akzeptiert, und liefert die richtige Version aus, ohne jegliche Änderung am HTML.

Das Ergebnis in PageSpeed überprüfen

Nach der Implementierung von WebP führe Google PageSpeed Insights (pagespeed.web.dev) für die URL der Website aus. Der Hinweis "Bilder in Formaten der nächsten Generation bereitstellen" sollte verschwinden oder deutlich abnehmen. Im Opportunities-Bereich siehst du den geschätzten KB-Gewinn für jedes noch nicht konvertierte Bild.

Eine weitere Möglichkeit zu prüfen: öffne die Chrome DevTools (F12), gehe zum Tab Network, filtere nach "Img" und schau in die Spalte "Type" bei den geladenen Bildern. Erscheint webp, funktioniert die Konvertierung.

Welche Qualitätsstufe bei der Konvertierung verwenden?

Die WebP-Qualität folgt derselben Logik wie JPG: höhere Werte erhalten mehr Details, erzeugen aber größere Dateien. Der Unterschied ist, dass WebP bei gleicher visueller Qualität meist einen 10–15 Punkte niedrigeren Qualitätswert als das gleichwertige JPG verwendet.

Häufige Fragen