WEBP Bilder innerhalb von OXID EShop einbinden

Originally published at: https://oxidforge.org/de/webp-bilder-innerhalb-von-oxid-eshop-einbinden.html

Um Grafiken in Googels WebP-Format durch OXID eShop ausliefern zu lassen, genügen ein paar Zeilen in der .htaccess-Datei des Shops.

:warning: Achtung die Betonung liegt übrigens auf “ein paar Zeilen”.

Während bei mir der Beitrag so aussieht:

Sollte eigentlich das hier in den Quellcode der .htaccess:

RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpg|png)$ 
RewriteCond %1\.webp -f 
RewriteRule ^(.*)\.(jpg|png)$ $1.webp [L,T=image/webp]

Erst auf den zweiten Blick fiel mir auf, dass kein Einzeiler sei kann.

Verflixt, wenn man nicht zu 100% aufpasst. Danke @Jonas_Hess, ich hab nochmal nachgebessert. Passt das so jetzt?

Bei mir im Blog sieht es gut aus…

Auch auf meinem Screen herrscht jetzt herrliche Mehrzeiligkeit (Danke):

1 Like

Ich wollte das gerade mal in meinen alten 4.10.7 Shop einbinden, aber die entsprechende Passage in der .htaccess sieht bei mir so aus:

RewriteCond %{REQUEST_URI} (\/out\/pictures\/)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (\.jpe?g|\.gif|\.png|\.svg)$ getimg.php

da gibt es kein “generated” Verzeichnis :man_shrugging: .

Was muss ich da anpassen, damit ich das trotzdem nutzen kann ?

Vielen Dank.

BB

Auch in Version 4.10 und davor gab es schon das generated Verzeichnis. Prüf mal deine Installation bzw. ob im Frontend immer nur Master Bilder ausgeliefert werden…
Gruss Marcel

Hi,

stimmt schon, das “generated” Verzeichnis existiert. Aber in meiner .htaccess ist der Eintrag etwas anders als oben abgebildet, obwohl ich nichts verändert habe. Das machte mich stutzig und ich wollte da den Eintrag nicht einfach ändern.

Wie kann ich das testen ob nur master-bilder ausgeliefert werden ?

Gruß BB

Wenn Du die Zeilen vor dem Part - egal ob mit oder ohne generated - einträgst, werden erstnal webp Bilder, sofern sie existieren und der Browser sie akzeptiert, ausgeliefert. Der andere Teil dient nur der Nachgenerierung der verschiedenen Auflösungen.

Gruss
Marcel

Für das Prüfen könntest Du Dir den ausgelieferten Quelltext der Seite ansehen…

Ich hab das Script von twistedbrains ein wenig angepasst:

#!/bin/bash

for D in `find /var/www/share/...../source/out/....../img/  -type d`; do
  for i in $D/*.{jpg,jpeg,png,JPG,JPEG,PNG} ;do
    if [ ! -f "${i%.*}.webp" ]; then
        cwebp "$i" -o "${i%.*}.webp";
    fi
  done;
done;

for D in `find /var/www/share/...../source/out/pictures/{generated,ddmedia}  -type d`; do
  for i in $D/*.{jpg,jpeg,png,JPG,JPEG,PNG} ;do
    if [ ! -f "${i%.*}.webp" ]; then
        cwebp "$i" -o "${i%.*}.webp";
    fi
  done;
done;

die “…” sind entsprechend anzupassen. Und jetzt nen Cronjob drumrum und ihr habt konsequent webp-Pendants. (Voraussetzung ist natürlich das installierte Paket webp)

Es gibt dort sogar noch effizientere Methoden. Ich nutze für z.B. die Generierung der unterschiedlichen Theme Bildformate keinerlei OXID Funktionen mehr.
Wenn ein Bild hochgeladen wird, werden automatisch alle benötigten abhängigen Grössen und Formate gerendert und gespeichert.
Gruss
Marcel