Funktioniert WEBP in jedem Browser, sollte ich ein JPG als Rückfalloption bereitstellen?

Die Browserunterstützung für WEBP ist inzwischen sehr breit, und nahezu alle modernen Browser stellen es reibungslos dar. Dennoch ist es bei besonders wichtigen Bildern eine sichere Praxis, über das picture-Element von HTML WEBP als primäre und JPG als Ersatzquelle zu definieren; unterstützt der Browser WEBP, lädt er dieses, andernfalls das JPG. Dieser Ansatz gibt Ihnen den Geschwindigkeitsgewinn und die volle Kompatibilität zugleich. Für eine kleine Website bereitet auch der alleinige Einsatz von WEBP in der Praxis keine Probleme.

Kann ich HEIC nicht direkt auf der Website veröffentlichen?

In der Praxis nein. Webbrowser stellen HEIC-Dateien im Allgemeinen nicht direkt dar, sodass die meisten Ihrer Besucherinnen und Besucher nur ein Symbol für ein defektes Bild sehen würden. HEIC wurde als Format für die Speicherung auf dem Gerät entworfen, nicht als Verteilungsformat fürs Web. Jedes HEIC-Foto, das Sie im Web veröffentlichen wollen, müssen Sie zuvor nach WEBP oder JPG umwandeln.

Beschädigen zwei Umwandlungen das Foto stark?

Da HEIC bereits verlustbehaftet ist, fügt die Umwandlung nach WEBP oder JPG eine zweite verlustbehaftete Kompressionsrunde hinzu. Bei einer vernünftigen Qualitätsstufe bleibt die Wirkung dieser zweiten Runde unter normalen Betrachtungsbedingungen bei den meisten Fotos jedoch nicht unterscheidbar. Um das Risiko zu minimieren, senken Sie die Qualitätsstufe nicht übermäßig ab und führen Sie die Umwandlung in einem Zug direkt aus dem ursprünglichen HEIC durch. Eine bereits nach JPG umgewandelte Datei erneut nach WEBP zu wandeln würde eine dritte Runde hinzufügen.

Welches Format eignet sich für Bilder mit transparentem Hintergrund?

In der Struktur des JPG-Formats ist kein Alphakanal definiert, es lässt sich also für kein Bild verwenden, das Transparenz erfordert. WEBP unterstützt den Alphakanal dagegen sowohl im verlustbehafteten als auch im verlustfreien Modus und kann für jedes Pixel weiche Transparenzübergänge speichern. Das bedeutet, dass WEBP die Transparenz von PNG bei Dateigrößen nahe an JPG bieten kann; für Webbilder, die Transparenz erfordern, ist es mit deutlichem Abstand die effizienteste Option.

Von HEIC zu WEBP oder JPG für die Veröffentlichung im Web?

Im Web ist HEIC keine Option

Beginnen wir mit der klarsten Tatsache: Sie können eine HEIC-Datei nicht direkt auf Ihre Website stellen. Browser stellen dieses Format im Allgemeinen nicht dar, und Ihre Besucherinnen und Besucher sehen nur ein Symbol für ein defektes Bild.

HEIC wurde für die Speicherung auf dem Gerät entworfen, nicht für die Verteilung im Web. Die Frage lautet also nicht „HEIC oder WEBP", sondern „Wohin wandle ich HEIC um" – und dafür gibt es in der Praxis zwei realistische Antworten: WEBP oder JPG.

Dateigröße: der klare Vorsprung von WEBP

Bei der Veröffentlichung im Web bedeutet Dateigröße unmittelbar Seitengeschwindigkeit, und Seitengeschwindigkeit bedeutet unmittelbar Nutzererlebnis und Platzierung in Suchergebnissen. Deshalb ist dies der am stärksten gewichtete Posten des Vergleichs.

WEBP erzeugt bei gleicher wahrgenommener Bildqualität Dateien, die etwa ein Viertel bis ein Drittel kleiner sind als JPG. Enthält eine Seite Dutzende Bilder, ergibt das kumuliert einen erheblichen Unterschied.

Man muss allerdings richtig verstehen, woher dieser Gewinn kommt: Der Vorteil von WEBP besteht gegenüber JPG, nicht gegenüber HEIC. HEIC ist bereits sehr effizient; beim Wechsel von HEIC zu WEBP kann die Dateigröße ähnlich bleiben. Hätten Sie HEIC jedoch nach JPG umgewandelt, wäre die Datei gewachsen. Was Sie also durch die Wahl von WEBP „gewinnen", ist, den Platz nicht zu verlieren, den Sie auf dem Weg zu JPG verloren hätten.

Browserunterstützung: früher ein Unterschied, heute nicht mehr

Bis vor wenigen Jahren war das stärkste Argument gegen WEBP die mangelnde Unterstützung. Heute hat dieses Argument weitgehend seine Gültigkeit verloren; WEBP funktioniert in nahezu allen modernen Browsern reibungslos, und auch Betriebssysteme öffnen es nativ.

Dass JPG nach wie vor unbestritten universell ist, stimmt. Doch diese Universalität macht in der Praxis nur für eine kleine Gruppe einen Unterschied, die mit sehr alten Browsern unterwegs ist.

