FlowingDev

WebP, erklärt: Das formwandelnde Bildformat, das das Web auf Diät gesetzt hat

Verstehe, wie WebP prädiktive Videokodierung nutzt, um Bilder kleiner als JPEG und PNG zu komprimieren, ohne an Qualität zu verlieren – und so lebenswichtige Bandbreite im Web spart.

Tool ausprobieren: WebP-Konverter

In einem Satz

WebP ist ein modernes, von Google entwickeltes Bildformat, das sich Tricks aus der Videokompression ausleiht, um Bilder in deutlich kleinere Dateigrößen als JPEGs oder PNGs zu quetschen – und das bei exakt gleicher visueller Qualität.

Welches Problem es löst

Sehr lange Zeit wurde das Internet visuell von einem angespannten, zerbrechlichen Waffenstillstand zwischen zwei verfeindeten Fraktionen angetrieben: JPEG und PNG. (GIF war auch noch da und hat in der Ecke Lärm gemacht, aber dazu kommen wir noch).

Wenn man ein Foto mit Millionen von Farben hatte, nutzte man JPEG. JPEG war "lossy" (verlustbehaftet), was bedeutet, dass es Daten wegwarf, die unsere Augen angeblich eh nicht sehen konnten, um Platz zu sparen. Hatte man ein Logo, gestochen scharfen Text oder brauchte einen transparenten Hintergrund, griff man zu PNG. PNG war "lossless" (verlustfrei) – es hielt jeden einzelnen Pixel perfekt, aber als Resultat konnten die Dateigrößen astronomisch fett werden. Und wenn man eine Animation wollte? Dann nutzte man GIF, ein uraltes Format aus dem Jahr 1987, das schmerzhaft ineffizient und auf 256 Farben limitiert war.

Das Problem war, dass Bilder irgendwann über 60 % der heruntergeladenen Bytes einer durchschnittlichen Webseite ausmachten. Als sich die Welt von Desktop-Rechnern mit Breitband-Internet hin zu Handys in wackeligen 3G-Netzen verschob, wurden diese aufgeblähten Bildformate zu einem massiven Klotz am Bein. Langsam ladende Bilder bedeuteten frustrierte User, verlassene Warenkörbe und ein Web, das sich anfühlte, als würde man durch Sirup waten.

Etwa 2010 entschied Google, dass dieses Zwei-Formate-System kaputt war. Sie hatten kurz zuvor On2 Technologies übernommen, eine Firma, die ein Videokompressionsformat namens VP8 baute. Googles Engineers hatten einen Heureka-Moment: Ein Video ist im Grunde nur eine schnelle Abfolge von Standbildern. Was wäre, wenn man den "Standbild"-Teil ihres hochmodernen VP8-Video-Codecs herausreißt und ihn als eigenständige Bilddatei verpackt?

WebP war geboren. Seine Mission: das "One Format to rule them all" zu sein. Es unterstützte Lossy-Kompression, die JPEG schlug, Lossless-Kompression, die PNG in den Schatten stellte, Transparenz (Alpha-Channel) und sogar Animationen, um das GIF endlich in Rente zu schicken.

Wie es unter der Haube funktioniert

Um zu verstehen, warum WebP so effizient ist, muss man sich ansehen, wie es trickst. Es speichert dein Bild nämlich gar nicht Pixel für Pixel; es speichert Anweisungen, wie man mathematisch erraten kann, wie dein Bild aussieht.

Lossy-Kompression: Prädiktive Kodierung

Wenn WebP im "Lossy"-Modus (dem JPEG-Ersatz) arbeitet, nutzt es Predictive Coding (prädiktive Kodierung), einen Trick, der direkt vom VP8-Video-Codec geerbt wurde.

WebP unterteilt dein Bild in "Makroblöcke" – Raster von 16x16 oder 4x4 Pixeln. Anstatt die Farbe jedes Pixels in einem Block unabhängig voneinander zu speichern, schaut sich der WebP-Encoder die Blöcke direkt über und links von dem aktuellen Block an. Er fragt sich: "Basierend auf den Pixeln, die ich bereits gezeichnet habe, kann ich vorhersagen, wie dieser nächste Block aussehen wird?"

Da die meisten Fotos durchgehende Farbflächen haben (wie ein blauer Himmel, eine glatte Wange oder ein Schatten), ist die Vorhersage oft sehr genau. WebP speichert dann nur noch das Residuum (den Restwert) – die mathematische Differenz zwischen seiner Vorhersage und dem tatsächlichen Bild.

Indem WebP nur diese winzigen Differenzen speichert anstatt der kompletten Pixeldaten, schrumpft die Dateigröße drastisch.

