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

Il a été très difficile de trouver une configuration qui fonctionne bien. Je ne suis pas expert dans la configuration de nginx donc je suppose qu'il y a une autre façon de faire. Si vous souhaitez améliorer cette configuration, contactez-moi, je serai heureux de mettre à jour cet article pour aider d'autres personnes !

Voici ma solution (soyez gentil).

Avant la section "server", placez ce code :

map $http_accept $webp_enable {
	default 0;
	"~*webp" 1;
}

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 :

# Jpresta Speedpack
if ($webp_enable = 1) {
	# Rewrite images URL using a specific extension ".webp_compressor" so we can have specific rules to compress the image/svg
	# if the webp file is not already created.
	rewrite "^/c/([0-9]+)(\-[_a-zA-Z0-9-]*)/(.*)\.(jpg|jpeg|png)$" /img/c/$1$2.webp_compressor last;
	rewrite "^/c/([_a-zA-Z-]+)/(.*)\.(jpg|jpeg|png)$" /img/c/$1.webp_compressor last;
	rewrite "^/([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$1$2.webp_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.webp_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.webp_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.webp_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.webp_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.webp_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.webp_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.webp_compressor last;
	# all other images
	rewrite "^(.+)\.(jpg|jpeg|png)$" $1.webp_compressor last;
}

location ~* ^(.+)\.webp_compressor$ {
	# Indicates to proxies that the file content/format depends (Vary) on the "Accept" header
	add_header Vary Accept;

	# Indicates to proxies that the file can be cached for the max duration
	add_header Pragma public;
	add_header Cache-Control "public, must-revalidate, proxy-revalidate";
	expires max;

	# Indicates to nginx not to log access
	access_log off;
	log_not_found off;

	# Try to serve the WEBP file directly or compress the image
	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 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.