WEBP oder gut optimiertes JPG für die Seitengeschwindigkeit?

Ein falsch gestelltes Dilemma

Den Satz „Meine Website ist langsam, ich sollte die Bilder auf WEBP umstellen" hört man sehr häufig. Doch Probleme mit der Seitengeschwindigkeit entstehen selten allein durch die Formatwahl, und der Wechsel zu WEBP ist nicht immer der Schritt mit dem größten Gewinn.

In diesem Beitrag vergleichen wir zwei Ansätze: die vorhandenen JPG-Dateien ordentlich zu optimieren und das Format auf WEBP umzustellen. Wir behandeln, was beides bringt, wo es an Grenzen stößt und in welcher Reihenfolge man vorgehen sollte.

Die drei Faktoren, die das Bildgewicht bestimmen

Wie viele Bytes ein Bild belegt, bestimmen drei Dinge, und das Format ist nur eines davon.

Die Pixelabmessungen. Breite und Höhe des Bildes. Ein Bild um die Hälfte zu verkleinern reduziert die Pixelanzahl auf ein Viertel. Das ist der stärkste Hebel für die Dateigröße.

Die Qualitätsstufe. Wie viel Information bei der verlustbehafteten Kompression verworfen wird. Eine unnötig hohe Einstellung verbraucht sehr viele Bytes für Details, die niemand sieht.

Die Formateffizienz. Mit wie vielen Bytes sich dasselbe Bild darstellen lässt. Hier liegt die Überlegenheit von WEBP gegenüber JPG.

Auf den meisten Websites steckt die größte Verschwendung in den ersten beiden Faktoren. Dass klein dargestellte Bilder in gewaltiger Auflösung ausgeliefert und Qualitätsstufen blind auf das Maximum gezogen werden, ist weit verbreitet. Solange diese beiden Probleme bestehen, gleicht ein Formatwechsel dem Versuch, einen löchrigen Eimer schneller zu füllen.

Wie gut kann ein optimiertes JPG sein?

Ein gut optimiertes JPG sollte man nicht unterschätzen. Ein JPG, das auf die richtige Größe gebracht, mit einer vernünftigen Qualitätsstufe gespeichert und von überflüssigen Metadaten befreit wurde, ist erheblich kleiner als seine unoptimierte Fassung.

Der Vorteil von JPG liegt an diesem Punkt in der Reibungslosigkeit: Jedes Werkzeug erzeugt es, jeder Browser öffnet es, es fügt sich in jeden Arbeitsablauf ein und wirft keinerlei Kompatibilitätsfragen auf. Es ist eine Verbesserung, die Sie umsetzen können, ohne an Ihrem bestehenden System irgendetwas zu ändern.

Die Grenze ist das Format selbst. Die feste Blockstruktur von JPG und seine Unfähigkeit, aus benachbarten Blöcken Vorhersagen zu treffen, begrenzen die Effizienz ab einem bestimmten Punkt. Wie weit Sie mit Optimierung kommen, hat eine Obergrenze.

Was fügt WEBP hinzu?

WEBP hebt diese Obergrenze an, die sich aus dem Design von JPG ergibt. Weil es aus benachbarten Blöcken Vorhersagen treffen, die Blockgröße an den Inhalt anpassen und eine effizientere abschließende Kodierungsstufe nutzen kann, braucht es bei gleicher Bildqualität weniger Bytes.

Darüber hinaus bringt es zwei weitere Fähigkeiten mit: Transparenzunterstützung und einen verlustfreien Modus. Sie können also sowohl für Ihre transparenten Logos als auch für Ihre Fotos ein einziges Format verwenden.

Der Preis ist der zusätzliche Schritt im Arbeitsablauf. In den Prozess des Erzeugens, Speicherns und Veröffentlichens von Bildern schiebt sich eine Umwandlungsstufe. Wird dieser Schritt nicht automatisiert, wird er mit der Zeit vernachlässigt, und das System wird inkonsistent.

In welcher Reihenfolge vorgehen?

In der Praxis ist folgende Reihenfolge die effizienteste, und sie wird meist genau andersherum versucht:

Zuerst die Abmessungen. Reduzieren Sie die Bilder auf die Größe, in der sie auf der Seite tatsächlich verwendet werden. Für Displays mit hoher Pixeldichte die doppelte Auflösung vorzubereiten ist vernünftig, die fünffache ist überflüssig. Dieser Schritt allein bringt auf den meisten Websites den größten Gewinn.

Dann die Qualitätsstufe. Speichern Sie einige repräsentative Bilder mit verschiedenen Einstellungen und vergleichen Sie sie in Originalgröße. Übernehmen Sie die aggressivste Einstellung, bei der Sie mit bloßem Auge keinen Unterschied erkennen. Dieser Punkt liegt meist aggressiver, als man annimmt.

Danach das Format. Nachdem Sie die beiden obigen Schritte erledigt haben, sammelt der Wechsel zu WEBP den verbliebenen Anteil ein. Mit dem Werkzeug zur Umwandlung von JPG zu WEBP können Sie Ihr Archiv umwandeln.

Ganz zum Schluss die Auslieferung. Techniken wie Bilder erst zu laden, wenn sie sichtbar werden, oder für verschiedene Bildschirme passende Größen bereitzustellen, verbessern die wahrgenommene Geschwindigkeit unabhängig vom Format.

Entscheidungstabelle

Wenn Ihre Bilder gar nicht optimiert sind: Kümmern Sie sich zuerst um Abmessungen und Qualitätsstufe. Auch ohne Formatwechsel erzielen Sie einen großen Gewinn.

Wenn Ihre Bilder optimiert sind, die Seite aber weiterhin schwer ist: Der Wechsel zu WEBP bringt einen spürbaren Zusatzgewinn. An diesem Punkt macht sich der Formatunterschied wirklich bemerkbar.

Wenn Ihre transparenten Bilder als PNG vorliegen: Diese auf verlustfreies WEBP umzustellen bringt meist einen guten Gewinn und erhält die Transparenz.

Wenn Ihr Arbeitsablauf manuell und unstrukturiert ist: Bringen Sie den Prozess vor dem Formatwechsel in Ordnung. Ein nicht automatisierter Umwandlungsschritt wird auf Dauer nicht durchgeführt.

Wenn Sie sehr wenige Bilder haben und die Seite ohnehin schnell ist: Lassen Sie beides. Optimierung ohne messbares Problem heißt, ein Problem lösen zu wollen, das es nicht gibt.

Zusammengefasst

Das ist keine Entweder-oder-Entscheidung, sondern eine Frage der Reihenfolge. Bilder auf die richtige Größe zu bringen und die Qualitätsstufe auf ein vernünftiges Maß zu senken bringt auf den meisten Websites den größten Gewinn und erfordert keinen Formatwechsel. WEBP sammelt den verbliebenen Anteil ein, nachdem diese Grundarbeiten erledigt sind, und fügt zusätzlich die Flexibilität der Transparenz hinzu. Das beste Ergebnis entsteht, wenn Sie beides der Reihe nach und gemeinsam umsetzen.