Prestashop Images Webp

Les images WebP 74% plus rapides sur Prestashop ça tabasse (é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.

5 commentaires sur “Les images WebP 74% plus rapides sur Prestashop ça tabasse (é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

Laisser un commentaire

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