Prestashop Images Webp

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

Le futur du web c’est bien sûr augmenter les débits et les bandes passantes… mais si vous voulez que votre Prestashop soit vraiment rapide, il va falloir le mettre au régime (aie)… heureusement le format WebP est là !

Une boutique Prestashop contient un tas d’images

Quand vous naviguez sur une boutique Prestashop, énormément d’images sont affichées à l’écran (principalement des images de produits). Bien souvent on aimerait les optimiser, mais on ne sait pas trop « comment »…

Parfois on se contente de baisser la qualité des images dans la génération des miniatures en back-office… mais le gain reste très léger.

La réalité c’est que les images sont « vitales » pour votre site e-commerce et qu’on ne peut pas vraiment les améliorer à la volée (comme on le ferait avec un code source trop lent)… Alors il faut trouver une méthode alternative si on veut aller plus loin (voir aussi le billet : diminuer les images Prestashop).

Le format WebP c’est quoi ?

Très loin d’être un expert dans le domaine des images, je vais vous faire un bref résumé simple : « WebP c’est un format d’image plus léger que le JPG ». Le gain potentiel peut-être juste « FOU » avec 60 – 70% de compression l’image reste agréable à l’oeil.

Avec ce système une image qui faisait par exemple 90 Ko en « .jpg » peut tout à coup tomber à 30 Ko c’est juste énorme. Par contre, le format WebP n’est pas pris en compte par tous les navigateurs ça c’est l’inconvénient… mais les navigateurs plus populaires supportent ce format (de toute façon il y a une astuce j’en parle après).

Beaucoup de Prestashop utilisent WebP ?

De ce que j’ai pu voir je peux vous répondre « Non » c’est même assez rare… mais pourquoi ? Même s’il existe des modules WebP sur Prestashop Addons, ça reste quand même « nouveau » et dédié à l’élite.

Les e-commerçants et les agences web ne peuvent pas « TOUT » optimiser et appliquer toutes les recommandations. Le format WebP implique des contraintes d’intégration, on préfère souvent ajouter un système de cache par-dessus… sans trop devoir trifouiller les sources (cela vous laisse donc une belle opportunité).

Compatibilité ? Comment gérer ?

Moi-même j’ai pas vraiment eu l’occasion d’utiliser WebP avant de faire ce test… et j’ai vu que par exemple sous Internet Explorer « AIE » cela ne marche pas, mais qu’elle frustration… (IE c’est vraiment sa passion de frustrer les intégrateurs ahaha).

Après une recherche plus poussée, j’ai pu utiliser pour la 1ère fois la balise « picture » qui offre la possibilité de définir plusieurs sources d’images et le navigateur va choisir celle qui est la plus pertinente en fonction de ce qu’il support (c’est juste génial, avec ça IE est content et affichera ses .jpg et pour les autres ça sera du .webp).

Ce que j’en pense ? Génial tout simplement…

Finalement ça ne change pas grand chose si ce n’est le fait que l’extension n’est pas la même, ce type de compression a été développé par Google alors on peut comprendre pourquoi c’est aussi performant.

Google c’est très bien, mais ce n’est pas lui le centre du monde (d’accord un peu)… c’est juste pour vous dire que le « .jpg » reste très ancré depuis des générations et même si Google veut faire basculer vers ce nouveau format il faudra du temps et que les navigateurs recommandent aux intégrateurs l’utilisation de WebP.

En attendant, il faut faire cohabiter les « .jpg » et « .webp » avec l’attribut « picture », comme je le montre dans la vidéo, cela fonctionne très bien, sans que ça soit trop intrusif sur ce qui est déjà en place.

Pour ce tutoriel Prestashop vous avez à disposition :

  • 1 x fichier webp.php (pour générer les images)
  • 1 x fichier product.tpl (pour afficher les images .webp)

Télécharger

Résumé de la vidéo : Le format WebP pour les images Prestashop c’est un bon plan !

  • On commence par regarder la page source d’origine avec les images et on regarde ce que ça représente (en taille).
  • Ensuite, on intègre le script pour générer massivement les images .webp dans le dossier « /modules/scripts/webp-img/ » (la différence de poids est dingue).
  • Dans le template Prestashop on ajuste la liste des produits pour forcer le chargement des images .webp pour autant que le navigateur le supporte.
  • On pourrait imaginer bien sûr d’appliquer un concept similaire à d’autres emplacements, comme par exemple sur la fiche produit.

17 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.

    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 !

  2. 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

    1. 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’);

  3. 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)

    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

  4. 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 😉

  5. 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

  6. 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.

    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]
      

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *