WebP / AVIF

Si vous utilisez Nginx, assurez vous d'avoir cette configuration:

"Proxy mode" doit être activé, les autres options doivent être désactivées.

Si après l'installation du module certaines images de votre boutique ne s'affichent plus comme le logo, les images des pages CMS, les images dans le backoffice, etc. c'est probablement à cause d'un fichier .htaccess dans le répertoire /img et /img/cms. Celui-ci bloque tout script PHP, même s'il s'agît d'une redirection (le script n'est pas réellement dans ce répertoire).

Pour corriger ce problème il faut ajouter une exception pour notre convertisseur webp.php comme ceci:

# Disable PHP globally unless explicitly re-enabled
<IfModule mod_php5.c>
    php_flag engine off

    # Enable PHP execution only for avif.php and webp.php (used by Speed Pack)
    <Files "avif.php">
        php_flag engine on
    </Files>
    <Files "webp.php">
        php_flag engine on
    </Files>
</IfModule>

# Apache 2.2 access control
<IfModule !mod_authz_core.c>
    Order deny,allow
    Deny from all

    # Allow access to static image and video files
    <FilesMatch "\.(jpe?g|gif|png|bmp|tiff|svg|pdf|mov|mpeg|mp4|avi|mpg|wma|flv|webm|ico|avif|webp)$">
        Allow from all
    </FilesMatch>

    # Allow access to avif.php and webp.php (for image conversion)
    <Files "avif.php">
        Allow from all
    </Files>
    <Files "webp.php">
        Allow from all
    </Files>
</IfModule>

# Apache 2.4 access control
<IfModule mod_authz_core.c>
    Require all denied

    # Allow access to static image and video files
    <FilesMatch "\.(jpe?g|gif|png|bmp|tiff|svg|pdf|mov|mpeg|mp4|avi|mpg|wma|flv|webm|ico|avif|webp)$">
        Require all granted
    </FilesMatch>

    # Allow access to avif.php and webp.php (for image conversion)
    <Files "avif.php">
        Require all granted
    </Files>
    <Files "webp.php">
        Require all granted
    </Files>
</IfModule>

Ou pour /img/cms/.htaccess

<IfModule mod_php5.c>
    php_flag engine off

    # Enable PHP only for avif.php and webp.php (Speed Pack)
    <Files "avif.php">
        php_flag engine on
    </Files>
    <Files "webp.php">
        php_flag engine on
    </Files>

</IfModule>

# Enable avif.php and webp.php (Speed Pack)
<Files "avif.php">
    Order allow,deny
    Allow from all
</Files>
<Files "webp.php">
    Order allow,deny
    Allow from all
</Files>


deny from all
<Files ~ "(?i)^.*\.(jpg|jpeg|gif|png|bmp|tiff|svg|pdf|mov|mpeg|mp4|avi|mpg|wma|flv|webm|avif|webp)$">
	order deny,allow
	allow from all
</Files>

Oui, toutes les images de votre boutique seront automatiquement converties au format WEBP. Même les images du CMS ou d'autres modules comme le blog.

OUI, vous avez toujours besoin d'un module WEBP pour Prestashop ! Parce que cette fonctionnalité présente un bug dans PS 8.0. Il devrait être corrigé dans PS 8.1 mais je vérifierai cela dès sa sortie car je ne sais pas si les images JPG seront affichées sur les navigateurs qui ne peuvent pas lire le format WEBP comme Safari (iPhone).

Cette configuration permet à Nginx de détecter automatiquement le format d’image le plus optimisé supporté par le navigateur du visiteur : AVIF en priorité, sinon WEBP, et à défaut l’image originale (JPG/PNG). Le serveur réécrit les URL des images pour les rediriger vers un script de compression (avif.php ou webp.php) qui génère le fichier si nécessaire.

Les en-têtes HTTP (Vary: Accept, Cache-Control, etc.) assurent que les fichiers sont bien mis en cache par les navigateurs et les proxys, tout en livrant la meilleure version possible à chaque utilisateur.

Avant la section "server", placez ce code :

# Detect best supported format (AVIF > WEBP > none)
map $http_accept $format_compressor {
    default "";
    "~*avif" "avif";
    "~*webp" "webp";
}

Il nous dira si le navigateur du visiteur peut lire les images WEBP.

Vous avez probablement plusieurs lignes de "rewrite" pour toutes les images, placez le code suivant juste avant :

# AVIF/WEBP priority handling
if ($format_compressor != "") {
    rewrite "^/c/([0-9]+)(\-[_a-zA-Z0-9-]*)/(.*)\.(jpg|jpeg|png)$" /img/c/$1$2.${format_compressor}_compressor last;
    rewrite "^/c/([_a-zA-Z-]+)/(.*)\.(jpg|jpeg|png)$" /img/c/$1.${format_compressor}_compressor last;
    rewrite "^/([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$1$2.${format_compressor}_compressor last;
    rewrite "^/([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$2/$1$2$3.${format_compressor}_compressor last;
    rewrite "^/([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$2/$3/$1$2$3$4.${format_compressor}_compressor last;
    rewrite "^/([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$2/$3/$4/$1$2$3$4$5.${format_compressor}_compressor last;
    rewrite "^/([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6.${format_compressor}_compressor last;
    rewrite "^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7.${format_compressor}_compressor last;
    rewrite "^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8.${format_compressor}_compressor last;
    rewrite "^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$2/$3/$4/$5/$6/$7/$8/$1$2$3$4$5$6$7$8$9.${format_compressor}_compressor last;
    rewrite "^(.+)\.(jpg|jpeg|png)$" $1.${format_compressor}_compressor last;
}

# Location for AVIF
location ~* ^(.+)\.avif_compressor$ {
    add_header Vary Accept;
    add_header Pragma public;
    add_header Cache-Control "public, must-revalidate, proxy-revalidate";
    expires max;
    access_log off;
    log_not_found off;

    set $url_avif_compressor "/modules/jprestaspeedpack/controllers/front/avif.php?src=$1.jpg";
    try_files $1.avif $url_avif_compressor;
}

# Location for WEBP
location ~* ^(.+)\.webp_compressor$ {
    add_header Vary Accept;
    add_header Pragma public;
    add_header Cache-Control "public, must-revalidate, proxy-revalidate";
    expires max;
    access_log off;
    log_not_found off;

    set $url_webp_compressor "/modules/jprestaspeedpack/controllers/front/webp.php?src=$1.jpg";
    try_files $1.webp $url_webp_compressor;
}

ATTENTION : si vous utilisez le module de compression AVIF/WEBP autonome alors vous devez remplacer 'jprestaspeedpack' par 'jprestawebp'.

Contactez-moi si vous avez besoin d'aide ou si vous pouvez améliorer le script !

oui, les navigateurs qui ne peuvent pas lire le format WEBP obtiendront le format original (JPG/PNG).

Le module n'appelle pas le Hook qui permet la mise à jour.

Il faut modifier la fonction imageResize() du fichier /modules/prestablog/prestablog.php : 

Remplacer ceci

        return ImageManager::write('jpg', $dest_image, $fichier_apres);

Par ceci

        $ret = ImageManager::write('jpg', $dest_image, $fichier_apres);

        Hook::exec('actionOnImageResizeAfter', ['dst_file' => $fichier_apres, 'file_type' => 'jpg']);

        return $ret;

​​Après vos images seront bien mises à jour.

​

Non, le module ne convertit que les images JPG/PNG en format WEBP. Il est recommandé d'importer les images en JPG car certains navigateurs ne peuvent toujours pas charger les fichiers WEBP. De plus, je pense que les JPG sont meilleurs en tant qu'images d'origine car Prestashop crée plusieurs formats/tailles d'images, c'est pourquoi l'image d'origine doit être de bonne qualité.

Le pourcentage que vous pouvez ajuster dans le module correspond à un niveau de qualité plutôt qu'à un pourcentage de compression. 100 % signifie une qualité maximale sans perte, tandis que 50 % représente une qualité réduite avec une compression plus importante.

En règle générale, 80 % offre un bon compromis entre qualité et taille de fichier. Cependant, le choix dépend de vos besoins et du type d'image utilisé. C'est pourquoi nous mettons à votre disposition un outil de comparaison directement dans le module Prestashop.

Le format AVIF est un nouveau format d’image très performant, plus récent que le WEBP. Il permet de réduire considérablement le poids des images, tout en conservant une excellente qualité visuelle.

En moyenne, AVIF compresse les images jusqu’à 50% plus efficacement que le WEBP, qui lui-même réduit déjà le poids des images jusqu’à 30% à 40% par rapport au format JPEG. Cela signifie un site plus rapide, une meilleure expérience utilisateur et un meilleur référencement.