Bilder fürs Web zu optimieren bedeutet vor allem zwei Dinge gleichzeitig richtig zu machen: das richtige Format wählen und die richtige Größe ausliefern. Laut Googles eigener Dokumentation sind WebP-Dateien im Schnitt 25 bis 35 Prozent kleiner als vergleichbare JPEGs und bis zu 80 Prozent kleiner als PNGs, bei kaum sichtbarem Qualitätsverlust. Wer nur das Format wechselt, aber weiterhin unbearbeitete Kamerafotos in voller Auflösung hochlädt, verschenkt trotzdem den Großteil des möglichen Ladezeitgewinns.
WebP im Vergleich: Wie viel kleiner sind Bilder wirklich?
Nach Angaben aus Googles offizieller WebP-Dokumentation spart die Umstellung auf WebP bei JPEGs typischerweise 25 bis 35 Prozent Dateigröße, bei PNGs sogar bis zu 80 Prozent – Facebook maß bei der eigenen Umstellung genau diese Bandbreite, YouTube erreichte durch WebP-Vorschaubilder 10 Prozent schnellere Seitenladezeiten. Wer Bilder mit WebP optimieren will, profitiert also unabhängig vom Bildinhalt: Fotos, Grafiken und Screenshots werden gleichermaßen kleiner. Die folgende Tabelle ordnet die gängigen Bildformate nach ihrem typischen Einsatzzweck ein:
| Format | Typische Dateigröße | Einsatzzweck |
|---|---|---|
| JPEG | Ausgangswert | Fotos, weit verbreitet, aber nicht das kleinste Format |
| PNG | Oft deutlich größer als JPEG | Logos, Grafiken mit Transparenz, scharfe Kanten |
| WebP | 25-35 % kleiner als JPEG, bis zu 80 % kleiner als PNG | Fotos und Grafiken gleichermaßen, heute von allen gängigen Browsern unterstützt |
Das unterschätzte Problem: Bildgröße statt nur Format
Ein modernes Smartphone fotografiert häufig mit 12 bis 48 Megapixeln, was unbearbeitete Dateien von 3 bis 5 MB pro Foto ergibt – auf der Website angezeigt wird dieses Foto aber oft nur mit einer Breite von 600 bis 900 Pixeln, also einem Bruchteil der Originalauflösung. Wird das Originalfoto trotzdem unverändert hochgeladen, lädt der Browser die volle Datenmenge, obwohl der sichtbare Unterschied zu einer passend verkleinerten Version für das menschliche Auge kaum wahrnehmbar ist. Ein Beispiel zur Einordnung: Fünf unbearbeitete Fotos zu je 4 MB auf einer Startseite summieren sich auf 20 MB – bei der von Google in der eigenen Studie gemessenen mobilen Übertragungsrate von rund 213 KB pro Sekunde (aus 1,49 MB in durchschnittlich 7 Sekunden) entspricht das allein für die Bilder etwa 96 Sekunden Ladezeit. Werden dieselben fünf Fotos stattdessen auf die tatsächliche Anzeigebreite verkleinert und als WebP mit rund 150 KB pro Datei ausgeliefert, sinkt die Gesamtgröße auf 750 KB – bei derselben Übertragungsrate nur noch etwa 3,5 Sekunden. Genau diese unkomprimierten Originalfotos zählen laut unserem Ratgeber zu den häufigsten LCP-Ursachen zu den häufigsten Gründen für einen zu langsamen Largest Contentful Paint.
WebP einbinden: Die praktische Umsetzung ohne Entwicklerkenntnisse
Technisch lässt sich WebP über ein HTML-Element mit mehreren Quellangaben einbinden, sodass ältere Browser automatisch auf JPEG zurückfallen, während moderne Browser die kleinere WebP-Datei laden – so beschreibt es Googles eigene Dokumentation im Detail. Für die meisten Betriebs-Websites ist der praktikablere Weg aber ein Bildoptimierungs-Plugin im Content-Management-System, das hochgeladene Fotos automatisch in WebP umwandelt und gleichzeitig auf mehrere Zielgrößen skaliert, ohne dass dafür Programmierkenntnisse nötig sind. Ein Beispiel zur Einordnung: Ein Handwerksbetrieb lädt ein 4,2 MB großes Foto einer fertiggestellten Badsanierung hoch – nach automatischer Optimierung liegt dieselbe Aufnahme als WebP-Datei bei rund 180 KB, ist auf dem Bildschirm optisch praktisch nicht vom Original zu unterscheiden, lädt aber mehr als 20-mal schneller. Wer stattdessen bewusst mit eigenen, selbst aufgenommenen Fotos statt Stockmaterial arbeitet, sollte diesen Optimierungsschritt nicht überspringen – unser Ratgeber zu eigenen Fotos statt Stockmaterial zeigt, warum sich der zusätzliche Aufwand trotzdem lohnt.
Lazy Loading: Nicht jedes Bild muss sofort laden
Zu jedem optimierten Bild gehört außerdem ein Alt-Text, wie der Ratgeber Alt-Text für Bilder beschreibt. Neben Format und Größe hilft ein dritter Hebel: Bilder, die erst weiter unten auf einer Seite sichtbar werden, müssen nicht schon beim ersten Seitenaufbau geladen werden. Moderne Browser unterstützen dafür ein einfaches HTML-Attribut, das ein Bild erst dann nachlädt, wenn ein Nutzer tatsächlich dorthin scrollt – ohne dass dafür zusätzlicher JavaScript-Code notwendig ist. Ein Beispiel zur Einordnung: Eine Referenzseite mit zwanzig Projektfotos lädt ohne Lazy Loading alle zwanzig Bilder sofort beim Seitenaufruf, selbst wenn ein Besucher die Seite nach den ersten drei Fotos bereits wieder verlässt. Mit aktiviertem Lazy Loading werden nur die tatsächlich sichtbaren Fotos sofort geladen, der Rest erst bei Bedarf – das wichtigste Bild oben auf der Seite, das für den Largest Contentful Paint zählt, sollte dagegen bewusst von Lazy Loading ausgenommen werden, damit es nicht unnötig verzögert wird. Ob genau dieses erste Bild schnell genug lädt, lässt sich anschließend direkt im PageSpeed-Insights-Bericht prüfen – unter der Diagnose-Kategorie taucht ein zu großes, unkomprimiertes Bild dort häufig als eigener Optimierungsvorschlag auf, wie unser Ratgeber zu PageSpeed Insights beschreibt.
Interaktiv: Ihr Ladezeit-Rechner für Bilder
Stellen Sie ein, wie viele Fotos auf Ihrer Startseite liegen und wie stark diese aktuell optimiert sind – der Rechner schätzt die zusätzliche Ladezeit auf einer mobilen Verbindung, basierend auf der von Google gemessenen Übertragungsrate von rund 213 KB pro Sekunde.
Fazit: Format und Größe gehören zusammen optimiert
WebP allein bringt spürbare Vorteile, doch die größte Wirkung auf die Ladezeit entsteht erst, wenn Format und Bildgröße gemeinsam angegangen werden – ein unbearbeitetes Kamerafoto bleibt auch als WebP-Datei unnötig groß, wenn es weiterhin in voller Auflösung ausgeliefert wird. Wer beide Hebel konsequent nutzt, gewinnt oft mehrere Sekunden Ladezeit allein durch die Bilder, ohne an anderen Stellen der Website etwas verändern zu müssen.