Immagini WebP in PrestaShop: configurazione e insidie

Cos'è il WebP e perché è importante per PrestaShop

WebP è un formato di immagine moderno sviluppato da Google che fornisce compressione sia lossy che lossless per le immagini web. Rispetto ai formati tradizionali come JPEG e PNG, WebP offre generalmente dimensioni di file inferiori del 25-35% a parità di qualità visiva. Per un negozio e-commerce che utilizza PrestaShop, dove le pagine prodotto contengono spesso decine di immagini, il passaggio a WebP può ridurre notevolmente il peso della pagina, migliorare i tempi di caricamento e aumentare i punteggi Core Web Vitals—tutti fattori che influenzano direttamente il posizionamento SEO e i tassi di conversione.

A differenza dei formati di nuova generazione più vecchi che hanno faticato con l'adozione, WebP ha raggiunto un supporto quasi universale da parte dei browser. Nel 2026, ogni browser principale—Chrome, Firefox, Safari, Edge, Opera e le loro controparti mobile—supporta pienamente WebP. Anche i vecchi ritardatari come le versioni più datate di Safari su macOS Catalina sono ormai statisticamente irrilevanti, rappresentando meno dello 0,3% del traffico globale. Questo significa che puoi servire con sicurezza immagini WebP a praticamente tutti i visitatori senza preoccuparti di problemi di compatibilità.

Per i commercianti PrestaShop, i guadagni in prestazioni sono sostanziali. Un catalogo prodotti tipico con 1.000 prodotti e 5 immagini ciascuno può vedere il payload totale delle immagini ridotto da 500 MB a meno di 350 MB. Sulle pagine di elenco prodotti che mostrano 20-40 miniature, questo si traduce in 200-400 KB risparmiati per caricamento di pagina—sufficienti per migliorare significativamente le metriche Time to First Contentful Paint e Largest Contentful Paint.

Abilitare WebP in PrestaShop 1.7 e 8.x

PrestaShop 1.7.8+ e tutte le versioni 8.x includono supporto WebP nativo. La funzionalità è integrata nel sistema di rigenerazione delle immagini e può essere abilitata attraverso il back office. Ecco come attivarla:

1. Vai su Design > Impostazioni Immagini (in PS 8.x) o Preferenze > Immagini (in PS 1.7).
2. Cerca la sezione Opzioni di generazione immagini nella parte inferiore della pagina.
3. Trova l'impostazione Formato immagine e seleziona una delle opzioni relative a WebP. PrestaShop offre generalmente: solo JPEG, solo PNG, solo WebP, oppure JPEG/PNG + WebP (genera entrambi i formati).
4. Seleziona JPEG/PNG + WebP se vuoi la compatibilità con fallback, oppure solo WebP se sei certo che tutti i tuoi visitatori utilizzano browser moderni.
5. Imposta il cursore Qualità WebP. Un valore tra 80 e 85 offre un equilibrio eccellente tra dimensione del file e qualità visiva per la fotografia di prodotti.
6. Clicca Salva, poi clicca Rigenera miniature per creare le versioni WebP di tutte le immagini esistenti.

Il processo di rigenerazione può richiedere un tempo significativo per cataloghi di grandi dimensioni. Per un negozio con oltre 5.000 prodotti, aspettati che il processo duri da 30 minuti a diverse ore a seconda delle risorse del server. È fortemente raccomandato eseguire la rigenerazione durante le ore di minor traffico o tramite CLI per evitare problemi di timeout PHP.

Rigenerazione CLI per cataloghi di grandi dimensioni

Per i negozi con migliaia di prodotti, la rigenerazione basata sul browser probabilmente andrà in timeout. Usa invece l'approccio CLI:

php bin/console prestashop:image:regenerate --format=all

Questo comando viene eseguito senza i vincoli di timeout del web server. Puoi anche selezionare specifici tipi di immagine:

php bin/console prestashop:image:regenerate --type=products --format=all
php bin/console prestashop:image:regenerate --type=categories --format=all

Nelle versioni di PrestaShop 1.7 che non dispongono del comando console, puoi aumentare i limiti di timeout di PHP ed eseguire la rigenerazione tramite il pannello admin, oppure utilizzare uno script PHP personalizzato che chiama direttamente la classe ImageManager.

