WebP: Das moderne Bildformat für schnelle Webseiten
WebP ist ein modernes Bildformat, das von Google entwickelt wurde, um Bilder im Web effizienter darzustellen. Es bietet im Vergleich zu traditionellen Formaten wie JPEG oder PNG deutlich kleinere Dateigrößen - bei gleichbleibender oder sogar besserer Bildqualität.
Was ist WebP?
WebP (ausgesprochen: "Weppy") ist ein verlustfreies und verlustbehaftetes Komprimierungsformat für Bilder. Es basiert auf dem VP8-Video-Codec und unterstützt neben hoher Kompression auch Features wie Transparenz (Alpha-Kanal) und Animationen.
Vorteile von WebP
- Kleinere Dateigrößen: Im Schnitt 25 bis 35 Prozent kleiner als JPEG oder PNG.
- Schnellere Ladezeiten: Weniger Daten bedeuten schnellere Webseiten - besonders auf Mobilgeräten.
- SEO-Vorteil: Schnelle Ladezeiten wirken sich positiv auf das Google-Ranking aus.
- Unterstützt Transparenz und Animationen: Alternative zu PNG und GIF.
- Browser-Kompatibilität: WebP wird mittlerweile von allen modernen Browsern unterstützt.
Wo kann man WebP-Bilder speichern oder konvertieren?
Du kannst Bilder direkt in WebP exportieren oder bestehende Dateien in das Format umwandeln. Hier einige Optionen:
| Tool | Funktion | Website |
|---|---|---|
| Squoosh | Komprimierung & Konvertierung | squoosh.app |
| Convertio | Online-Konverter für viele Formate | convertio.co |
| Adobe Photoshop | Mit WebP-Plugin exportierbar | In Kombination mit Google WebP-Codec |
| GIMP | Kostenlose Bildbearbeitung mit WebP-Unterstützung | gimp.org |
So arbeitest du in 4 Schritten mit WebP
Bild auswählen
Nutze ein vorhandenes PNG oder JPEG oder bearbeite ein neues Bild in einem Grafikprogramm.
Optimieren & testen
Komprimiere das Bild so stark wie möglich, ohne sichtbare Qualitätseinbußen. Teste die Darstellung auf verschiedenen Endgeräten und Browsern.
Im HTML einbinden
Nutze das WebP direkt mit <img src="bild.webp" alt="Beispielbild"> oder setze mit <picture>-Elementen Fallbacks für alte Browser.
SEO- und Performance-Tipp
Ersetze große PNG- oder JPEG-Bilder auf Landingpages und in Blogbeiträgen durch WebP. Tools wie PageSpeed Insights geben konkrete Hinweise, welche Bilder zu groß sind oder nicht optimal eingebunden wurden.
WebP in Content-Management-Systemen (CMS)
Immer mehr Content-Management-Systeme (CMS) wie WordPress, Joomla oder TYPO3 bieten mittlerweile eine native Unterstützung für WebP-Bilder an. In WordPress ist WebP seit Version 5.8 direkt im Mediathek-Upload integriert. Alternativ können Plugins wie Imagify, ShortPixel oder Smush genutzt werden, um bestehende Bilder automatisch in WebP umzuwandeln.
Auch Headless-CMS und E-Commerce-Plattformen wie Shopify oder Magento integrieren WebP als Standardoption, da Ladezeiten und Bildoptimierung inzwischen zentrale SEO-Faktoren darstellen. Ein automatischer Konvertierungs-Workflow hilft dabei, Inhalte – insbesondere in Webshops – skalierbar und performant bereitzustellen.
Kompatibilität und Fallbacks für WebP
Auch wenn WebP von allen modernen Browsern wie Chrome, Edge, Firefox, Safari und Opera unterstützt wird, kann es in Einzelfällen notwendig sein, einen Fallback für ältere Browser bereitzustellen. Dazu eignet sich das <picture>-Element, das verschiedene Bildformate je nach Browserwahl ausliefert.
<picture>
<source srcset="bild.webp" type="image/webp">
<source srcset="bild.jpg" type="image/jpeg">
<img src="bild.jpg" alt="Beispielbild">
</picture>So wird bevorzugt das WebP geladen - ist dieses Format jedoch nicht verfügbar, wird das klassische JPEG angezeigt. Diese Technik sorgt für maximale Kompatibilität bei gleichzeitig optimaler Performance.
Leadsleader ist spezialisiert auf SEO, Google Ads und Online-Marketing – unsere Bibliothek ergänzt dies mit praxisnahen Einblicken und fundiertem Wissen.
