// d-01fotos
Verlustbehaftet.
Die Standardvariante für Fotos, abgeleitet aus der Einzelbild-Kodierung von VP8. Bei Qualität um 80 sehen wir keinen sichtbaren Unterschied zum JPG — bei rund einem Viertel weniger Bytes.
ersetzt: jpg
// stack · media
WebP.
Der moderne Allrounder unter den Bildformaten: WebP ist spürbar kleiner als JPEG und PNG, kann Transparenz und Animation — und wird von praktisch jedem Browser verstanden. Bei siteway ist es die zweite Stufe der Kette AVIF → WebP → JPG/PNG, erzeugt beim Build mit sharp in mehreren Breiten.
stack
stack: webp · image/webp
einsatz: picture · stufe 2
format seit: 2010
// definition
Was ist WebP?
WebP ist ein Bildformat für das Web, das Google 2010 veröffentlicht hat. Es speichert
dasselbe Motiv in einer deutlich kleineren Datei als JPEG oder PNG und beherrscht dabei beides in einem
Format: verlustbehaftete Kompression für Fotos, verlustfreie für Grafiken — dazu Transparenz und
Animation. Der MIME-Typ lautet image/webp,
die Dateiendung .webp.
Technisch stammt die verlustbehaftete Variante aus der Einzelbild-Kodierung des Videocodecs VP8, verpackt in einen RIFF-Container. Praktisch heißt das: ein Format statt drei. Was früher JPG für Fotos, PNG für Transparenz und GIF für Animation war, liegt in WebP in einer Datei — und in fast jedem Fall kleiner. Wie WebP im Zusammenspiel mit AVIF und WebM ausgeliefert wird, steht im Überblick Bild- & Videoformate.
// praxis
Wie wir WebP einsetzen.
zweite stufe, breite basis
WebP ist bei uns nie das einzige Format, sondern die mittlere Stufe einer Kette.
Im <picture>-Element stehen die Quellen in
fester Reihenfolge: AVIF zuerst, WebP als zweite source,
JPG oder PNG im img als Fallback. Der Browser prüft
von oben nach unten und lädt genau eine Datei. WebP ist dabei die Stufe, die am seltensten leer bleibt:
Was kein AVIF kann, kann fast immer WebP.
Erzeugt wird das nicht von Hand. Beim Build läuft jedes Original durch sharp,
eine Bildbibliothek für Node.js — daraus entstehen AVIF, WebP und das Fallback, jeweils in mehreren
Breiten für srcset. Für WebP fahren wir zwei
Profile: Fotos verlustbehaftet bei Qualität um 80, Grafiken und Screenshots mit freigestelltem
Hintergrund verlustfrei, weil dort harte Kanten sonst ausfransen. Ändert sich ein Original, wird der
ganze Satz reproduzierbar neu gebaut — über
Git und GitHub Actions, nicht per FTP.
In TYPO3 und WordPress übernimmt die Bildverarbeitung des
CMS dieselbe Aufgabe im Backend: Die Redaktion lädt ein Original hoch, die Ableitungen entstehen serverseitig.
Wichtig ist uns dabei die Regel dahinter — ein Original, alle Formate automatisch.
Sobald jemand Dateien manuell konvertiert, fehlt irgendwann eine Breite oder ein Format, und genau das
Bild wird dann zum größten Posten der Seite. Dazu kommen die zwei Details, die den Unterschied machen:
feste width/height
gegen Layout-Sprünge und loading="lazy" nur
unterhalb des sichtbaren Bereichs.
// datenpunkt · dateigröße
Wie viel WebP spart.
offizielle google-zahlen
Google nennt in der WebP-Dokumentation zwei Werte: verlustbehaftete WebP-Bilder sind bei vergleichbarer Qualität 25 bis 34 % kleiner als JPEG, verlustfreie WebP-Dateien rund 26 % kleiner als PNG. Das deckt sich mit dem, was wir in Projekten messen.
Der exakte Wert hängt vom Motiv ab — flächige Grafiken sparen mehr als stark strukturierte Fotos. Interessant ist nicht der einzelne Prozentwert, sondern die Summe über eine ganze Seite: Bilder sind auf den meisten Websites der größte Posten, und ein Viertel weniger Bytes schlägt direkt aufs Largest Contentful Paint durch.
quelle: Google, WebP-Dokumentation (developers.google.com/speed/webp)
// bausteine · 6 details
Was WebP kann.
ein format, mehrere aufgaben
WebP ist deshalb der Allrounder, weil es die Aufgaben von drei alten Formaten übernimmt. Das sind die Eigenschaften, die in unseren Projekten tatsächlich zum Tragen kommen — und die Grenzen, die man kennen sollte.
// d-02grafik
Verlustfrei.
Für Screenshots, Diagramme und harte Kanten: WebP speichert Pixel für Pixel exakt — und liegt laut Google rund 26 % unter dem gleichwertigen PNG. Wir nutzen das überall dort, wo Text im Bild lesbar bleiben muss.
ersetzt: png
// d-03freisteller
Transparenz.
WebP hat einen echten Alphakanal. Logos, Freisteller und Produktbilder ohne Hintergrund funktionieren wie bei PNG — nur deutlich kleiner. Ein Grund, warum wir Freisteller nicht mehr als PNG ausliefern.
feature: alpha
// d-04bewegung
Animation.
Mehrere Frames in einer Datei, mit Loop — der praktische GIF-Ersatz für kurze Schleifen und UI-Demos, bei erheblich besserer Kompression. Längeres gehört ins Video als WebM mit MP4-Fallback.
ersetzt: gif
// d-05support
Browser-Support.
Chrome seit 2010, Opera seit 2011, Edge ab Windows 10 1809, Firefox ab 65, Safari ab 14. Laut caniuse.com rund 96 % aller Nutzer. Das ist der eigentliche Grund, warum WebP die zweite Stufe trägt und nicht die dritte.
reichweite: ~96 %
// d-06grenzen
Grenzen.
WebP arbeitet mit 8 Bit Farbtiefe und 4:2:0-Unterabtastung — kein HDR, keine 10 oder 12 Bit. Und die Kantenlänge endet bei 16.383 Pixeln. Für Panoramen und HDR-Motive nehmen wir AVIF.
limit: 8 bit · 16.383 px
// faq
Häufige Fragen.
Was ist WebP?
WebP ist ein Bildformat für das Web, das Google 2010 veröffentlicht hat. Es speichert dasselbe Motiv in einer deutlich kleineren Datei als JPEG oder PNG und beherrscht beides in einem Format: verlustbehaftete Kompression für Fotos, verlustfreie für Grafiken, dazu Transparenz und Animation. Technisch basiert die verlustbehaftete Variante auf der Einzelbild-Kodierung des Videocodecs VP8, der MIME-Typ lautet image/webp. Praktisch heißt das: ein Format statt JPG für Fotos, PNG für Transparenz und GIF für Animation. siteway liefert WebP als zweite Stufe im picture-Element aus — hinter AVIF, vor dem JPG- oder PNG-Fallback.
Wie viel kleiner sind WebP-Bilder als JPEG und PNG?
Google gibt in der offiziellen WebP-Dokumentation an: verlustbehaftete WebP-Bilder sind bei vergleichbarer Qualität 25 bis 34 Prozent kleiner als JPEG, verlustfreie WebP-Dateien rund 26 Prozent kleiner als PNG. Diese Größenordnung deckt sich mit dem, was siteway in Projekten misst — der exakte Wert hängt vom Motiv ab. Flächige Grafiken sparen mehr als stark strukturierte Fotos. Entscheidend ist nicht der einzelne Prozentwert, sondern die Summe über eine ganze Seite: Bilder sind auf den meisten Websites der größte Posten in der Ladezeit.
WebP oder AVIF — was ist besser?
Die beiden konkurrieren nicht, sie ergänzen sich. AVIF komprimiert stärker — rund 50 Prozent unter JPEG — und beherrscht höhere Farbtiefe und HDR. WebP wird dafür von praktisch jedem Browser verstanden, kodiert deutlich schneller und wird von jedem Bildwerkzeug, CMS und Plugin unterstützt. siteway liefert deshalb beide aus: AVIF als erste Quelle für alle, die es können, WebP als zweite für den Rest. Wer sich auf ein einziges modernes Format festlegen muss — etwa in einem CMS ohne picture-Unterstützung — nimmt WebP, weil es überall ankommt.
Welche Browser unterstützen WebP?
Alle aktuellen: Chrome seit 2010, Opera seit 2011, Edge seit Windows 10 Version 1809, Firefox seit Version 65 und Safari seit Version 14. Laut caniuse.com erreicht WebP damit rund 96 Prozent aller Nutzer weltweit. Ohne Unterstützung bleiben im Wesentlichen der Internet Explorer und sehr alte Mobilbrowser. siteway hinterlegt trotzdem ein JPG oder PNG im img-Tag — ein Fallback kostet in der Build-Pipeline nichts und verhindert, dass irgendjemand ein kaputtes Bild sieht.
Kann WebP Transparenz und Animation?
Ja, beides. WebP hat einen Alphakanal — Transparenz funktioniert wie bei PNG, aber in einer deutlich kleineren Datei. Und WebP kann mehrere Frames speichern, also animierte Bilder wie ein GIF, nur mit erheblich besserer Kompression. Genau das macht WebP zum praktischen Allrounder: Logo mit freigestelltem Hintergrund, Produktfoto und kurze Animation liegen im selben Format. Für längere Bewegtbilder greift siteway trotzdem zu echtem Video als WebM mit MP4-Fallback — ein animiertes Bild bleibt ein Bild und wird ab einer gewissen Länge unnötig groß.
Wie erzeugt siteway die WebP-Dateien?
Automatisch beim Build mit sharp, einer schnellen Bildbibliothek für Node.js. Aus einem hochgeladenen Original entstehen AVIF, WebP und ein JPG- oder PNG-Fallback, jeweils in mehreren Breiten für srcset. Ändert sich das Original, wird der ganze Satz reproduzierbar neu erzeugt — keine Handarbeit in Photoshop, keine Datei, die jemand zu konvertieren vergisst. In TYPO3 und WordPress übernimmt die Bildverarbeitung des CMS dieselbe Aufgabe im Backend, sodass auch die Redaktion nur ein Original hochlädt.
Braucht man mit WebP noch ein JPG-Fallback?
Technisch fast nicht mehr — praktisch kostet es nichts, also behält siteway es. Über das picture-Element hinterlegen wir mehrere Quellen in fester Reihenfolge: AVIF, dann WebP, dann JPG oder PNG im img-Tag. Der Browser prüft von oben nach unten und lädt genau eine Datei. Das Fallback ist nebenbei die Versicherung für Fälle jenseits des Browsers: E-Mail-Clients, PDF-Exporte, ältere Vorschau-Dienste und manche Social-Crawler kommen mit WebP bis heute nicht zuverlässig klar.
// womit das zusammenhängt
Womit das zusammenhängt.
leistung & stack
// stack · überblick
Bild- & Videoformate.
Die Kategorie über WebP: AVIF, WebP und WebM im Zusammenspiel, picture, srcset/sizes und Lazy Loading — die ganze Auslieferung auf einer Seite.
zum stack →
// stack · schwesterformat
AVIF.
Die erste Stufe der Kette: stärkere Kompression, höhere Farbtiefe, HDR. Wo WebP auf Kompatibilität setzt, holt AVIF das letzte Byte heraus.
weiterlesen →
// leistung · buchen
Portfolio- & Media-Galerie.
Diese Formate als fertiger Baustein: eine Galerie, die viele Motive schnell und responsive ausliefert. Der Ort, an dem du das buchst.
zur leistung →
// Bilder, die nicht bremsen?
Projekt anfragen