Les images WebP 74% plus rapides sur Prestashop (ép. 64)

31 commentaires sur “Les images WebP 74% plus rapides sur Prestashop (ép. 64)”

1. Bonjour Germain, je me permets de compléter avec quelques infos.
   Niveau compatibilité tu peux aussi citer tous les navigateurs Apple qui ne prennent pas en compte ce format.
   Il existe un autre moyen pour envoyer du WEBP au navigateur sans modifier les templates ni exécuter un script pour compresser toutes les images:
   1) chaque navigateur indique dans sa requête s’il accepte le format WEBP ou pas, cela permet de savoir ce qu’on doit lui renvoyer
   2) on peut renvoyer du WEBP même si l’URL se termine par .jpg, le « content-type » sera simplement différent. Du coup, en configurant correctement le htaccess, on peut renvoyer du JPG aux navigateurs non compatibles et du WEBP aux navigateurs modernes. C’est bien quand on a un cache HTML!
   3) puis encore grâce au htaccess, lors du tout 1er affichage on génère le fichier WEBP, pour les suivants on renvoi le fichier généré la 1ère fois, pas besoin de script 🙂

   Le point important quand on utilise la même URL pour 2 formats différents c’est d’ajouter le header « Vary: Accept ». C’est facile à faire mais le proxy de Cloudflare, par exemple, ne le gère pas 🙁 Dans ce cas vous devez forcer une extension différente.

   Répondre

   1. Hello Jérôme,

      Merci d’avoir complété ces informations, j’ai aussi entrevu qu’il était possible de le faire à la volée via des serveurs / API externes mais, j’ai pas creusé plus loin.

      Pour ceux qui ne connaissent pas (et qui lisent ce commentaire) Jpresta propose l’excellent module Prestaeshop « Page Cache Ultimate » : https://jpresta.com/fr/accueil/1-page-cache.html

      A bientôt !

      Répondre

2. Vraiment très intéressant, je vais tester de ce pas

   Répondre

