WebP / AVIF

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:

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

Or for /modules/.htaccess

<FilesMatch "^(?!webp\.php$|avif\.php$).*\.(php|log|txt|lock|json|yml|yaml|tpl|twig)$|^config(_[a-z]+)?\.xml$">
    # Apache 2.2
    <IfModule !mod_authz_core.c>
        Order deny,allow
        Deny from all
    </IfModule>

    # Apache 2.4
    <IfModule mod_authz_core.c>
        Require all denied
    </IfModule>
</FilesMatch>

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

Questa configurazione consente a Nginx di rilevare automaticamente il formato immagine più ottimizzato supportato dal browser del visitatore: AVIF in priorità, altrimenti WEBP, e se nessuno dei due è supportato, l’immagine originale (JPG/PNG). Il server riscrive gli URL delle immagini per reindirizzarli a uno script di compressione (avif.php o webp.php) che genera il file se necessario.

Le intestazioni HTTP (Vary: Accept, Cache-Control, ecc.) assicurano che i file vengano correttamente memorizzati nella cache da browser e proxy, fornendo sempre la versione migliore possibile a ogni utente.

Prima della sezione "server", inserire questo codice:

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

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:

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

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

La percentuale che è possibile regolare nel modulo corrisponde a un livello di qualità piuttosto che a una percentuale di compressione. Il 100% significa qualità massima senza perdita, mentre il 50% rappresenta una qualità ridotta con una maggiore compressione.

In generale, l'80% offre un buon compromesso tra qualità e dimensione del file. Tuttavia, la scelta dipende dalle vostre esigenze e dal tipo di immagine utilizzata. Per questo motivo, mettiamo a disposizione uno strumento di confronto direttamente nel modulo Prestashop.

AVIF è un nuovo formato immagine ad alte prestazioni, più recente del WEBP. Riduce notevolmente il peso delle immagini mantenendo un’eccellente qualità visiva.

In media, AVIF comprime le immagini fino al 50% in più rispetto a WEBP, che già riduce del 30–40% rispetto al JPEG. Il risultato? Un sito più veloce, migliore esperienza utente e SEO più efficace.

Risposta breve: Se PHP indica AVIF Support => enabled ma i file AVIF generati sono vuoti o imageavif() indica che il supporto AVIF è disabilitato, il problema potrebbe essere causato da un'incompatibilità tra i pacchetti PHP GD e libgd3. L'aggiornamento di libgd3 a una versione compatibile con l'installazione di PHP può risolvere il problema.

Sintomi

Durante la generazione di immagini AVIF con PHP GD, potrebbe essere visualizzato il seguente avviso:

PHP Warning: imageavif(): AVIF image support has been disabled

I file .avif generati potrebbero inoltre essere vuoti (0 byte).

Tuttavia, PHP potrebbe indicare che il supporto AVIF è correttamente abilitato:

php -i | grep -E "GD Support|AVIF Support|WebP Support"

Ad esempio:

GD Support => enabled
WebP Support => enabled
AVIF Support => enabled

Causa

Questo problema può verificarsi quando PHP/GD e la libreria di sistema libgd provengono da repository diversi o utilizzano versioni incompatibili.

Ad esempio, PHP e php8.5-gd potrebbero provenire dal repository Sury, mentre libgd3 utilizza ancora la versione fornita da Ubuntu.

È possibile verificare le versioni installate con:

apt policy php8.5-gd libgd3

Soluzione

Aggiornare libgd3 per installare una versione compatibile con l'installazione di PHP/GD:

sudo apt update
sudo apt install libgd3

Se si utilizza PHP-FPM, riavviarlo successivamente, adattando la versione di PHP se necessario:

sudo systemctl restart php8.5-fpm

Verificare la correzione

È possibile testare direttamente la generazione di un'immagine AVIF con PHP:

rm -f /tmp/test.avif
php -r '$im=imagecreatetruecolor(100,100); var_dump(imageavif($im,"/tmp/test.avif"));'
ls -lh /tmp/test.avif
file /tmp/test.avif

Il file generato non dovrebbe più essere vuoto e dovrebbe essere identificato come un'immagine AVIF.

Nota: La presenza di AVIF Support => enabled in php -i o gd_info() non garantisce necessariamente che la codifica AVIF funzioni correttamente. Librerie GD incompatibili possono impedire la generazione delle immagini anche se PHP indica che il supporto AVIF è abilitato.