Grafikformat webp: Delay bei Anzeige trotz hoher Datenersparnis

Hallo zusammen,

u.a. Google empfiehlt, bei Bildern das "next generation format" WEBP statt z.B. GIF, JPG oder PNG zu verwenden. Tatsächlich verringert das Format die Dateigröße meiner Erfahrung nach je nach Motiv um 20-80%, und mit bloßem Auge sind die geringfügigen Unterschiede bei verlustbehafteter Komprimierung kaum zu sehen.

Da noch nicht alle Browser WEBP unterstützen, ist man darauf angewiesen, ein altes Format (GIF, JPG oder PNG) als Fallback vorzuhalten. Dazu gibt es das HTML-Tag <picture> sowie in CSS image-set.

Probleme:

1. WEBP-Bilder werden trotz Caching zumindest im Firefox im Vergleich zu den anderen Formaten mit leichter zeitlicher Verzögerung dargestellt, was auch mit bloßem Auge auffällt, wenn z.B. auf einer Seite verschiedene Formate zusammen auftreten. Die GIFs, JPGs und PNGs erscheinen immer alle zeitgleich, bevor dann kurz darauf die WEBPs folgen. Das ist schade, weil das WEBP in meinem Fall 80% der Dateigröße einspart, aber trotzdem im Vergleich zu den anderen (deutlich größeren) Formaten verzögert angezeigt wird. Ist das WEBP-Rendering derzeit ggf. noch nicht ganz optimal und wird noch genauso schnell wie bei GIF, JPG und PNG?

Edit: In Microsoft Edge tritt die kleine Verzögerung bei der Anzeige von WEBPs übrigens so nicht auf. Allerdings werden die WEBPs dort seltsamerweise nicht gecacht (im Firefox dagegen schon), obwohl vom Webserver alle vier Formate dafür vorgesehen sind.

2. <picture> funktioniert einwandfrei, aber image-set in CSS (z.B. für Hintergrundbilder benötigt) unterstützt in den gängigen Browsern tatsächlich das type-Attribut noch nicht, obwohl es bereits dokumentiert ist: https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set()

Sobald man im image-set eine url mit type ergänzt, wird das ganze image-set nicht mehr berücksichtigt, und der Fallback auf das vorangestellte "background-image: url" ohne image-set greift. Ist hier schon etwas dokumentiert, was tatsächlich im Browser noch nicht funktioniert?

Das Performance-Problem ließ sich zwischenzeitlich mit einer serverseitigen Änderung der Caching-Vorgaben lösen.

Auch FF 90 ignoriert image-set allerdings, sobald man dabei das type-Attribut verwendet. Code-Beispiel:

<table><tr>
     <td style="background-image:url(bgpic_fallback1.png); background-image:image-set(url(bgpic.webp) type(image/webp), url(bgpic_fallback2.png) type(image/png));">
</tr></table>

Hier wird leider stets bgpic_fallback1.png verwendet.

Ohne type lässt sich für per CSS eingebundene background-images allerdings kein Fallback realisieren.

Tatsächlich, die Anführungszeichen machen den Unterschied. Auch wenn die Argumente in CSS anderswo auch ohne sie funktionieren, funktioniert type() innerhalb von image-set nur mit Anführungszeichen (egal ob ein- oder zweistrichig) zwischen den Klammern. Dankeschön!

Jetzt bleibt zu hoffen, dass Chrome, Edge usw. das type()-Argument in image-set auch bald berücksichtigen, am besten auch ohne das Präfix -webkit-.

Zitat von dark_rider

Das Performance-Problem ließ sich zwischenzeitlich mit einer serverseitigen Änderung der Caching-Vorgaben lösen.

Ganz konkret war in punkto Caching übrigens zumindest beim hier verwendeten Hoster der Knackpunkt, dass Apache 2.4 den MimeType "image/webp" standardmäßig noch nicht kannte, so dass man ihn vor einem etwaigen Expires-Kommando z.B. im .htaccess erst selbst ergänzen muss:

AddType image/webp .webp
ExpiresByType image/webp "access plus 1 week"