Immagini prodotto pesanti in PrestaShop: dimensioni, miniature e caricamento differito

Apri dal cellulare una categoria con quaranta prodotti e la pagina tarda a comparire. Nella maggior parte dei negozi il colpevole non è il server né il PHP: sono le immagini. Foto caricate alla risoluzione della fotocamera, miniature generate con una dimensione che il tema non usa più, formati pesanti e tutte le immagini scaricate insieme anche se il cliente vede solo le prime quattro.

Questo articolo spiega come PrestaShop gestisce le immagini dei prodotti e cosa puoi regolare.

Come PrestaShop genera le immagini

Quando carichi una foto su un prodotto, PrestaShop salva l'originale e, a partire da essa, genera una copia per ogni dimensione immagine definita per i prodotti: la miniatura dell'elenco, quella del carrello, quella grande della scheda, quella della galleria, ecc. Il tema richiede in ogni punto la dimensione che gli spetta.

Le dimensioni si configurano nel back office, nelle impostazioni delle immagini (nel menu Design nelle versioni recenti). Ognuna ha nome, larghezza, altezza e i tipi di contenuto a cui si applica: prodotti, categorie, marche, fornitori o negozi.

Questo ha due conseguenze:

• Il peso che riceve il cliente dipende dalla dimensione generata, non dalla foto originale. Una foto enorme non pesa nell'elenco se la miniatura è piccola.
• Se una dimensione non corrisponde allo spazio che il tema le assegna sullo schermo, il browser scarica un'immagine più grande del necessario e la riduce, oppure una più piccola e la ingrandisce (e appare sfocata).

Dimensioni superflue e dimensioni mancanti

Con gli anni, un negozio accumula dimensioni immagine di temi precedenti, di moduli che non ci sono più o di prove. Ogni dimensione in più significa:

• Un file in più per ogni foto di prodotto, che occupa disco e backup.
• Più tempo per caricare un'immagine e per rigenerare.

Controlla quali dimensioni usa davvero il tuo tema (i suoi template e il suo file di configurazione le nominano) e quali usano i tuoi moduli. Quelle che non usa nessuno si possono eliminare, ma verificalo prima su una copia: un modulo che richiede una dimensione che non esiste più mostra immagini rotte.

E viceversa: se il tema mostra le miniature dell'elenco a una dimensione maggiore di quella generata, per esempio dopo un restyling, le foto appaiono sfocate. Adatta la dimensione allo spazio reale, tenendo conto degli schermi ad alta densità.

Quando vanno rigenerate le miniature

Le miniature esistenti non cambiano da sole quando modifichi una dimensione. Bisogna rigenerarle, dalla stessa schermata delle impostazioni delle immagini. Serve quando:

• Cambi le misure di una dimensione.
• Aggiungi una nuova dimensione (per esempio, quando cambi tema).
• Cambi il formato di uscita o la qualità di compressione.
• Ripristini immagini da un backup e mancano miniature.

Anche la foto originale conta

Anche se il cliente non scarica l'originale, essa incide:

• Sul disco e sui backup. Foto di diversi mega moltiplicate per migliaia di prodotti sono giga che si copiano ogni notte.
• Sul tempo di generazione. Ridimensionare un'immagine enorme consuma memoria e CPU; con foto molto grandi, il processo può fallire per mancanza di memoria.
• Sullo zoom di alcune schede, che servono davvero l'immagine grande.

Una buona pratica è caricare le foto già ridotte a una dimensione ragionevole per l'uso più grande previsto dal negozio (lo zoom della scheda), invece che direttamente dalla fotocamera.

Formati

• JPEG per le fotografie. Con una qualità ben scelta, il risparmio rispetto alla qualità massima è grande e la differenza si nota appena.
• PNG solo se ti serve la trasparenza o se è una grafica a colori piatti. Per le foto dei prodotti pesa molto più di un JPEG.
• WebP e altri formati moderni offrono meno peso a parità di qualità, e le versioni recenti di PrestaShop possono generarli. Verifica che il tuo tema e i tuoi moduli li supportino prima di attivarli.

Cambiare formato è un altro motivo per rigenerare, con le stesse precauzioni di prima.

Caricamento differito

In una categoria lunga, il cliente all'inizio vede poche immagini. Le altre sono più in basso e forse non le vedrà mai. Il caricamento differito (lazy loading) fa sì che il browser scarichi le immagini solo quando si avvicinano allo schermo.

• I browser moderni lo fanno da soli con l'attributo loading="lazy" nel tag dell'immagine. Molti temi lo includono già negli elenchi.
• Non applicare il caricamento differito alla prima immagine visibile: la foto principale della scheda o le prime miniature della categoria. Ritardarle peggiora il tempo in cui viene disegnata la parte più importante della pagina.
• Indica nelle immagini larghezza e altezza (o riserva lo spazio con il CSS), così la pagina non salta quando finiscono di caricarsi.

Una verifica rapida

1. Apri una categoria e una scheda con gli strumenti del browser e guarda quanto pesano le immagini rispetto al resto della pagina.
2. Confronta le dimensioni in pixel delle miniature scaricate con quelle che occupano sullo schermo.
3. Controlla l'elenco delle dimensioni immagine e togli quelle che nessuno usa (prima su una copia).
4. Verifica che le immagini fuori schermo abbiano il caricamento differito e che quella principale no.
5. Se cambi qualcosa, rigenera fuori orario e controlla che non restino immagini rotte.

Come risolverlo in PrestaShop

Le immagini sono una parte; il resto del peso della pagina di solito sta nel CSS e nel JavaScript. RKR OptiMatters fa un inventario dei CSS e JS caricati da ogni tipo di pagina, con il loro peso e il modulo da cui provengono, e ti permette di togliere quelli superflui, applicare defer o async, ritardare gli script di terze parti fino alla prima interazione e servire i Google Fonts dal tuo server; ha una modalità di prova per confrontare la pagina con e senza ottimizzazione. All In One Cache include, all'interno della sua cache di pagina, un alleggerimento opzionale con minificazione di HTML, JS e CSS inline e caricamento differito delle immagini, oltre alla cache di pagina completa, a quella delle query in Redis e alla gestione di OPcache.