WebP
Was ist WebP?
WebP ist ein für Websites entwickeltes Bildformat, das verlustbehaftete und verlustfreie Kompression unterstützt. WebP kann Fotos, Grafiken, transparente Hintergründe und Animationen speichern. Durch eine geringere Dateigröße kann das Format die Übertragungszeit von Bildern reduzieren und dadurch die Ladegeschwindigkeit einer Website verbessern.
WebP (englisch: Web Picture Format) bündelt Eigenschaften, für die früher häufig mehrere Formate nötig waren. Das Format eignet sich für detailreiche Fotos ebenso wie für Grafiken mit transparenten Bereichen. Die Dateiendung lautet .webp, als MIME-Typ wird image/webp übertragen.
Wie funktioniert WebP?
WebP komprimiert Bildinformationen, damit weniger Daten gespeichert und über das Internet übertragen werden müssen. Bei der verlustbehafteten Kompression entfernt der Encoder Bildinformationen, die für das menschliche Auge weniger auffällig sind. Bei der verlustfreien Variante bleiben die Bilddaten vollständig erhalten, die Datei fällt dafür meist größer aus.
Die Wahl zwischen verlustbehafteter und verlustfreier Kompression hängt vom Motiv ab. Fotos vertragen in der Regel eine moderate verlustbehaftete Kompression. Logos, Benutzeroberflächen, Screenshots und Grafiken mit scharfen Konturen benötigen häufiger eine hohe Qualität oder eine verlustfreie Speicherung.
WebP im Vergleich zu JPEG und PNG
Der Unterschied zwischen WebP und JPEG liegt vor allem im Funktionsumfang. JPEG eignet sich für Fotos und arbeitet üblicherweise verlustbehaftet, unterstützt jedoch keine transparenten Bildbereiche. WebP kann ebenfalls Fotos komprimieren und zusätzlich Transparenz sowie verlustfreie Speicherung abbilden.
Der Unterschied zwischen WebP und PNG betrifft vor allem die typische Verwendung. PNG eignet sich für verlustfreie Grafiken und transparente Hintergründe, erzeugt bei komplexen Motiven aber oft umfangreiche Dateien. WebP kann vergleichbare Funktionen mit einer anderen Kompressionsmethode bereitstellen. Die tatsächlich kleinere Datei muss für jedes Motiv geprüft werden.
| Format | Typischer Einsatz | Transparenz | Animation | Kompression |
|---|---|---|---|---|
| WebP | Fotos, Grafiken, Produktbilder | Ja | Ja | Verlustbehaftet und verlustfrei |
| JPEG | Fotos und detailreiche Motive | Nein | Nein | Verlustbehaftet |
| PNG | Logos, Screenshots und Grafiken | Ja | Nein | Verlustfrei |
| GIF | Einfache Animationen | Eingeschränkt | Ja | Verlustfrei mit begrenzter Farbpalette |
| AVIF | Fotos und moderne Webanwendungen | Ja | Ja | Verlustbehaftet und verlustfrei |
| SVG | Logos, Icons und Illustrationen | Ja | Über Code möglich | Vektorbasiert |
Was bringt WebP für SEO?
WebP wirkt nicht direkt als Ranking-Faktor. Das Format kann SEO unterstützen, wenn kleinere Bilddateien schneller übertragen und dargestellt werden. Besonders relevant ist das bei einem großen Titelbild, das als Largest Contentful Paint, kurz LCP, gemessen wird. Bleiben Abmessungen, Serverantwort und Ladepriorität unverändert, kann eine kleinere Datei den Ladevorgang verkürzen.
Eine Umstellung auf WebP verbessert die Core Web Vitals nicht automatisch. Ein Bild kann trotz moderner Kompression langsam laden, wenn es in unnötig großen Abmessungen ausgeliefert wird, der Server spät antwortet oder ein ungeeignetes Lazy Loading das sichtbare Titelbild verzögert. Prüfe deshalb Dateiformat, Pixelmaße, Kompression und Ladeverhalten gemeinsam.
srcset und sizes, damit der Browser eine zur Bildschirmgröße passende Bildvariante auswählen kann. Auswirkungen auf Ladezeit und LCP
Messbar ist WebP zum Beispiel so: Vergleiche vor und nach der Umstellung die übertragenen Bilddaten, die Ladezeit der betroffenen Ressource und den LCP der URL. Der Vergleich muss unter denselben Testbedingungen stattfinden. Unterschiedliche Geräte, Netzwerkgeschwindigkeiten oder Cache-Zustände machen zwei Messungen sonst nur eingeschränkt vergleichbar.
Bilddateien mit mehr als 1 MB werden bei technischen Prüfungen häufig als Warnsignal behandelt. Eine starre optimale Dateigröße gibt es jedoch nicht, weil ein kleines Icon andere Anforderungen hat als ein großformatiges Produktfoto. Responsive Bilder, Kompression und Lazy Loading reduzieren die initial übertragene Datenmenge gezielt.
Prüfe die übertragenen Bilddaten deiner Website mit dem kostenlosen Ladezeiten-Check. Der Test zeigt, an welchen Stellen große Ressourcen den Seitenaufbau belasten.
WebP richtig einbinden
WebP kann wie jedes andere Rasterbild über das HTML-Element <img> eingebunden werden. Breite und Höhe sollten im HTML angegeben sein, damit der Browser den benötigten Platz bereits vor dem Download reserviert. Dadurch lassen sich Layoutverschiebungen reduzieren, die beim Cumulative Layout Shift, kurz CLS, gemessen werden.
Für kompatible Ersatzformate kann das <picture>-Element verwendet werden. Der Browser prüft die angebotenen Quellen in ihrer Reihenfolge und lädt das erste unterstützte Format. Ein JPEG oder PNG im abschließenden <img>-Element dient als Fallback für ältere Systeme oder spezielle eingebettete Browser.
<picture>
<source srcset='produkt.webp' type='image/webp'>
<img src='produkt.jpg' width='800' height='600' alt='Produkt in der Seitenansicht'>
</picture>
Das Bildformat ersetzt keine vollständige Onpage-Optimierung. Aussagekräftige Alt-Texte, passende Dateinamen und ein korrekter Bildkontext helfen Suchmaschinen, das Motiv zu verstehen. Der Alt-Text beschreibt den sichtbaren Inhalt und sollte keine Aneinanderreihung von Keywords enthalten.
WebP-Unterstützung 2026
WebP wird von aktuellen Versionen der verbreiteten Browser unterstützt. Ein Fallback bleibt sinnvoll, wenn eine Website ältere Unternehmenssoftware, eingebettete Browser in Apps oder spezielle Ausgabesysteme bedienen muss. Die passende Entscheidung ergibt sich aus den Browserdaten der eigenen Besucher und nicht allein aus einer allgemeinen Kompatibilitätsliste.
Der Server muss WebP mit dem korrekten MIME-Typ image/webp ausliefern. Liefert der Server einen falschen Content-Type oder verweist das HTML auf eine nicht erzeugte Datei, kann das Bild trotz Browser-Unterstützung fehlen. Prüfe nach einer Umstellung mehrere Seitenvorlagen, mobile Ansichten und den Netzwerkbereich der Browser-Entwicklerwerkzeuge.
Typische Fehler bei WebP
Der häufigste Denkfehler besteht darin, eine vorhandene JPEG- oder PNG-Datei lediglich in WebP umzubenennen. Eine geänderte Dateiendung konvertiert keine Bilddaten. Das Bild muss durch ein Bildbearbeitungsprogramm, das Content-Management-System oder einen serverseitigen Konverter neu codiert werden.
Eine saubere Bildoptimierung beginnt beim Ausgangsmaterial. Bewahre das Original in hoher Qualität auf und erzeuge daraus die benötigten Größen und Formate. Bei einem Website-Relaunch sollten alle Bildpfade, Weiterleitungen und Vorlagen vor dem Livegang getestet werden.
Häufige Fragen zu WebP
Was ist eine WebP-Datei?
Eine WebP-Datei ist ein komprimiertes Rasterbild für Websites. Das Format kann Fotos, Grafiken, transparente Flächen und Animationen speichern.
Ist WebP besser als JPEG?
WebP bietet mehr Funktionen als JPEG und kann bei vergleichbarer sichtbarer Qualität kleiner ausfallen. Ob das Ergebnis tatsächlich besser ist, hängt vom Motiv, der Qualitätsstufe und dem verwendeten Encoder ab.
Kann WebP einen transparenten Hintergrund haben?
Ja, WebP unterstützt einen Alphakanal für vollständig oder teilweise transparente Bildbereiche. Dadurch eignet sich das Format für freigestellte Produkte, Logos und grafische Elemente.
Kann Google WebP-Bilder indexieren?
Ja, Google kann WebP-Bilder crawlen und in der Bildersuche indexieren. Voraussetzung sind erreichbare Bilddateien, ein korrekter MIME-Typ und eine technisch zugängliche Einbindung.
Wie kann ich WebP in JPG umwandeln?
WebP lässt sich mit Bildbearbeitungsprogrammen, Betriebssystemfunktionen oder Online-Konvertern in JPEG umwandeln. Transparente Bereiche gehen dabei verloren, weil JPEG keine Transparenz unterstützt.
Warum lässt sich eine WebP-Datei nicht öffnen?
Eine WebP-Datei lässt sich möglicherweise nicht öffnen, wenn das verwendete Programm das Format nicht unterstützt oder die Datei beschädigt ist. Ein aktueller Browser oder ein modernes Bildbearbeitungsprogramm kann die Datei in der Regel anzeigen.
Wenn du Bildformate, Ladezeiten und technische SEO gemeinsam prüfen lassen möchtest, zeigt ein unverbindlicher Potenzialcheck, welche Maßnahmen für deine Website sinnvoll sind.
Sie haben noch Fragen?
