Lange Zeit galten PNG, JPEG und GIF als Standard im Web. Nicht perfekt, aber akzeptabel. Dabei stammen diese Formate aus einer Zeit, in der das Internet noch kein Ort voller hochauflösender Bilder, Animationen und visueller Inhalte war.
Bilder wurden damals nahezu ausschließlich auf elektronischen Geräten verwendet und nicht auf Webseiten. Die Bildgröße spielte kaum eine Rolle, da die Dateien sowieso über Datenträger oder lokale Netzwerke ausgetauscht wurden.
Dann begann das Internet seine Laufbahn ...
Webseiten bestanden aus eintönigen Farben und zeigten kaum bis keine Bilder. Grafische Elemente waren sparsam, Layouts schlicht, und die meisten Nutzer hatten nur langsame Internetverbindungen.
Bilder waren ein Luxus und kein Standard. Erst mit der zunehmenden Verbreitung schnellerer Verbindungen und farbfähiger Bildschirme begann das Web, sich farbenfroh und visuell reichhaltig zu entwickeln.
Die klassischen Bildformate zeigten von Anfang an, dass ihre Stärke außerhalb des Internets lag. Es musste ein Bildformat speziell für das Internet her, und so wurde WebP geboren.
Die Schwäche der klassischen Formate
Damals ging es vor allem darum, Bilder möglichst detailgetreu zu speichern. Die Dateigröße spielte kaum eine Rolle.
Bilder wurden über Disketten oder Festplatten weitergegeben, nicht über mobile Netze oder ausgelastete Server. Speicher war wichtig, aber Übertragungsgeschwindigkeit war kein Thema.
Und genau hier liegt die Schwäche dieser klassischen Formate. Die Dateigröße.
Eine PNG-Datei mit 20 MB? Technisch kein Problem. Auf einer Festplatte fällt das kaum ins Gewicht. Doch im Web sieht das anders aus. Jede große Datei muss übertragen werden. Über Internetleitungen, über Server, zu Smartphones mit begrenzter Bandbreite.
Gerade im mobilen Internet wird das schnell zum Problem. Verbindungen sind oft langsamer als im heimischen WLAN. Gleichzeitig erwarten Nutzer, dass eine Website sofort lädt. Große Bilddateien passen da einfach nicht mehr ins Bild.
Die logische Lösung: Bilder verkleinern
Bildergröße verkleinern geht auf zwei Wegen:
- durch Verringerung der Auflösung
- durch Komprimierung
JPEG reduziert entweder die Auflösung oder arbeitet mit verlustbehafteter Komprimierung. Die Dateigröße sinkt, aber auch die Bildqualität leidet. PNG kann ebenfalls verkleinert werden, nutzt dabei aber eine verlustfreie Komprimierung. Die Qualität bleibt erhalten, die Dateigröße sinkt dennoch.
Erst durch diese Optimierungen wurde es möglich, dass Bilder, die in einer Zeit vor dem modernen Internet entstanden sind, im Internet allgegenwärtig wurden. Ohne Komprimierung wären viele hochauflösende Bilder schlicht zu groß für eine akzeptable Ladezeit gewesen.
WebP — entwickelt mit Fokus auf das Internet
WebP wurde 2010 von Google vorgestellt und von Anfang an für das Web gedacht. Das Ziel war klar: kleinere Dateigrößen bei gleichbleibender Qualität, schnellere Ladezeiten, bessere Nutzererfahrung.
WebP unterstützt verlustbehaftete und verlustfreie Komprimierung. Transparenz wie PNG. Animationen wie GIF. Und das alles bei deutlich geringeren Dateigrößen.
Ein Traum für Websites: Endlich kann man das Beste von klassischen Bildformaten bekommen und dabei ein Bild erhalten, das kompakt und schnell über das Internet übertragen werden kann.
Die Vorteile von WebP
Die Vorteile sprechen eine deutliche Sprache, weshalb WebP eine schnelle Unterstützung auf nahezu allen elektronischen Geräten und im Internet fand:
- Bessere Komprimierung: WebP bietet eine effizientere Komprimierung als herkömmliche Formate wie JPEG und PNG, was zu kleineren Dateigrößen führt, ohne die Bildqualität wesentlich zu beeinträchtigen.
- Transparenz: WebP unterstützt transparente Hintergründe (Alphakanäle) wie PNG, jedoch mit besserer Kompression, was die Dateigröße reduziert.
- Animationen: WebP ermöglicht die Erstellung animierter Bilder, ähnlich wie GIFs, jedoch mit besserer Bildqualität und kleineren Dateigrößen.
- Hohe Bildqualität: WebP bietet sowohl verlustbehaftete als auch verlustfreie Kompression, was bedeutet, dass eine hohe Bildqualität bei kleineren Dateigrößen beibehalten werden kann.
- Breite Unterstützung: viele moderne Webbrowser unterstützen WebP, was es zu einer praktischen Wahl für die Verwendung im Web macht.
- Schnellere Ladezeiten: durch die kleineren Dateigrößen können Webseiten schneller geladen werden, was die Benutzererfahrung verbessert und die Ladezeiten verkürzt.
WebP komprimiert Bilder deutlich effizienter als JPEG oder PNG. Es unterstützt transparente Hintergründe, ermöglicht animierte Bilder und behält dabei eine hohe Qualität bei deutlich kleineren Dateien. Die meisten modernen Browser erkennen das Format problemlos, und die geringeren Dateigrößen sorgen für spürbar schnellere Ladezeiten.
Technisch nutzt WebP moderne Komprimierungsmethoden wie prädiktive Kodierung. Dabei werden Bildinformationen intelligent analysiert und gespeichert. Das Ergebnis sind oft 25 bis 34 Prozent kleinere Dateien im Vergleich zu JPEG oder PNG bei vergleichbarer Qualität.
WebP in der Praxis
Ein Testbild mit 3840x2160 Pixeln, erstellt mit KI, welches bei den Tests genutzt wurde und hier bereits in der komprimierten Form ist:
Hier ist ein kleiner Vergleich der Bildgröße bei PNG, JPEG und WebP ohne jegliche Komprimierung, also 100 % verlustfrei:
- PNG kommt auf 33 MB
- JPEG auf 3,6 MB
- WebP auf 876 KB
Ohne sichtbaren Qualitätsverlust ist WebP damit 4x kleiner als JPEG und 37x kleiner als PNG. Nach zusätzlicher Komprimierung sieht das Ergebnis wie folgt aus:
- PNG mit maximaler verlustfreier Komprimierung landet bei 5,5 MB
- JPEG bei 629 KB
- WebP bei 203 KB
Auch hier bleibt WebP vorne. Klein, effizient, visuell überzeugend. JPEG schlägt sich solide und ist weiterhin gut einsetzbar. PNG punktet bei maximaler Detailtreue.
Wenn es um möglichst kleine Dateien geht, führen JPEG und WebP. Wenn absolute Detailtreue gefragt ist, spielt PNG seine Stärken aus. PNG ist ungeschlagen, wenn es um Bildqualität geht. Doch für das Web ist WebP deutlich besser geeignet, wie die Vergleiche oben zeigen.
Fazit
WebP wurde für das moderne Internet entwickelt. Für schnelle Ladezeiten, mobile Geräte und hohe Ansprüche an Performance. Immer mehr Websites setzen darauf. Alle großen Browser unterstützen es.
Meine Websites nutzen mittlerweile ausschließlich das WebP-Format. Bereits beim Hochladen werden Bilder von PNG oder JPEG ins WebP-Format konvertiert. Wenn du eine solche automatische Konvertierung brauchst und WordPress hast, dann schau dir das WebP-Konverter-Plugin an.
Der Vorteil der Nutzung des WebP-Formats ist für Websitebetreiber, Entwickler und Nutzer offensichtlich: weniger Daten, schnellere Seiten, bessere Performance.
Es spricht wenig dagegen, WebP heute einzusetzen. Die Frage ist nicht mehr, ob, sondern wann es zum Standard auf nahezu jeder Website wird.
Wer noch eine Schippe drauflegen will bei der Optimierung der Ladezeit und WordPress nutzt, kann mit diesem Cache-Plugin für WordPress beginnen. Das ist ein guter Startpunkt.