Von jpg nach webp ändern

[cayuco]

Hallo, weiß jemand, ob es möglich ist über den Code die Bildformate der Produktbilder von jpg zu webp zu ändern?

Also ich meine, wenn ich alle Billder als jpg im Shop habe, diese zu Hause in webp umwandle und dann in den Shop hochlade (per ftp).
Kann man den Shop dann per Code veranlassen die WebP-Dateien anzuzeigen, statt der jpg? Oder muss man alle Produktbilder wieder einzeln zu jedem Produkt hochladen?

Wichtigste Frage: Kann modified bereits WebP? Die htaccess sagt ja.

ExpiresByType image/webp "access plus 1 month"

Linkback: https://www.modified-shop.org/forum/index.php?topic=40006.0

[awids]

Die Frage, ob webp-Formate angezeigt und verarbeitet werden können, kann ich dir nicht beantworten.

Du hast aber die Möglichkeit, die Dateierweiterungen (.jpg) über die Datenbank mit einem einfachen REPLACE zu ändern. Dann bräuchtest du die alten Bilder nicht behalten.

Oder du machst das Replace erst im Shop und erstezt bei jedr Bildverlinkung die Dateierweiterung nach dem Schema {$products_image|replace:'.jpg':'.webp'}. Aber damit hast du eben die Bilder doppelt auf dem Server liegen.

LG

[cayuco]

Hallo awids, vielen Dank für Deinen Tipp.
Vielleicht kann ja jemand von der "Rennleitung" die Frage nach der Möglichkeit beantworten.

Sollte dem so sein, werde ich Deinen Tipp gern umsetzen. Offensichtlich bemängelt Tante Goggle nämlich das "alte" jpg-Format beim Speedtest.

Mein Gott, wo sind nur die guten alten 256 Farb-Grafiken geblieben? Die Überraschung war immer groß, wenn man mit 12.8 Modem nach 15 min. feststellte was es darstellen soll. Ich sterbe langsam aus. 

[cayuco]

Habe es eben mit einem Bild getestet. WebP ist noch nicht möglich. "Dateiformat nicht erlaubt"

Na wird schon noch.

[Markus]

Hi,

schon mal hier reingeschaut ...
https://caniuse.com/#feat=webp

Ohne ein Alternativbild würde ich das noch nicht empfehlen

Markus

[cayuco]

Ahh, ich verstehe. Danke Markus.

[dfriedrich82]

Eine "einfachere" Möglichkeit ist es das Ganze über die .htaccess zu steuern.
Am Computer umwandeln und alle Bilder in die jeweiligen Ordner hochladen, damit jeweils eine .jpg und eine .webp vorhanden ist.
In der .htaccess dann folgendes eintragen:

Code: PHP  [Auswählen]

<IfModule mod_rewrite.c>
  RewriteEngine On
  # check if browser accepts webp
 RewriteCond %{HTTP_ACCEPT} image/webp

  # check if file is jpg or png
 RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$

  # check if corresponding webp file exists image.png -> image.webp
 RewriteCond %1\.webp -f

  # serve up webp instead
 RewriteRule (.+)\.(jpe?g|png|gif)$ $1.webp [T=image/webp,E=accept:1]

</IfModule>

Ich hab das so in ein paar Shops laufen und ist eine schnelle und praktikable Lösung bis webp ein Quasi-Standard ist.

Hoffe das hilft jemanden weiter.

[cayuco]

Hallo dfriedrich82, danke für die Hilfe. werde es in kürze einsetzen. aktuell fehlen noch ein paar Produkte.

Dann mache ich das so.

[kostnermo]

[...]
In der .htaccess dann folgendes eintragen:

Code: PHP  [Auswählen]

<IfModule mod_rewrite.c>
  RewriteEngine On
  # check if browser accepts webp
 RewriteCond %{HTTP_ACCEPT} image/webp

  # check if file is jpg or png
 RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$

  # check if corresponding webp file exists image.png -> image.webp
 RewriteCond %1\.webp -f

  # serve up webp instead
 RewriteRule (.+)\.(jpe?g|png|gif)$ $1.webp [T=image/webp,E=accept:1]

</IfModule>

[...]

Das funktioniert super! Leider ist es etwas nervig wenn man Produktbilder aktualisiert, da in diesem Fall nur die alte Datei überschrieben wird. Gibt es eine Möglichkeit das ".webp" Bild zusätzlich zu löschen falls es existiert?

Viele Grüße

Patrick

[Scubi]

Ich frage mich gerade, ob man die Bilder auch auf dem Server per Cron Job von Jpeg nach WebP konvertieren kann.
Hat dazu jemand eine Idee?

[hpzeller]

Schau mal im Admin unter Hilfsprogramme -> Server Info nach ob unter gd auch WebP Support enabled steht, oder ob unter imagick bei ImageMagick supported formats auch WEBP in der liste steht, wenn mindestens eines zutrifft kann man ein PHP-Skript schreiben welches aus jpg-Bilder webp-Bilder erstellt, und dieses per Cron ausführen lassen.

Gruss
Hanspeter

[Scubi]

Ja, unter gd ist WebP Support enabled.
Ich habe gestern mal mit IrfanView eine Stapelverarbeitung laufen lassen. Trotz Einstellung auf 75% Qualität waren die WebP Bilder größer als meine Jpg Bilder.

Also wird man auch ein vernünftiges offline Tool benötigen, dass sauber komprimiert, wenn man keinen Cronjob laufen hat.
Was nutzt Ihr da so, um 10.000 Bilder und mehr in einem Rutsch zu konvertieren?

[kostnermo]

Hi Scubi,

da meine php Kenntnisse etwas eingerostet sind habe ich das ganze mit Python und einem `PatternMatchingEventHandler` gelöst:  https://github.com/kastnerp/Webp-Python.
Wenn dein Hoster Python unterstützt kann dir das eventuell weiterhelfen.

[...] wenn mindestens eines zutrifft kann man ein PHP-Skript schreiben welches aus jpg-Bilder webp-Bilder erstellt, und dieses per Cron ausführen lassen.
[...]

So hatte ich es am Anfang auch versucht, der cronjob hilft aber nur teilweise da er die alten Bilder nicht sofort löscht und man somit immer die alten *.webp files ausgeliefert bekommt bis der cronjob neu durchläuft.
Man könnte zwar einen cronjob jede Minute ausführen lassen, aber das fand ich dann etwas verschwenderisch bzgl. der Ressourcen.

[...]
Also wird man auch ein vernünftiges offline Tool benötigen, dass sauber komprimiert, wenn man keinen Cronjob laufen hat.
[...]

Die webp Python bindings funktionieren bei mir super bei 80% Qualität: https://pypi.org/project/webp/

[...]
Was nutzt Ihr da so, um 10.000 Bilder und mehr in einem Rutsch zu konvertieren?

Schaue mal hier: https://github.com/kastnerp/Webp-Python/blob/master/crontab

Hoffe es hilft weiter.

Viele Grüße

Patrick

[EDIT Tomcraft 13.05.2021: Zitate mit Zitatfunktion kenntlich gemacht.]

[Scubi]

Danke Patrick,

werde ich mal ausprobieren

[filib]

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?

Code: PHP  [Auswählen]

<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