WebP

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:

<IfModule mod_php5.c>
    php_flag engine off

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

# Apache 2.2
<IfModule !mod_authz_core.c>
    Order deny,allow
    Deny from all
    <Files ~ "webp.php|(?i)^.*\.(jpg|jpeg|gif|png|bmp|tiff|svg|pdf|mov|mpeg|mp4|avi|mpg|wma|flv|webm|ico|webp)$">
        Allow from all
    </Files>
</IfModule>

# Apache 2.4
<IfModule mod_authz_core.c>
    Require all denied
    <Files ~ "webp.php|(?i)^.*\.(jpg|jpeg|gif|png|bmp|tiff|svg|pdf|mov|mpeg|mp4|avi|mpg|wma|flv|webm|ico|webp)$">

        Require all granted
    </Files>
</IfModule>

Ou pour /img/cms/.htaccess

<IfModule mod_php5.c>
    php_flag engine off

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

# Enable webp.php (Speed Pack)
<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|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é.