Configurazione del server: regole Apache .htaccess

Anche dopo aver abilitato la generazione WebP in PrestaShop, il tuo server deve essere configurato per servire il formato corretto. PrestaShop genera i file WebP insieme ai file JPEG/PNG originali, ma il server deve sapere quando servire quale formato.

Per i server Apache, aggiungi le seguenti regole al tuo file .htaccess nella directory root di PrestaShop o nella directory img/:

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Serve immagini WebP se il browser le supporta e il file esiste
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.+)\.(jpe?g|png)$
  RewriteCond %1.webp -f
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=REQUEST_image,L]
</IfModule>

# Imposta il tipo MIME corretto per WebP
<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>

# Header Vary per prevenire problemi di caching
<IfModule mod_headers.c>
  Header append Vary Accept env=REQUEST_image
</IfModule>

Queste regole funzionano come segue: quando un browser richiede un file JPEG o PNG, il server verifica se il browser invia un header Accept: image/webp. Se lo fa, e una versione .webp del file esiste su disco, il server serve trasparentemente il file WebP al suo posto. L'header Vary: Accept garantisce che i proxy di caching memorizzino versioni separate per i browser compatibili con WebP e quelli non compatibili.

Assicurati che mod_rewrite, mod_mime e mod_headers siano abilitati sulla tua installazione Apache. La maggior parte degli ambienti di hosting condiviso li ha abilitati per impostazione predefinita, ma puoi verificare con il tuo provider di hosting.

Configurazione Nginx

Per i negozi che funzionano su Nginx, la configurazione va nel blocco server o in un blocco location all'interno del file di configurazione del tuo sito:

map $http_accept $webp_suffix {
  default "";
  "~*image/webp" ".webp";
}

server {
  # ... configurazione esistente ...

  location ~* ^(/img/.+)\.(jpe?g|png)$ {
    set $img_path $1;
    add_header Vary Accept;
    try_files $img_path$webp_suffix $uri =404;
  }
}

La direttiva map a livello http verifica se il client invia un header Accept compatibile con WebP e imposta una variabile di conseguenza. Il blocco location utilizza poi try_files per tentare prima di servire la versione WebP, con fallback al formato originale se il file WebP non esiste.

Dopo aver modificato la configurazione Nginx, testa sempre prima di ricaricare:

nginx -t
nginx -s reload

Considerazioni sulla CDN

Se utilizzi una CDN come Cloudflare, KeyCDN o Bunny.net davanti al tuo negozio PrestaShop, la distribuzione WebP richiede attenzione aggiuntiva.

Cloudflare

Cloudflare offre la conversione WebP integrata attraverso la funzionalità Polish (disponibile nei piani Pro e superiori). Quando Polish è abilitato con la conversione WebP, Cloudflare converte automaticamente le immagini in WebP sull'edge—il che significa che non hai bisogno di generare file WebP sul tuo server. Tuttavia, fai attenzione a queste avvertenze:

• Polish funziona solo per le immagini servite attraverso il proxy di Cloudflare (nuvola arancione abilitata).
• Non converte immagini più grandi di 10 MB o immagini con determinati profili colore.
• La conversione iniziale aggiunge latenza alla prima richiesta; le richieste successive vengono servite dalla cache.
• Se generi WebP anche localmente, potresti finire per fare una doppia conversione, il che può degradare leggermente la qualità.

Se preferisci servire i tuoi file WebP attraverso Cloudflare, assicurati che l'header Vary: Accept sia gestito correttamente. Per impostazione predefinita, Cloudflare rimuove l'header Vary. Potresti dover creare una Cache Rule o utilizzare un Worker per garantire una corretta negoziazione dei contenuti.

Altre CDN

La maggior parte delle CDN moderne supporta la negoziazione dei contenuti basata sull'header Accept, ma devi abilitarla esplicitamente. Consulta la documentazione della tua CDN per "supporto header Vary" o "negoziazione dei contenuti". Alcune CDN richiedono di abilitare "Cache by Accept header" nelle regole di caching. Senza questo, la CDN potrebbe memorizzare in cache la prima versione che riceve (JPEG o WebP) e servirla a tutti i visitatori indipendentemente dal supporto del browser.