3. Bonjour,

   j’ai cette erreur :

   Fatal error: Uncaught ImagickException: delegate failed `'cwebp' -quiet %Q '%i' -o '%o'' @ error/delegate.c/InvokeDelegate/1928 in modules/scripts/webp.php:103 Stack trace: #0 /modules/scripts/webp.php(103): Imagick->writeimage('/var/www/vhosts...') #1 
   /modules/scripts/webp.php(24): jcphp01_generate_webp_image('/var/www/vhosts...', '/var/www/vhosts...', 60) #2 {main} thrown in /modules/scripts/webp.php on line 103
   

   D’ou cela peut venir?

   Merci

   Répondre

   1. J’ai la même erreur et pour l’instant pas de solution ..

      Répondre

   2. Après plusieurs essais j’ai trouvé la solution. Pour cette erreur, il faut changer la syntaxe de la ligne 103 par $imagick->writeImage(‘webp:/web/modules/scripts/webp-img’);

      Répondre

4. Bonjour Germain,
   Je viens d’installer le script mais j’ai une erreur « HTTP ERROR 500 » en le lançant.
   J’ai cloudflare.
   Cordialement
   Bertrand

   Répondre

5. Bonjour Germain,

   Excellent tuto comme d’habitude! Je viens de tester sur une préprod mais sans résultat, le fait d’avoir du lazyloading ou encore le module advanced search 4 semble contrarier un peu tout cela. Il est un peu tard mais je testerai ultérieurement d’adapter afin de voir ce qu’il en ressort.

   Continue comme ça 😉

   (édit: finalement il y à également le « themes/votre_theme/templates/catalog/_partials/miniaturesproduct-listgrid.tpl » à modifier en remplaçant la balise img par la tienne, à éventuellement adapter si lazy loading en place. Reste à voir pour le CDN =D)

   Répondre

   1. De retour,

      Alors après avoir testé un peu plus sérieusement je fais finalement marche arrière. Je pense que t’est en superbe voie de nous trouver un truc tip top mais pour le moment les points négatif font le dessus des points positifs. Ce que j’ai constaté:

      – En l’état la page continue de charger tous les éléments de base + les nouveaux en .webp, la page est finalement plus lourde qu’au départ et comporte plus de requêtes
      – Les images webp ne sont pas « rankables » étant donné leurs noms, je suis d’accord ça devrait pouvoir vite s’arranger en changeant les variables d’attribution
      – Malgré les annonces d’apple, webp ne sera compatible qu’avec des versions récentes de safari, ios et macos (et encore je viens de tester sur safari 14 macos censé être compatible et hélas les webp ne s’y affichent pas encore)

      En tout cas grand MERCI encore, tu nous fais toujours de sacrées trouvailles et j’adore les tester =D

      Répondre

      1. Hello,

         Oui je pense qu’on peut faire beaucoup mieux, mais il faudrait que je prenne plus de temps. A voir peut-être du côté d’un module Prestashop webp pour gagner du temps : https://addons.prestashop.com/fr/recherche?search_query=webp

         Malgré tout le format webp reste encore « nouveau » pas sûr non plus que c’est ce format qui dominera le marché à l’avenir.

         A bientôt !

         Répondre

6. Super article, à mon goût trop peu de sites utilisent le WebP à l’heure actuelle !
   Perso j’ai mis en place le WebP l’année dernière sur mon prestashop sans toucher une ligne de code de ce dernier !
   J’ai ajouté la librairie WebP sur mon serveur dédié et un fichier PHP en tache Cron qui s’exécute toutes les heures.
   Le script liste toutes les images et qui vérifie si une image du même nom en WebP existe et dont la date est + récente que celle du fichier original, si la date du fichier WebP est plus vieille que l’image il la supprime et la regénère, si aucun WebP n’existe il le génère aussi.
   Je me suis aussi rajouté une fonction de régénération complète qui supprime tous les WebP et les régénère à lancer à la main si nécessaire.
   Dans l’htaccess j’ai rajouté une vérification de présence d’un fichier WebP + la prise en charge du WebP du navigateur et si ca colle ca lui sert la WebP au lieu de la jpg ou png !

   Prestashop étant une usine à gaz, je n’ai vraiment pas voulu rajouter des choses dessus et ca fait très bien le taf 😉

   Répondre

   1. Très bonne manière de procéder aussi, c’est TOP !

      Répondre

   2. Si tu pouvais nous partager ton script PHP pour noël ça serait super sympa !

      Répondre

   3. Bonjour Yoann,
      ta méthode me semble plus simple à mettre en place
      aurais-tu un lien pour un tuto ?
      Une vraie mine d’or tes articles Germain, merci encore !!

      Répondre

7. Ne fonctionne pas, la génération des images ne ce fait pas, le dossier webp-img reste vide même après vérifier les modifications apporter sur prestait hop via ce tuto

   Répondre

   1. dès l’ajout du token page blanche

      Répondre

8. Hello, pour ma part j’utilise un cron pour générer toutes mes webp, et une réécriture dans le .htaccess pour fournir le webp si supporté :
   # pour les navigateurs qui précisent supporter webp
   # si l’équivalent du fichier existe en webp, on le sert à la place

   Header set Vary « Accept-Encoding »
   AddType « image/webp » .webp
   AddEncoding webp .webp

   RewriteCond %{HTTP:Accept} image/webp
   RewriteCond %{REQUEST_FILENAME}.webp -f
   RewriteRule ^(.*)$ $1.webp [L]

   Je fais ça sur tous mes sites, d’habitude sans soucis, mais sur prestashop, la réécriture ne fonctionne pas, je ne sais pas (encore) pourquoi.

   Répondre

   1. la réécriture des images est compliquée avec prestashop. ceci devrait fonctionner :

      # Images
      RewriteCond %{HTTP_HOST} ^www.domain.com$
      RewriteCond %{HTTP:Accept} image/webp
      RewriteCond %{REQUEST_URI} ^([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$
      RewriteCond %{ENV:REWRITEBASE}img/p/$1/$1$2$3.webp -f
      RewriteRule ^([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$1$2$3.webp [L]
      RewriteCond %{HTTP_HOST} ^www.domain.com$
      RewriteCond %{HTTP:Accept} image/webp
      RewriteCond %{REQUEST_URI} ^([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$
      RewriteCond %{ENV:REWRITEBASE}img/p/$1/$2/$1$2$3$4.webp -f
      RewriteRule ^([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$1$2$3$4.webp [L]
      RewriteCond %{HTTP_HOST} ^www.domain.com$
      RewriteCond %{HTTP:Accept} image/webp
      RewriteCond %{REQUEST_URI} ^([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$
      RewriteCond %{ENV:REWRITEBASE}img/p/$1/$2/$3/$1$2$3$4$5.webp -f
      RewriteRule ^([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$1$2$3$4$5.webp [L]
      RewriteCond %{HTTP_HOST} ^www.domain.com$
      RewriteCond %{HTTP:Accept} image/webp
      RewriteCond %{REQUEST_URI} ^([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$
      RewriteCond %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$1$2$3$4$5$6.webp -f
      RewriteRule ^([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$1$2$3$4$5$6.webp [L]
      RewriteCond %{HTTP_HOST} ^www.domain.com$
      RewriteCond %{HTTP:Accept} image/webp
      RewriteCond %{REQUEST_URI} ^([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$
      RewriteCond %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6$7.webp -f
      RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6$7.webp [L]
      RewriteCond %{HTTP_HOST} ^www.domain.com$
      RewriteCond %{HTTP:Accept} image/webp
      RewriteCond %{REQUEST_URI} ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$
      RewriteCond %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7$8.webp -f
      RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7$8.webp [L]
      RewriteCond %{HTTP_HOST} ^www.domain.com$
      RewriteCond %{HTTP:Accept} image/webp
      RewriteCond %{REQUEST_URI} ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$
      RewriteCond %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8$9.webp -f
      RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8$9.webp [L]
      RewriteCond %{HTTP_HOST} ^www.domain.com$
      RewriteCond %{HTTP:Accept} image/webp
      RewriteCond %{REQUEST_URI} ^c/([0-9]+)(\-[\.*_a-zA-Z0-9-]*)(-[0-9]+)?/.+\.jpg$
      RewriteCond %{ENV:REWRITEBASE}img/c/$1$2$3.webp -f
      RewriteRule ^c/([0-9]+)(\-[\.*_a-zA-Z0-9-]*)(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/c/$1$2$3.webp [L]
      RewriteCond %{HTTP_HOST} ^www.domain.com$
      RewriteCond %{HTTP:Accept} image/webp
      RewriteCond %{REQUEST_URI} ^c/([a-zA-Z_-]+)(-[0-9]+)?/.+\.jpg$
      RewriteCond %{ENV:REWRITEBASE}img/c/$1$2.webp -f
      RewriteRule ^c/([a-zA-Z_-]+)(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/c/$1$2.webp [L]
      

      Répondre

      1. Hello,

         Si tu as des ressources sur comment écrire ces règles, je suis preneur. J’ai essayé ta serie de règles sans succés, mais mes images sont sous la forme filename.jpg.webp.

         Je dispose des deux fichiers, pour pouvoir servir les jpg classique aux navigateurs non compatibles. Sur un site autre que presta j’utilise les mêmes Règles que Benoit Charpentier.

         Répondre

9. En suivant le tuto, j’ai mis les images .webp en place sur le site d’un http://swimmobilier.com

   Le script a généré les images .webp, les modifs apportées dans les différents .tpl

   – ça fonctionne parfaitement sur :
   – Page d’accueil
   http://swimmobilier.com/fr/
   les photos sont dans les deux formats … webp & jpg

   – Listing produits
   https://swimmobilier.com/fr/nouveaux-biens-immobiliers

   Par contre, je n’arrive pas à donner un nom SEO a l’image en .webp

   je voudrais modifier le nom du fichier 1.webp en ID-produit-nom-du-produit.webp

   ex 1-appartement-plazza.webp

   Répondre

10. Bonjour Germain, super vidéo comme toujours, j’ai voulu tester, mais j’ai une magnifique erreur 403 access forbidden, comme si mon prestashop 1.7 refusait de me laisser accéder à mon fichier qui pourtant existe sur mon serveur… une idée?

    Répondre

11. Salut,
    Merci du partage !

    J’ai cependant un problème :
    Mes images avec un fond transparent ne sont pas prises en compte.
    Après vérification, j’ai remarqué que mes images sont tous en .jpg : et donc actuellement j’ai des .jpg avec fond transparent (je ne savais pas cela possible)
    Cela doit donc poser soucis lors de la création des images en .webp

    J’ai essayé de regénérer ces images mais rien ne change.

    La seule solution que j’ai trouvée est que je dois changer mes images 1 à 1 en les reconvertissant en jpg via Paint

    Du coup s’il y a une solution pour plus rapide je suis preneur, car j’ai modifié un peu le script et cela me fait modifier beaucoup d’image…

    Répondre

    1. Bonjour,

       J’ai le même soucis, mais la raison n’est pas des jpg avec fond transparent, mais des PNG avec extension JPG

       Or, étant nativement des PNG, la conversion n’est pas pas possible avec l’extension JPG.

       Je pense qu’il faut regarder dans le script si la conversion a réussi (le return false ou le nom du fichier) et dans ce cas prévoit la conversion type PNG…

       Je travaille dessus, mais pas simple faute de temps 🙁

       Enfin, il convient aussi de prendre en compte le fait des conversions déjà faites… pour ne pas les refaire, sauf si l’on ajoute une variable oui/non pour les refaire…

       Voilou pour l’instant

       Répondre

       1. Bonjour, voila se que j’ai rajouter et cela a l’aire de fonctionné :

          if (function_exists('imagewebp')) {
                  switch ($file_type) {
          		<!--ici-->          
          			case 'jpeg':
          				$image = imagecreatefromjpeg($file);
                          break;   
          				<!--Jusque la --> 
                      case 'jpg':
                          $image = imagecreatefromjpeg($file);
                          break;
                      case 'png': 
                          $image = imagecreatefrompng($file);
          				<!--Peut être prendre cela aussi-->              
          				imagepalettetotruecolor($image);
                          imagealphablending($image, true);
                          imagesavealpha($image, true);
                          break;  
          				<!--Jusque la pour le fond transparent--> 
                      case 'gif':
                          $image = imagecreatefromgif($file);
                          break;
                      default:
                          return false;
                  }
          

          Moi sa ma suffit, par contre j’essai de l’appliquer a la page produit mes je n’arrive pas a récupérer les autres photos des produits si quelqu’un aurai une idée

          Merci Germain

          Répondre

12. Ca marche ! Plus qu’a modifier un peu pour faire la même chose avec les images des pages produits. Merci beaucoup pour le tuto 😉

    Lien vers un petit générateur webp utile pour les images supplémentaires: https://webp-converter.com/

    Répondre

13. j’ai un petit bug. Lorsque je remplace une image (même en supprimant l’image correspondante dans le dossier webp-img/ et en relançant le script), l’image qui est recréée est la même que celle de départ malgré qu’elle ai été supprimée. La suppression du cache n’y fait rien non plus.
    Merci par avance si tu as une solution.

    Répondre

    1. J’ai rien dis :-p certainement un problème de cache. Visiblement ça fonctionne.

       Répondre

14. Bonjour Germain.
    J’ai trouvé les informations que vous avez laissées très utiles.
    Je voudrais vous demander s’il est possible de faire cela pour les images des catégories.
    Merci beaucoup.
    Mario.

    Répondre

15. Pour ma part le tuto fonctionne. mais…
    Les photos en Webp sont énorme (je pense en taille réél…)

    qu’elle est la commande pour que les images gardent la même taille que comme elles étaient en jpg.

    Du coup…J’ai fait marche arrière…

    Merci d’avance

    Répondre

16. Bonne idée franchement moi sur https://www.biomedica.tn jai pris un module gratuit mais jai vu le nombre de visites SEMRUSH chutter jai vite remis comme il etait. Franchement WEBP sans module c’est magnifique. Prestashop 8 a aussi le Webp intégré dedans. Merci Pur ce tuto

    Répondre

17. Hello Webbax,

    Te remerciant pour tes tutos et le reste, que je suis depuis nombreuses années 🙂
    Tite question en passant, est-ce qu’il y aurait moyen de faire la même sur Presta 1.7 ?

    Merci d’avance pour la réponse,

    Répondre