WebP

If you are using Nginx, then make sure your configuration is as follow:

"Proxy mode" must be ON, other options must be OFF.

Se dopo l'installazione del modulo alcune immagini del tuo negozio, come il logo, le immagini delle pagine CMS, le immagini nel back office, ecc., non vengono più visualizzate, è probabilmente a causa di un file .htaccess nelle directory /img e /img/cms. Questo file blocca tutti gli script PHP, anche se si tratta solo di un reindirizzamento (lo script non si trova effettivamente in questa directory).

Per risolvere questo problema, è necessario aggiungere un'eccezione per il nostro convertitore webp.php come segue:

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

Or for /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>

Sì, tutte le immagini del vostro negozio saranno automaticamente convertite nel formato WEBP. Anche le immagini del CMS o di altri moduli come il blog.

Sì, avete ancora bisogno di un modulo WEBP per Prestashop! Perché la funzione ha un bug in PS 8.0. Dovrebbe essere risolto in PS 8.1, ma lo verificherò non appena sarà rilasciato perché non so se le immagini JPG saranno visualizzate dai browser che non possono leggere il formato WEBP come Safari (iPhone).

È stato molto difficile trovare una configurazione che funzionasse bene. Non sono esperto nella configurazione di nginx, quindi immagino che ci sia un altro modo per farlo. Se volete migliorare questa configurazione contattatemi, sarò felice di aggiornare questo post per aiutare altre persone!

Ecco la mia soluzione (siate gentili).

Prima della sezione "server", inserire questo codice:

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

Ci dirà se il browser del visitatore può leggere le immagini WEBP.

Probabilmente avete più righe di "rewrite" per tutte le immagini, inserite il seguente codice subito prima:

# 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;
}

ATTENZIONE: se si utilizza il modulo di compressione WEBP autonomo, è necessario sostituire 'jprestaspeedpack' con 'jprestawebp'.

Contattatemi se avete bisogno di aiuto o se potete migliorare lo script!

sì, i browser che non possono leggere il formato WEBP otterranno il formato originale (JPG/PNG).

Il modulo non chiama l'hook che consente l'aggiornamento.

È necessario modificare la funzione imageResize() nel file /modules/prestablog/prestablog.php:

Sostituire questo

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

Con questo

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

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

 return $ret;

in seguito le immagini saranno aggiornate.

No, il modulo converte solo immagini JPG/PNG in formato WEBP. Si consiglia di importare le immagini come JPG perché alcuni browser ancora non possono caricare file WEBP. Inoltre, penso che i JPG siano migliori come immagini originali perché Prestashop crea più formati/dimensioni di immagini, motivo per cui l'immagine originale deve essere di buona qualità.