Impostazioni di qualità delle immagini

Scegliere la giusta impostazione di qualità WebP è fondamentale. Troppo alta, e perdi i vantaggi in termini di dimensione del file; troppo bassa, e le immagini dei prodotti appaiono sfocate o mostrano artefatti di compressione—un problema inaccettabile per l'e-commerce.

Ecco le impostazioni di qualità consigliate per tipo di immagine:

• Immagini prodotto (viste grandi/dettaglio): Qualità 82-88. Le foto dei prodotti devono apparire nitide, specialmente per articoli dove texture e dettaglio contano (moda, gioielleria, elettronica). A qualità 85, un'immagine prodotto tipica da 800x800 si comprime da ~120 KB (JPEG) a ~80 KB (WebP) senza alcuna perdita di qualità visibile.
• Banner di categoria e immagini hero: Qualità 78-82. Queste sono generalmente visualizzate a dimensioni maggiori ma con meno attenzione ai dettagli fini.
• Miniature e immagini di elenco: Qualità 75-80. A dimensioni di visualizzazione ridotte, una qualità inferiore è meno percepibile. Una miniatura a qualità 75 può essere il 50-60% più piccola del suo equivalente JPEG.
• Loghi e grafiche con bordi netti: Usa WebP lossless o mantieni il formato PNG. La compressione lossy crea artefatti visibili intorno al testo e alle grafiche con bordi netti.

PrestaShop applica un'unica impostazione di qualità globalmente. Se hai bisogno di livelli di qualità diversi per diversi tipi di immagine, dovresti modificare la classe ImageManager o utilizzare un modulo di terze parti che fornisce un controllo più granulare.

Strategie di fallback

Sebbene il supporto dei browser per WebP sia quasi universale nel 2026, implementare una strategia di fallback è ancora considerata una best practice, specialmente se il tuo negozio serve clienti che utilizzano dispositivi più vecchi o ambienti aziendali con restrizioni.

Negoziazione dei contenuti lato server

Le regole .htaccess e Nginx descritte sopra implementano la negoziazione dei contenuti lato server. Questo è l'approccio raccomandato perché è trasparente per il livello applicativo. Il browser richiede l'URL originale e il server decide quale formato consegnare in base all'header Accept. Non sono necessarie modifiche ai template o al codice front-end.

L'elemento HTML Picture

Un approccio alternativo utilizza l'elemento <picture> per lasciare che il browser scelga il formato migliore:

<picture>
  <source srcset="immagine.webp" type="image/webp">
  <img src="immagine.jpg" alt="Nome prodotto">
</picture>

Questo richiede la modifica dei template PrestaShop (Smarty o Twig a seconda della tua versione). Sebbene ti dia un controllo esplicito, è più invasivo e più difficile da mantenere attraverso gli aggiornamenti del tema. La negoziazione lato server è generalmente preferita per i deployment PrestaShop.

Fallback integrato di PrestaShop

Quando selezioni l'opzione "JPEG/PNG + WebP" nelle impostazioni immagine di PrestaShop, il sistema genera entrambi i formati. PrestaShop 8.x gestisce il fallback automaticamente nei suoi template core, verificando se il file WebP esiste prima di referenziarlo. Se usi un tema personalizzato, verifica che i template delle immagini prodotto del tema supportino questo approccio a doppio formato.

Insidie comuni e come risolverle

1. Immagini non funzionanti dopo l'abilitazione di WebP

Il problema più comune dopo l'abilitazione di WebP sono le immagini non funzionanti in tutto il negozio. Questo di solito accade perché:

• I file WebP non sono stati generati. Abilitare l'impostazione influisce solo sulle immagini caricate successivamente. Devi cliccare "Rigenera miniature" per creare le versioni WebP delle immagini esistenti. Per cataloghi di grandi dimensioni, usa il comando CLI.
• I permessi dei file sono errati. L'utente del web server (generalmente www-data) deve avere i permessi di scrittura sulla struttura della directory img/. Dopo la rigenerazione, verifica i permessi: find img/ -name "*.webp" -exec ls -la {} \;
• Le regole .htaccess sono in conflitto. L'.htaccess predefinito di PrestaShop contiene regole di rewrite che possono entrare in conflitto con le regole di rewrite WebP. Posiziona le regole WebP prima del blocco di rewrite predefinito di PrestaShop per assicurarti che vengano valutate per prime.