Lossless-Kompression: Ein ganz anderes Biest

Lossless WebP (der PNG-Ersatz) nutzt kein VP8. Es verwendet ein völlig anderes Set an Techniken, das von Google speziell für WebP entwickelt wurde. Es verlässt sich auf einen mehrstufigen Ansatz:

  1. Räumliche Vorhersage (Spatial Prediction): Wie sein Lossy-Geschwisterchen versucht es, Pixel basierend auf ihren Nachbarn vorherzusagen.
  2. Farbtransformation: Es trennt die Farbdaten auf, um Redundanzen zu finden.
  3. Grün ist König: Es nutzt den Grün-Kanal als Basis und sagt die Rot- und Blau-Werte basierend auf den Grün-Werten voraus (weil das menschliche Auge für Grün am empfindlichsten ist).
  4. LZ77-Kompression: Zu guter Letzt nimmt es all diese optimierten Daten und jagt sie durch eine erweiterte Version des wörterbuchbasierten LZ77-Kompressionsalgorithmus.

Die Dateistruktur (RIFF)

Ganz tief drunten ist WebP in einen leichtgewichtigen Container namens RIFF (Resource Interchange File Format) eingepackt. RIFF ist eine getaggte Dateistruktur, was bedeutet, dass eine WebP-Datei in "Chunks" (Blöcken) organisiert ist. Das erlaubt es dem Format, problemlos Metadaten (wie EXIF-Daten von deiner Kamera) oder ICC-Farbprofile anzuhängen, ohne das eigentliche Bild kaputtzumachen.

Feature JPEG PNG GIF WebP
Lossy-Kompression Ja Nein Nein Ja
Lossless-Kompression Nein Ja Ja Ja
Transparenz (Alpha) Nein Ja 1-bit Ja (Lossy & Lossless)
Animation Nein Nein Ja Ja
Durchschn. Ersparnis Baseline Baseline Baseline ~25-34 % kleiner

Storys aus der echten Welt

Die E-Commerce-Lawine

Ein mittelständischer Online-Shop für Kleidung bemerkte, dass seine Bounce-Rate auf mobilen Geräten extrem hoch war. Ein Audit deckte auf, dass ihre Produktkatalog-Seiten fast 15 Megabyte an hochauflösenden JPEGs herunterluden. Der mobile Browser verbrachte seine gesamte Zeit damit, riesige Bilder von Strickjacken zu parsen.

Das Engineering-Team baute eine automatisierte Pipeline, um unterstützten Browsern WebP-Bilder auszuliefern. Durch das Feintuning der Lossy-Kompression behielten sie exakt die visuelle Schärfe bei, die nötig war, um Stofftexturen zu zeigen, drückten aber den gesamten Page-Payload auf 3,5 Megabyte. Die Ladezeit der Seite rauschte um 4 Sekunden in den Keller. Als Folge schossen die mobilen Conversion-Raten um 18 % in die Höhe.

Die Lektion: Bild-Bytes korrelieren umgekehrt mit dem Umsatz. Wenn du kleinere Dateien auslieferst, bleiben die User lange genug auf der Seite, um tatsächlich etwas zu kaufen.

Das transparente Hero-Image

Ein Webdesigner entwarf eine wunderschöne Landingpage für ein neues SaaS-Produkt. Die Hero-Section zeigte eine komplexe 3D-Illustration eines Server-Racks, das über einem dynamischen, CSS-gesteuerten Gradient-Hintergrund schwebte. Damit das funktionierte, brauchte das Bild des Server-Racks einen transparenten Hintergrund.

Der Designer exportierte es als PNG-24 mit Alpha-Channel. Wegen der komplexen Schattierungen und der Millionen von Farben im 3D-Render wog das PNG massive 2,2 Megabyte. Das Laden fühlte sich an wie eine Zeitreise zurück ins Jahr 2004.

Der Entwickler nahm dieses PNG und konvertierte es zu WebP. Dabei nutzte er eine ganz spezielle WebP-Superkraft: Lossy RGB mit einem Lossless Alpha-Channel. Das bedeutete, die Farben wurden komprimiert wie bei einem JPEG, aber die Transparenz blieb pixelperfekt, ganz ohne unsaubere Kanten. Die resultierende WebP-Datei war 210 Kilobyte groß – eine 90%ige Größenreduktion ohne jeglichen spürbaren Qualitätsverlust.

Die Lektion: Man muss sich nicht mehr zwischen satten, fotografischen Farben und einem transparenten Hintergrund entscheiden. WebP kann beides gleichzeitig.

