WEBP Bilder innerhalb von OXID EShop einbinden

Performance matters, so lautet die Hauptaussage im Bereich E-Commerce seit Jahren. Damit Webseiten und Online Shops auch über mobile Netzwerke schnell und effizient geladen werden können, wurde von Google ein neues Grafikformat entwickelt.

WebP wurde zuerst im Jahre 2010 vorgestellt und ist mittlerweile in vielen Browsern nutzbar. Um Grafiken im WebP Format durch den OXID EShop ausliefern zu lassen, genügen ein paar Zeilen, die zusätzlich in die .htaccess Datei im source Verzeichnis des Shops eingetragen werden müssen.

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

Diese Zeilen fügt man vor

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

in die .htaccess ein.

Als erstes wird geprüft, ob der Brower in seinem Request mitteilt, dass er das Format webp akzeptiert. Sollte dieses der Fall sein, wird geprüft ob die angeforderte Ressource vom Dateityp JPEG oder PNG ist. Trifft beides zu, erfolgt nun noch eine kurze Prüfung, ob die angeforderte Datei auch im Format webp in dem entsprechenden Verzeichnis vorhanden ist. Ist auch diese Prüfung erfolgreich, wird intern der Request auf die webp Variante umgeschrieben, und im Response noch der Dateityp image/webp gesetzt. Das Umschreiben erfolgt NUR intern und nicht per 301/302 HTTP Status Code.

Wie man nun die entsprechenden Bilder in webp konvertieren kann, beschreiben wir in dem folgenden Blog Eintrag.

https://www.twisted-brains.org/oxid-bilder-im-format-jpeg-png-nach-webp-konvertieren/



Replies

  1. :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.

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

  3. Bei mir im Blog sieht es gut aus…

Continue the discussion at --> OXID forums

Participants