WebP-Bilder: Wertvolle Kilobyte sparen

WebP ist ein Bildformat, das 2010 von Google entwickelt wurde. Google hat WebP als Ersatz für die Formate JPEG, PNG und sogar animierte GIFs entworfen.

Der Einsatz des WebP-Formats kann die Leistung Ihrer Website erheblich verbessern, ohne die Bildqualität zu opfern. Daher empfehlen wir allen Kunden den Umstieg auf WebP als eine sichere Investition.

Das WebP-Format unterstützt fast alles, was wir von Bildern im Web erwarten:

• Verlustbehaftete (wie JPG) und verlustfreie Kompression (wie PNG).
• Transparenz und Teiltransparenz (Alphakanal wie bei PNG).
• Animationen ähnlich wie GIFs.

Das WebP-Format ist so erfolgreich bei der Optimierung des Datenvolumens, weil es die VP8-Technologie aus Videocodecs nutzt. Das Ergebnis ist eine weitaus effizientere Kompression als bei älteren Formaten wie JPG, PNG oder GIF.

WebP kann eine so sichtbare Reduzierung des Datenvolumens von Bildern bewirken. Quelle: Technischer Bericht im Monitoring PLUS.

Warum WebP verwenden?#

Die Verwendung von Bildern im WebP-Format verbessert die Geschwindigkeit von Webseiten:

• Schnelleres Laden
  WebP-Bilder sind im Allgemeinen um 25–34 % datenärmer als JPEG oder PNG. Dadurch wird die Ladegeschwindigkeit verbessert und somit auch die LCP-Metrik.
• Datenübertragung sparen
  Dies ist besonders für mobile Benutzer mit langsameren Verbindungen von Vorteil.
• Kompatibilität
  WebP wird in allen wichtigen Browsern unterstützt, einschließlich Safari (ab Version 14). Es sind also keine alternativen Lösungen erforderlich.

Unterstützung des WebP-Formats laut der Website CanIUse. Internet Explorer ist glücklicherweise passé.

Wie setzt man WebP auf der Website um?#

Die ideale Lösung ist die Automatisierung des Prozesses, um korrekt komprimierte Bilder auf die Website zu bringen. Es gibt jedoch mehrere Möglichkeiten, Bilder im WebP-Format auf der Website einzubinden:

• Automatische Umwandlung in WebP
  Nutzen Sie Werkzeuge wie cwebp, ImageMagick und ähnliche Bibliotheken zur Bildgenerierung auf Ihrem eigenen Server. Nach dem Hochladen über das Backend oder Import erfolgt die Kompression in das entsprechende Format und die Qualität. Die Kompression kann auch auf Anforderung erfolgen. Das Bild wird erst beim ersten Browser-Anfrage erstellt, aber das wird langsamer sein.
• Aktivieren Sie die WebP-Unterstützung in der Cloud
  Die meisten heutigen Cloud-Lösungen, wie etwa Cloudflare, unterstützen die Umwandlung in das WebP-Format. Die meisten unterstützen auch das neuere Format AVIF, das jedoch noch nicht so weit verbreitet ist. Der Vorteil ist, dass Sie sich nicht um den Platz auf Ihrem eigenen Server kümmern müssen, und die Cloud wählt für Sie das optimalste Format aus.
• Manuelle Umwandlung in WebP
  Für kleinere statische Websites komprimieren Sie Bilder manuell in das WebP-Format, zum Beispiel mit Tools wie Squoosh oder einfach in Photoshop.

Unsere Erfahrungen: Wie die Qualität einstellen?#

Die Einstellung der Kompressionsqualität kann herausfordernd sein, daher teilen wir unsere Erfahrungen aus der Beratung zur Website-Geschwindigkeit.

Die Einstellung der Kompressionsparameter kann je nach Verwendung der Bilder auf der Website variieren. Beispiele:

• Für Produktvorschauen in Kategorielisten auf E-Commerce-Seiten reicht oft eine Qualität von 70-80 %.
• Wenn Sie Kameras verkaufen und die echte Fotoqualität zeigen möchten, ist es sinnvoll, die Qualität bei WebP auf 85-90 % einzustellen.

Wir empfehlen immer, der Kompressionseinstellung etwas Zeit zu widmen. Mindestens zwei Schritte sind erforderlich:

• Testen
  Nehmen Sie einige typische Fotos für Ihre Website. Experimentieren Sie mit Tools wie TinyPNG oder Squoosh und beobachten Sie das Verhältnis von Qualität zu Dateigröße.
• Wahl des optimalen Qualitätsgrads
  Eine Qualität von 70 - 90 % bei verlustbehafteter Kompression wird empfohlen. Verlustfreie Bilder eignen sich für Grafiken mit scharfen Kanten (früher als PNG verwendet) oder detaillierte Fotos.

Ein abschließender Tipp: Überwachen Sie immer das Datenvolumen der Bilder. Unsere Erfahrung zeigt, dass sogar die Änderung eines einzigen Bildes, etwa auf der Homepage, unangenehme Schwankungen in der Geschwindigkeit der Website verursachen kann:

Frühe Erkennung des Problems, das durch das Einfügen eines 4 MB großen Bildes auf der Startseite verursacht wurde. Quelle: Technischer Bericht im Monitoring PLUS.

Hier finden Sie weitere Tipps zur Optimierung von Bildern auf Websites. Wenn Sie bereits WebP verwenden und die Optimierung noch weiter vorantreiben möchten, werfen Sie einen Blick auf den Artikel über das AVIF-Format, welches eine noch bessere Kompression bietet.