- Patryk Marek
- News
- 0 piace
- 74 visualizzazioni
- 0 Commenti
La conversione WebP attivata non determina quale immagine viene scaricata dal browser. Verifica la richiesta reale nella scheda Network: URL selezionato, intestazione Content-Type, dimensioni e dimensione della risposta. Solo allora stabilirai se il problema è l’assenza della variante corretta, una regola del server, la cache o un’immagine troppo grande.

Questa guida è destinata ai proprietari di negozi PrestaShop che hanno già WebP, ma continuano a vedere immagini pesanti o un punteggio di prestazioni scarso. Contiene un test reale e controllato su tre illustrazioni e un metodo per separare la conversione del file dalla sua consegna al cliente.
1. Inizia dalla foto visibile in una pagina specifica
Scegli un’immagine nella scheda prodotto oppure nell’elenco prodotti. Non iniziare da un file casuale nella directory del server: il tema può usare una miniatura diversa, una variante per schermi con maggiore densità di pixel o un URL da CDN. Il WebP dell’originale non sostituisce automaticamente tutte le dimensioni necessarie.
Apri gli strumenti per sviluppatori, vai su Network, disattiva la cache durante il test e ricarica la pagina. Seleziona il filtro immagini. Per le foto caricate in lazy loading, scorri fino al punto da analizzare. Annota URL, tipo di risposta, dimensione e informazione se i dati sono stati effettivamente scaricati dalla rete. Queste opzioni sono descritte nella documentazione Network di Chrome DevTools.
Non confrontare il download completo di un JPEG con una riga WebP contrassegnata come memory cache. Un risultato del genere descrive condizioni diverse. Allo stesso modo, un trasferimento ridotto con risposta 304 non significa che il file grafico stesso abbia improvvisamente pochi byte.
2. Un indirizzo .jpg può restituire WebP
Nel codice sorgente di WebP Pro 2.1.3 la consegna dell’immagine può funzionare tramite regole Apache: una richiesta JPG o PNG viene riscritta verso una variante WebP esistente, se il browser dichiara di supportarla. L’indirizzo visibile nell’HTML può quindi continuare a terminare con .jpg, mentre la risposta può avere tipo image/webp.
Per questo la sola visualizzazione del codice della pagina non basta per concludere “WebP non funziona”. Verifica il formato della risposta ricevuta. D’altra parte, la dicitura .webp nelle impostazioni o l’esistenza del file sul disco non dimostrano che la regola corretta venga eseguita sul server che gestisce il negozio.
| Osservazione | Possibile conclusione | Passo successivo |
|---|---|---|
| URL .jpg, Content-Type image/webp | Il server ha fornito WebP mantenendo l’indirizzo sorgente. | Verifica dimensioni e byte di questa variante. |
| URL .jpg, Content-Type image/jpeg | In questo test è stato fornito JPEG. | Verifica la presenza della variante WebP esatta, le regole del server e la cache. |
| WebP esiste, ma riguarda una dimensione diversa | La conversione non corrisponde al file selezionato dal tema. | Completa il tipo di miniatura necessario o l’ambito corretto della coda. |
| L’immagine proviene da CDN | La risposta non viene fornita direttamente dalla regola del server principale del negozio. | Verifica formato, chiave cache e aggiornamento lato CDN. |
| WebP ha una risoluzione elevata | Il formato può essere corretto, ma l’immagine selezionata è ancora troppo grande. | Confronta le dimensioni naturali con la dimensione di visualizzazione. |
3. Verifica srcset, picture e la variante selezionata
Con le immagini responsive il browser sceglie la risorsa tenendo conto delle condizioni della pagina e del dispositivo. Verifica l’elemento img, eventuali srcset e sizes, e nel caso di picture anche gli elementi source. La proprietà currentSrc aiuta a indicare l’indirizzo effettivamente selezionato, invece di basarsi sulla prima voce nel codice.
L’elemento picture consente di fornire sorgenti alternative, ad esempio in base al formato o a una condizione media; le regole di selezione sono presentate nella documentazione dell’elemento picture. Non tutti i temi utilizzano questo meccanismo e non tutti i negozi hanno bisogno di modificare l’HTML, se la negoziazione del formato lato server funziona correttamente.
Ripeti il test per il telefono. Una foto larga 2000 px usata in una piccola miniatura resta un carico inutile, anche dopo la conversione. La scelta della dimensione e la scelta del formato sono due impostazioni separate.
4. Misurazione propria: tre illustrazioni JPEG e WebP
Per il test controllato abbiamo usato tre illustrazioni blog esistenti nella dimensione di 700 × 400 px. Ogni JPEG è stato convertito tramite PHP 8.1.34 e GD 2.3.3 in WebP con parametro qualità 80. Non abbiamo modificato né le dimensioni né l’inquadratura. Chromium ha scaricato sei file da un server HTTP locale con cache disattivata e senza CDN.
La fonte delle miniature era una copia locale di PrestaShop 8.2.8 con Warehouse 4.7.2. La misurazione stessa è stata eseguita su una pagina comparativa separata, quindi non misura il tempo di apertura della scheda prodotto né l’effetto dell’implementazione del modulo. Indichiamo i byte del contenuto delle risposte ricevute, senza intestazioni di trasporto. Tutte e sei le richieste si sono concluse con HTTP 200 e con il tipo immagine corretto.
| Illustrazione, 700 × 400 px | JPEG, image/jpeg | WebP, image/webp | File da confrontare |
|---|---|---|---|
| Reso parziale | 64 824 B | 35 040 B | JPEG / WebP |
| Merchant Center | 61 499 B | 29 286 B | JPEG / WebP |
| Checkout | 60 485 B | 30 742 B | JPEG / WebP |
| Totale | 186 808 B | 95 068 B | Differenza: 91 740 B in questo test. |
Il risultato mostra le dimensioni di file concreti. Non dimostra che ogni WebP sarà più piccolo dello stesso valore né che entrambe le codifiche abbiano una qualità visiva identica. I parametri di qualità dei diversi formati non sono una scala comune. Osserva le immagini nella dimensione reale d’uso, prestando attenzione a scritte, texture fini e bordi netti.
5. Verifica la coda e solo dopo ripeti la conversione
In WebP Pro 2.1.3 il salvataggio o il ridimensionamento dell’immagine può aggiungere un’attività alla coda. La variante pronta viene creata dopo la sua esecuzione. Durante la diagnosi verifica se è stato selezionato l’ambito corretto, se l’attività è stata elaborata e se non si è conclusa con un errore. Il semplice salvataggio della pianificazione non avvia automaticamente l’attività di sistema CRON.
Anche la modifica della qualità non deve necessariamente cambiare subito i file esistenti. Nel codice esaminato un WebP già presente può essere saltato al di fuori della modalità di sovrascrittura. Se modifichi consapevolmente la qualità, pianifica la rigenerazione dell’ambito necessario e poi verifica il risultato. Non avviare una rigenerazione completa dell’intero negozio per ogni piccola discrepanza.
Se hai bisogno di istruzioni sul processo stesso di creazione delle miniature, leggi la guida sulla generazione e rigenerazione delle immagini. Qui il punto di arrivo è l’immagine ricevuta dal cliente.
6. Verifica separatamente cache, CDN e LCP
Nella negoziazione del formato è importante che il livello intermedio distingua le varianti di risposta. Le regole di WebP Pro prevedono Vary: Accept quando è disponibile il modulo intestazioni di Apache. Questo però non significa una configurazione automatica di qualsiasi CDN o Nginx. Verifica la risposta reale dal punto da cui il browser la scarica.
Dopo aver modificato l’immagine, aggiorna la cache corretta e ripeti lo stesso identico test. Annota il dispositivo selezionato, lo stato della cache, l’URL e le dimensioni. Senza questi dati, il confronto “prima e dopo” mescola facilmente immagini diverse o condizioni diverse.
Un file più piccolo può ridurre il tempo di download, ma LCP comprende anche altre fasi, tra cui l’attesa del server, la scoperta della risorsa e la sua visualizzazione. La guida di Google sull’ottimizzazione di LCP mostra perché la sola compressione non risolve ogni ritardo. Non promettere un punteggio PageSpeed 100 basandoti solo sul formato.
Passo successivo: se manca la generazione o la consegna delle varianti corrette, verifica WebP Pro per PrestaShop. Se le immagini sono corrette ma la pagina è ancora lenta, prepara i risultati di Network e richiedi una diagnosi delle prestazioni del negozio.
Verificato il 13.09.2026. Meccanismi del modulo: codice WebP Pro 2.1.3. Misurazione delle illustrazioni: test HTTP controllato separato; non è una misurazione della velocità del negozio in produzione.
Commenti (0)