Images WebP et AVIF dans PrestaShop 9 : formats, qualité et régénération
PrestaShop 9 génère des images dans des formats modernes sans module supplémentaire. Nous vous expliquons comment le configurer et le piège qui peut laisser votre boutique toute blanche.
Les images sont, de loin, ce qui pèse le plus dans une boutique en ligne. PrestaShop 9 permet de générer les miniatures produit en WebP et AVIF en plus du JPG, et de les servir avec la balise <picture> pour que chaque navigateur choisisse le meilleur format qu'il comprend.
Ce que vous y gagnez
- WebP : pèse généralement 25 à 35 % de moins qu'un JPG de qualité similaire. Tous les navigateurs actuels le comprennent.
- AVIF : encore plus léger, surtout pour les photos, mais plus lent à générer.
Configuration
Dans Apparence > Images, vous choisissez les formats à générer et la qualité. En interne, c'est enregistré dans la configuration PS_IMAGE_FORMAT, par exemple webp,avif,jpg.
Le piège : le serveur doit savoir écrire le format
PHP génère les images avec la bibliothèque GD (ou Imagick). Si vous configurez AVIF et que la GD de votre serveur ne prend pas en charge AVIF, la fonction imageavif() n'existe pas. PrestaShop 9 génère à la volée les miniatures manquantes, et en essayant, l'erreur interrompt la page : la boutique s'affiche en blanc, avec un code 200 et rien dans les journaux.
Vérifiez-le avant d'activer un format :
php -r 'var_dump(function_exists("imagewebp"), function_exists("imageavif"));'
Régénérer les miniatures
Dans Apparence > Images > Régénérer les miniatures. Sur les gros catalogues, cela peut être très long et s'interrompre faute de temps d'exécution ; dans ce cas, régénérez-les par type (les produits d'abord) ou avec un script en ligne de commande qui saute celles qui existent déjà.
Qualité
- JPG : 85–90.
- WebP : 80–85.
- AVIF : 60–75 (son échelle n'est pas comparable à celle du JPG).
Et aussi
- Téléversez des images originales de taille raisonnable (2000 px de côté suffisent pour presque tous les zooms).
- Définissez les tailles d'image que votre thème utilise réellement : chaque taille supplémentaire multiplie l'espace disque et le temps de régénération.
- Activez le chargement différé (
loading="lazy") dans les listes, mais pas sur l'image principale de la fiche : celle-ci doit se charger au plus vite.