Antwort #14 am: 28. Dezember 2021, 12:30:19
Ich hab eben noch einen eigenen
Ansatz mit smarty geschrieben.
webp Dateien müssen hierbei auch manuell ins selbe Verzeichnis gelegt werden.
Vorteile:Die Zeile zur webp Quelle wird nur geladen, wenn das webp Bild auch auf dem Server vorhanden ist.
Ansonsten wird nur png/jpg wie im Backend hinterlegt.
Chromium Browser zeigen dadurch kein fehlendes Bild an.Mods können auch ohne Kenntnisse weiterhin im Backend bearbeiten, und neue Artikel anlegen, nur die webp müssen danach noch manuell generiert und im entsprechenden Bildpfad mit selbem Namen hinterlegt/aktualisiert werden
Kompatibilität für alle Browser ist durch <picture> Tag und Fallback <img> gewährleistet.
Und hier muss ich raten, dadurch dass alles im Template passiert könnte es besser für den Cache von modified sein, als eine Verarbeitung durch die .htaccess?
<picture itemprop
="image"> {* get filepath on server to check
if exists
*} {assign
var="webpPath" value
="{$PRODUCTS_IMAGE|replace:'.jpeg':'.webp'|replace:'.jpg':'.webp'|replace:'.png':'.webp'}"} {assign
var="webpFile" value
=$webpPath|strrpos:"/"} {* only show webp source
if file exists
*} {if file_exists("{$smarty.server.DOCUMENT_ROOT}/images/product_images/info_images{$webpPath|substr:$webpFile}")} <source srcset
="{$webpPath}" type
="image/webp"> {/if} {* default source
*} <source srcset
="{$PRODUCTS_IMAGE}" type
="image/{if $PRODUCTS_IMAGE|strstr:'.jpg' || $PRODUCTS_IMAGE|strstr:'.jpeg'}jpeg{elseif $PRODUCTS_IMAGE|strstr:'.png'}png{/if}"> {* fallback
*} <img src
="{$PRODUCTS_IMAGE}" alt
="{$PRODUCTS_NAME|onlytext}" width
="677" height
="677"></picture
> Hier im Beispiel ersetzt das <picture> Tag das <img> Tag des Hauptbildes auf der Produktdetailseite.
Der Code hier funktioniert für die Endungen .jpeg, .jpg und .png, lässt sich aber bei Bedarf in den Zeilen 3 und 12 einfach erweitern.
Zum Thema ob das jetzt für den Cache besser ist lasse ich mich gerne belehren
Grüße
Philipp