.jpg/ .webp Bildformate unter selber URL

[umwelt]

Hallo,

auf einem Projekt serviere ich Bild-Formate abhängig davon, ob der Browser .webp unterstützt oder nicht. Dies wird per Javascript geprüft und die Bild-URL entsprechend angepasst (bild.jpg / bild.webp)

Moderne Bild-Server bieten aber offenbar eine Option, bei der das benötigte Bildformat automatisch vom Server zurückgegeben wird - die URL bleibt also dieselbe.

Technisch muss das ja anhand des User Agent Headers entschieden werden.... weiß jemand etwas Genaueres über Zuverlässigkeit und Funktionsweise dieser Methode?

Spielt es aus SEO eine Rolle, ob unter bild.jpg tatsächlich ein JPEG oder ein WEBP zurück geliefert wird? (ich vermute: nein)

EDIT: es wird eher der "HTTP-Accept"-Header sein.

[supervisior]

Es wäre und ist weit ausgeholt, wenn man das via Javascript oder per Accept Header macht, bzw. machen würde, wenn alles, was man dazu baucht ohne dem Einen UND dem Anderen geht. Lese Dich mal in HTML 5 und dem <picture> Tag ein. Wenn Du Dir das verinnerlicht hast, wirst Du Dich selbst fragen, warum so kompliziert....

[umwelt]

Wenn Du Dir das verinnerlicht hast, wirst Du Dich selbst fragen, warum so kompliziert....

weil internet explorer kein <picture>-tag unterstützt.

[supervisior]

Wenn Du Dir das verinnerlicht hast, wirst Du Dich selbst fragen, warum so kompliziert....

weil internet explorer kein <picture>-tag unterstützt.

Who cares about IE? Den findest Du maximal noch in Behörden, wobei durch Edge gewissermaßen ein Zwangsupdate besteht. Es liegt aber an Dir, wenn Du diesem Browser noch so viel Aufmerksamkeit schenken willst. Der Aufwand steht aber in keinem Verhältnis. Ich lass IE Nutzer gar nicht mehr auf die Seite und leite gleich zu MS um.

[supervisior]

Deine Kritik zum Anlass hab ich das grad mal ausprobiert. Entgegen so mancher Aussagen versteht der IE 11 das picture tag und auch die mit dem picture mögliche (automatische) Auswahl, ob jpeg oder webp. Es gibt also keine Ausschlusskriterien das picture tag für Deinen Zweck nicht zu verwenden.

[supervisior]

Mehr als das brauchst Du nicht. Der Browser sucht sich automatisch das für ihn richtige Format aus. Maßgeblich betroffen davon ist aber fast ausnahmslos der Safari Browser aufm Mac, aber auch das ist grad dabei sich zu ändern. Abdeckung 95%

Code: Alles auswählen

<picture>
	<source srcset="bild.webp" type="image/webp">
	<img src="bild.jpg" alt="" width="" height="">
 </picture>
 

[umwelt]

Bei meiner Frage, ob die serverseitige Entscheidung des Formats zuverlässig ist, habe ich folgendes herausgefunden:

Grundsätzlich scheint das zu klappen.

Der Internet Explorer lädt jedoch keine Bilder wenn diese die Dateiendung .webp haben, auch wenn tatsächlich PNG zurück geliefert wird.

Lässt man die Dateiendung ganz weg und ruft das bild so auf bilder/bildname_x klappt es auch im IE.

Hier frage ich mich, ob diese Form evtl. nachteilig sein könnte.

[supervisior]

Wie schon gesagt, wenn Du das picture Tag wie oben gezeigt einsetzt, lädt der IE das jpeg. Ob er picture nun versteht oder gar einfach ignoriert, wird dabei zu Nebensache, weil <img> kann er ja. Du musst halt nur beide Formate bereitstellen und nicht nur einfach umbenannte jpeg's.

Was meinst Du mit serverseitige Entscheidung? Mit dem picture Tag ist der Server komplett außen vor. Das machen die Browser unter sich aus. Wenn Du damit eine Erkennung mittels Header meinst, kann das zwar auch funktionieren, aber warum kompliziert und viel Overhead, wenn es auch einfach geht?!

[supervisior]

Als bedingte Alternative, wie man das an Hand des Accept Headers lösen könnte. Es funktioniert zwar, aber Du bekommst damit zwangsläufig bei jedem Bildaufruf immer mind. 2 Requests, weil der Rewrite erst stattfindet, wenn die Condition erfüllt ist. Jeder *.jpg Aufruf wird dann umgeleitet auf *.webp. Je nach Menge an Bildern kommt das nicht wirklich gut. Für mich käme diese Lösung nur für in CSS definierten Bildern in Frage oder wenn ein Thumbnail verlinkt ist mit einem vergrößerten *.jpg Bild.

Code: Alles auswählen

RewriteCond %{HTTP:Accept} image/webp [NC]
RewriteRule ^(.*)\.jpg /$1.webp [R=301,L]