Der sichere Ansatz besteht darin, beides anzubieten. Mit dem picture-Element von HTML definieren Sie WEBP als primäre und JPG als Ersatzquelle; unterstützt der Browser es, lädt er die kleinere Datei, andernfalls die kompatible. Diese Methode gibt Ihnen Geschwindigkeit und volle Kompatibilität zugleich, und der zusätzliche Aufwand besteht lediglich darin, zwei Dateien zu erzeugen.

Transparenz: der Punkt, an dem der Vergleich endet

In der Dateistruktur des JPG-Formats ist kein Bestandteil namens Alphakanal definiert. Jedes Pixel trägt ausschließlich Farbinformation, keine Transparenzinformation. Speichern Sie ein transparentes Bild als JPG, werden die transparenten Bereiche mit einer einheitlichen Farbe gefüllt, meist Weiß, und das lässt sich nicht rückgängig machen.

WEBP unterstützt den Alphakanal dagegen sowohl im verlustbehafteten als auch im verlustfreien Modus. Für jedes Pixel lassen sich weiche Transparenzübergänge speichern, sodass die Kanten eines freigestellten Objekts auf unterschiedlichen Untergründen nicht ausgefranst, sondern sauber wirken.

Der praktische Wert davon ist im Web groß: Früher mussten Sie für ein transparentes Bild PNG verwenden und eine große Dateigröße in Kauf nehmen. WEBP bietet Transparenz bei weit vernünftigeren Dateigrößen. Für Produktbilder, Logos und freigestellte Objekte ist das für sich genommen ein ausschlaggebender Vorteil.

Qualität: die Frage der zwei Umwandlungen

HEIC ist ein verlustbehaftetes Format. Im Moment der Aufnahme wurde bereits ein Teil der Details dauerhaft verworfen. Welches Ziel Sie auch wählen, Sie fügen eine zweite verlustbehaftete Kompressionsrunde hinzu.

Bei einer vernünftigen Qualitätsstufe ist die sichtbare Wirkung dieser zweiten Runde unter normalen Betrachtungsbedingungen bei den meisten Fotos nicht zu unterscheiden. Der Unterschied kann bei Nachtaufnahmen und Himmeln mit weiten Verläufen zutage treten – das sind die Inhalte, die die Kompression am stärksten fordern.

Um das Risiko zu senken, gibt es zwei Regeln: Senken Sie die Qualitätsstufe nicht übermäßig ab und führen Sie die Umwandlung in einem Zug direkt aus dem ursprünglichen HEIC durch. Eine bereits nach JPG umgewandelte Datei später nach WEBP zu wandeln fügt eine dritte Runde hinzu, und das ist eine überflüssige Verschlechterung.

Die Entscheidung nach Szenario

Titelbild eines Blogbeitrags: WEBP. Transparenz wird nicht benötigt, aber der Größengewinn wirkt sich direkt auf die Seitengeschwindigkeit aus.

Produktbild mit transparentem Hintergrund: WEBP. JPG ist keine Option, PNG unnötig groß.

Bild für einen Beitrag in sozialen Netzwerken: JPG. Die meisten Plattformen komprimieren das hochgeladene Bild ohnehin in ihr eigenes Format um, und manche akzeptieren zudem keinen WEBP-Upload.

Bild für einen E-Mail-Newsletter: JPG. Die Formatunterstützung von E-Mail-Programmen hinkt der von Browsern hinterher, hier ist Universalität wichtiger als Geschwindigkeit.

Galerieseite mit hohem Besucheraufkommen: WEBP, mit JPG als Rückfalloption über das picture-Element. Der Größengewinn wirkt sich hier am stärksten aus.

Datei, die an eine Druckerei oder ein betriebliches System geht: JPG oder das Original. Werkzeuge der Druckvorstufe und ältere Unternehmenssysteme akzeptieren WEBP möglicherweise nicht.

Ein praktischer Arbeitsablauf

Ein belastbarer Ablauf für die Veröffentlichung im Web funktioniert so: Bewahren Sie Ihre ursprünglichen HEIC-Dateien an einem Ort auf. Führen Sie die Umwandlung von HEIC nach WEBP für jedes zu veröffentlichende Bild direkt aus dem Original durch. Verkleinern Sie das Bild auf die Größe, in der Sie es auf der Website verwenden – ein 4000 Pixel breites Foto in einem 800 Pixel breiten Bereich zu zeigen ist eine weit größere Verschwendung als die Formatwahl. Erzeugen Sie für besonders wichtige Bilder zusätzlich ein JPG als Rückfalloption und liefern Sie es über das picture-Element aus.

Zusammengefasst

Für die Veröffentlichung im Web sollte Ihre Standardantwort WEBP lauten: deutlich kleinere Dateien als JPG, breite Browserunterstützung und die Fähigkeit zur Transparenz. JPG setzen Sie als Ersatzquelle ein, für Bilder in E-Mails und in Systemen, die kein WEBP akzeptieren. HEIC ist in beiden Fällen kein Format, das direkt ins Web gehört; die Umwandlung ist zwingend, es bleibt nur, das Ziel richtig zu wählen.