Der Meme-lastige Blog

Ein beliebter Popkultur-Blog verließ sich stark auf animierte GIFs, um Filmausschnitte und Reactions zu zeigen. Ein einziger Artikel enthielt oft fünf GIFs, zog mal eben 20 Megabyte an Daten und ließ ältere Laptops wie Düsenjets klingen, weil die CPU beim Dekodieren dieses antiken Formats an ihre Grenzen stieß.

Sie migrierten ihre Mediathek zu Animated WebP. Weil GIFs jeden einzelnen Frame als vollständiges Bild speichern, während Animated WebP videoähnliche Kompression nutzt, um nur die Unterschiede zwischen den Frames zu speichern, waren die Einsparungen astronomisch. Aus einem 5-MB-GIF wurde ein 800-KB-WebP. Die CPU-Auslastung fiel ins Bodenlose.

Die Lektion: Das GIF-Format gehört in ein Museum. Für kurze, loopende Animationen im Web sind moderne Formate wie WebP (oder echte MP4/WebM-Videos) haushoch überlegen.

Häufige Fehler und Fallen

  • Die Double-Lossy-Falle: Ein stark komprimiertes, mit Artefakten übersätes JPEG in ein Lossy-WebP umzuwandeln, ist eine dumme Idee. Der WebP-Algorithmus wird nämlich versuchen, diese hässlichen JPEG-Blöcke perfekt zu erhalten, da er sie als Teil des Bildes betrachtet. Das kann zu einer größeren Dateigröße oder einem noch unschärferen Bild führen. Konvertiere immer aus der qualitativ hochwertigsten Quelle (wie einer RAW-Datei, einem hochauflösenden PNG oder dem unkomprimierten Original-JPEG).
  • Das HTML-<picture>-Element vergessen: Obwohl WebP heute weltweiten Browser-Support von rund 97 % genießt, war es jahrelang eine reine Google-Party. Apples Safari ließ sich mit dem WebP-Support bis Ende 2020 Zeit. Wenn du wirklich uralte Browser unterstützen musst, kannst du nicht einfach ein .webp in einen <img>-Tag klatschen. Du musst das <picture>-Element verwenden, um einen Fallback anzubieten:
    <picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Ein zuverlässiger Fallback">
</picture>
  • Davon ausgehen, dass WebP immer am kleinsten ist: WebP ist fantastisch, aber es ist keine Zauberei. Für unfassbar simple Vektorformen mit flachen Farben (wie ein minimalistisches Logo) ist ein SVG fast immer kleiner und noch dazu unendlich skalierbar. Ähnlich schlagen neuere Formate der nächsten Generation wie AVIF WebP oft bei den reinen Kompressionsraten, auch wenn AVIF viel mehr Rechenpower zum Kodieren braucht.
  • Die Encoding-Zeit auf dem Server ignorieren: WebP benötigt deutlich mehr CPU-Power beim Komprimieren als JPEG. Wenn du WebP-Bilder on-the-fly generierst, sobald ein User sie anfragt, kann die für das Kodieren benötigte CPU-Zeit leicht eine Verzögerung verursachen, die die eingesparte Bandbreite wieder zunichtemacht. WebP-Konvertierung sollte im Voraus passieren (während des Build-Prozesses oder beim Upload), nicht dynamisch beim ersten Render.

Warum es auf dein Radar gehört

Wenn du Dinge fürs Internet baust, ist Web-Performance kein Luxus mehr; es ist eine Grundvoraussetzung. Suchmaschinen wie Google bestrafen langsame Websites aktiv in ihren Rankings und gewichten Metriken, die als Core Web Vitals bekannt sind (insbesondere Largest Contentful Paint oder LCP), enorm stark. Da der "größte Content" (Largest Content) auf einem Bildschirm meistens ein Bild ist, ist die Optimierung dieses Bildes der schnellste Weg, deine SEO zu verbessern.

Außerdem kostet Bandbreite Geld – sowohl für dich (AWS Data Egress-Gebühren sind berüchtigt hoch) als auch für deine User mit begrenzten Daten-Tarifen in Schwellenländern.

Wann immer du mit usergenerierten Avataren, massiven Marketing-Landingpages, Fotogalerien oder E-Commerce-Katalogen hantierst, ist WebP die pragmatische Standardwahl der 2020er Jahre. Es bietet die beste Balance aus breitem Browser-Support, exzellenter visueller Qualität und drastischer Reduzierung der Dateigröße.

Tiefer eintauchen

Theorie erledigt. Zeit, loszulegen — 100 % in deinem Browser.

Tool ausprobieren: WebP-Konverter