2. Estensioni GD o Imagick mancanti

La generazione WebP richiede che PHP abbia la libreria GD o l'estensione ImageMagick compilata con il supporto WebP. Per verificare:

php -r "echo gd_info()['WebP Support'] ? 'GD WebP OK' : 'GD WebP MANCANTE';"

Oppure per ImageMagick:

php -r "echo in_array('WEBP', Imagick::queryFormats()) ? 'Imagick WebP OK' : 'Imagick WebP MANCANTE';"

Se il supporto WebP è assente, devi ricompilare PHP con i flag appropriati o installare i pacchetti corretti. Su Debian/Ubuntu: apt-get install libwebp-dev seguito dalla ricompilazione dell'estensione GD, oppure installa una versione di PHP che include il supporto WebP (PHP 7.4+ lo include generalmente per impostazione predefinita).

Su hosting condiviso, se la tua build PHP non ha il supporto WebP, contatta il tuo provider di hosting. La maggior parte degli ambienti di hosting moderni include il supporto WebP nelle installazioni PHP 8.x.

3. Problemi di cache

I problemi legati alla cache sono tra le insidie WebP più frustranti:

• Cache del browser: Dopo l'abilitazione di WebP, i browser potrebbero continuare a mostrare le versioni JPEG/PNG memorizzate in cache. Consiglia agli utenti di fare un hard-refresh (Ctrl+Shift+R), ma questo si risolve da solo quando le immagini in cache scadono.
• Cache lato server: Se usi Varnish, Redis o qualsiasi full-page caching, la cache deve essere svuotata dopo l'abilitazione di WebP. Altrimenti, le pagine in cache faranno riferimento a vecchi URL di immagini o tipi MIME.
• Cache CDN: Svuota completamente la cache della tua CDN dopo l'abilitazione di WebP. Presta particolare attenzione alle chiavi di cache della CDN—se la CDN non varia il caching per header Accept, potrebbe servire WebP a browser che non lo supportano (o viceversa).
• OPcache: Se hai modificato file PHP come parte dell'abilitazione di WebP (ad esempio, override personalizzati di ImageManager), resetta OPcache per assicurarti che il nuovo codice abbia effetto.
• Cache Smarty di PrestaShop: Svuota la cache Smarty dal back office (Parametri Avanzati > Prestazioni) o elimina il contenuto della directory var/cache/.

4. Tipi MIME errati

Se il tuo server non riconosce l'estensione .webp, i browser non riusciranno a renderizzare le immagini anche se i file sono validi. Assicurati che la configurazione del tuo server includa la mappatura corretta del tipo MIME: image/webp per i file .webp. La direttiva AddType nella sezione Apache qui sopra gestisce questo aspetto.

5. Problemi di caricamento immagini nel back office

Il back office di PrestaShop valida i formati delle immagini caricate. In alcune versioni, caricare un'immagine WebP direttamente attraverso l'editor prodotto potrebbe fallire con un errore di validazione. Questo perché la whitelist del validatore di upload potrebbe non includere WebP. Controlla le estensioni consentite in Parametri Avanzati > Amministrazione o nella configurazione pertinente.

6. Incompatibilità con moduli di terze parti

Alcuni moduli di terze parti (specialmente slider, moduli galleria e moduli zoom immagini prodotto) hanno le estensioni dei file immagine hardcoded o non supportano WebP. Dopo l'abilitazione di WebP, testa tutti i moduli che visualizzano immagini. I sintomi comuni includono miniature mancanti nei moduli slider o funzionalità zoom non funzionante. Contatta lo sviluppatore del modulo per aggiornamenti, o assicurati che la negoziazione dei contenuti lato server gestisca correttamente il fallback.

Testare la distribuzione WebP

Dopo la configurazione, verifica che le immagini WebP vengano effettivamente servite. Ecco diversi metodi:

Strumenti per sviluppatori del browser

