WebP: Das effiziente Bildformat für schnellere Webseiten

In der dynamischen Welt des Internets sind schnelle Ladezeiten essenziell für ein positives Nutzererlebnis. Langsame Webseiten führen zu höheren Absprungraten, weniger Seitenaufrufen und letztlich zu geringerem Umsatz. Eine der wirkungsvollsten Methoden zur Optimierung ist die Reduzierung der Bildgrößen – hier kommt das Bildformat WebP ins Spiel.

Dieser Artikel zeigt anhand von Beispielen, Benchmarks und Workflows, wie Sie WebP erfolgreich in Ihre Projekte integrieren, welche Fallbacks berücksichtigt werden sollten und wie sich WebP im Vergleich zu AVIF schlägt.

Was ist WebP?

WebP wurde 2010 von Google eingeführt und kombiniert die Stärken bestehender Bildformate:

Lossy- und Lossless-Kompression
Unterstützung von Transparenz (Alpha-Kanal)
Animationen als Ersatz für GIFs
Deutlich kleinere Dateigrößen bei vergleichbarer Qualität

Laut caniuse.com (Stand: September 2025) unterstützen rund 96,8% aller Browser WebP. Eingeschränkt bleiben lediglich ältere Versionen von Internet Explorer und Apple-Geräten vor 2014.

Performance: Warum WebP Ladezeiten reduziert

Bilder machen im Schnitt 50–70% des Datenvolumens einer Webseite aus. Schon eine moderate Reduzierung wirkt sich spürbar auf die Ladezeit aus.

Eigene Tests (2025):

Testbild: 1200×800 JPG (Qualität: 85, Größe: 450 KB)
Tool: cwebp (Google libwebp)
Ergebnis: WebP bei Qualität 80 reduzierte die Datei auf 92 KB

Das entspricht einer Ersparnis von rund 80%. Bei 20 Bildern auf einer Seite summiert sich das auf mehrere MB weniger Transfer – messbar in Tools wie Lighthouse oder WebPageTest.

Konvertierungs-Workflows

WebP lässt sich in bestehende Build-Pipelines und Workflows integrieren. Einige Optionen:

CLI mit libwebp

cwebp -q 80 input.jpg -o output.webp

ImageMagick

magick input.png -quality 80 output.webp

Node.js mit sharp

const sharp = require("sharp");

sharp("input.jpg")
  .webp({ quality: 80 })
  .toFile("output.webp");

Integration in CI/CD

Gulp/Webpack: Post-Build Step mit Bildkomprimierung
GitHub Actions: Automatischer Conversion-Job
Server-Skripte: Nach Deployment alle Bilder umwandeln

Für eine Desktop-Lösung empfiehlt sich außerdem Caesium Image Compressor.

Links vorher (Misch aus .PNG und .JPG) | Rechts nachher (.WebP mit gleicher Qualität)

Kompatibilität & Fallbacks

Auch wenn die Browser-Unterstützung hoch ist, sollten Fallbacks gewährleistet werden. Dafür eignet sich das <picture>-Element:

<picture>
  <source srcset="bild.webp" type="image/webp">
  <img src="bild.jpg" alt="Beispielbild">
</picture>

So erhalten unterstützende Browser die WebP-Datei, alle anderen das JPG oder PNG.

Zusätzlich können Server-Konfigurationen für automatisierte Auslieferung sorgen:

Nginx

location ~* \.(png|jpe?g)$ {
  add_header Vary Accept;
  if ($http_accept ~* "image/webp") {
    rewrite (.*)\.(png|jpe?g)$ $1.webp break;
  }
}

Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME}\.webp -f
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp]
</IfModule>

AVIF vs. WebP

Das AVIF-Format, basierend auf dem AV1-Codec, liefert oft noch kleinere Dateigrößen als WebP bei gleicher Qualität. Allerdings:

Höhere Encoding-Kosten (langsameres Konvertieren)
Noch lückenhafte Tooling-Unterstützung
Nicht vollständige Browser-Abdeckung

Empfehlung für 2025:

Primär WebP verwenden
Optional AVIF als Alternative anbieten

Beispiel mit <picture> für AVIF + WebP + JPG-Fallback:

<picture>
  <source srcset="bild.avif" type="image/avif">
  <source srcset="bild.webp" type="image/webp">
  <img src="bild.jpg" alt="Fallback-Bild">
</picture>

Troubleshooting

Bilder sehen unscharf aus? Prüfen Sie den quality-Parameter. Oft reicht ein Wert zwischen 75–85.
Build bricht ab? Verifizieren Sie, ob libwebp, ImageMagick oder sharp korrekt installiert sind.
Browser zeigt kein Bild? Fallback-Logik und MIME-Type (image/webp) überprüfen.
Lighthouse meldet keine Verbesserung? Caching und CDN sicherstellen, oft liegt das Problem nicht bei den Bildern selbst.

Fazit

WebP bietet eine ausgereifte, breit unterstützte Lösung für performante Bilder im Web. Mit bis zu 80% geringerer Dateigröße beschleunigen Sie Ladezeiten erheblich, verbessern SEO-Signale und steigern die User Experience. Durch <picture>-Fallbacks und einfache Werkzeuge ist die Integration unkompliziert.

Für die Zukunft sollten Entwickler AVIF im Blick behalten und ihre Build-Pipelines so bauen, dass neue Formate flexibel ergänzt werden können. Der Schritt zu WebP lohnt sich dennoch jetzt – für schnellere, effizientere Webseiten.

Quellen & Weiterführende Links

Weitere Artikel zu Web-Performance und Frontend-Optimierung finden Sie auf unserem Admin Code Blog.
Für eine persönliche Beratung zur Anwendung Ihrer Projekte, besuchen Sie unsere Webseite oder nehmen Sie direkt Kontakt mit uns auf.