1. Apri il tuo negozio in Chrome o Firefox.
2. Apri i DevTools (F12) e vai alla scheda Network.
3. Filtra per tipo Img.
4. Ricarica la pagina.
5. Clicca su qualsiasi richiesta di immagine e controlla gli Header di risposta. Il Content-Type dovrebbe essere image/webp.
6. Controlla anche la colonna Type nell'elenco della rete—dovrebbe mostrare "webp" per le immagini convertite.

Test da linea di comando

Usa curl per verificare che la negoziazione dei contenuti funzioni correttamente:

# Richiesta con supporto WebP
curl -s -I -H "Accept: image/webp,image/*" https://tuonegozio.com/img/p/1/2/3/456-home_default.jpg | grep Content-Type
# Atteso: Content-Type: image/webp

# Richiesta senza supporto WebP
curl -s -I -H "Accept: image/jpeg" https://tuonegozio.com/img/p/1/2/3/456-home_default.jpg | grep Content-Type
# Atteso: Content-Type: image/jpeg

Strumenti online

Google PageSpeed Insights e Lighthouse segnalano entrambi le immagini che non vengono servite in formati di nuova generazione. Esegui un audit Lighthouse sulle tue pagine prodotto—se WebP è configurato correttamente, non dovresti vedere la raccomandazione "Servi immagini in formati di nuova generazione".

Impatto sulle prestazioni

L'impatto prestazionale reale di WebP su un negozio PrestaShop dipende dalla dimensione del catalogo e dalla composizione della pagina, ma i miglioramenti tipici includono:

• Riduzione del peso totale della pagina: 15-30% sulle pagine di elenco prodotti e 10-20% sulle pagine dettaglio prodotto, dove le immagini costituiscono la maggior parte dei byte scaricati.
• Largest Contentful Paint (LCP): Miglioramento medio di 200-600ms, poiché l'immagine prodotto principale si carica più velocemente. Questa è una delle tre metriche Core Web Vitals e influenza direttamente il posizionamento nei motori di ricerca.
• Time to Interactive (TTI): Miglioramento marginale, poiché il caricamento delle immagini compete con l'esecuzione del JavaScript per la larghezza di banda ma non per la CPU.
• Risparmio di larghezza di banda del server: Per un negozio che serve 100.000 visualizzazioni di pagina al mese, WebP può ridurre l'utilizzo mensile della larghezza di banda di 20-50 GB, potenzialmente abbassando i costi di hosting.
• Prestazioni mobile: I guadagni più significativi sono sulle connessioni mobile, dove le dimensioni ridotte delle immagini si traducono direttamente in tempi di caricamento più rapidi su reti 4G/5G. L'indicizzazione mobile-first di Google rende questo aspetto particolarmente importante.

Tieni presente che la generazione WebP aggiunge carico CPU durante l'elaborazione delle immagini (upload e rigenerazione). Su hosting condiviso con risorse limitate, la rigenerazione delle miniature per un catalogo di grandi dimensioni può temporaneamente rallentare il server. Pianifica la rigenerazione durante i periodi di basso traffico.

Checklist riepilogativa

Per distribuire con successo WebP sul tuo negozio PrestaShop, segui questa checklist:

1. Verifica che PHP abbia GD o ImageMagick con supporto WebP.
2. Abilita la generazione WebP nelle impostazioni immagine di PrestaShop (usa JPEG/PNG + WebP per sicurezza).
3. Imposta la qualità a 82-85 per un equilibrio ottimale.
4. Rigenera tutte le miniature (usa CLI per cataloghi di grandi dimensioni).
5. Aggiungi regole di negoziazione dei contenuti lato server (.htaccess o configurazione Nginx).
6. Configura la tua CDN per variare la cache per header Accept.
7. Svuota tutte le cache (browser, server, CDN, Smarty, OPcache).
8. Testa la distribuzione utilizzando i DevTools del browser e curl.
9. Verifica che i moduli di terze parti visualizzino le immagini correttamente.
10. Esegui un audit Lighthouse per confermare che non rimangano avvisi "formati di nuova generazione".

WebP non è più opzionale per l'e-commerce competitivo. Con il supporto integrato di PrestaShop e una configurazione del server semplice, non c'è motivo di continuare a servire file JPEG e PNG sovradimensionati. La configurazione richiede meno di un'ora e i benefici in termini di prestazioni sono immediati e misurabili.