Ottimizzare le immagini del sito: dimensioni, formato, caricamento

Un’azienda vinicola nel Mendrisiotto ha un nuovo sito web. In alto, una grande immagine dei vigneti nella luce d’autunno; sotto, i vini, ognuno con la foto della bottiglia, e una galleria della festa in cantina. Sul computer dell’ufficio tutto è bello. Sul telefono, in treno, la pagina si costruisce pezzo per pezzo, e il testo salta verso il basso non appena un’immagine ha finito di caricarsi.

Entrambe le cose dipendono dalle immagini. Ed entrambe si possono migliorare nettamente con pochi passi, senza che le immagini appaiano peggiori.

Perché le immagini incidono sui tempi di caricamento

Un indicatore diffuso del tempo di caricamento percepito di una pagina è il Largest Contentful Paint (LCP). web.dev, un sito informativo di Google dedicato allo sviluppo web, lo descrive così: misura quando l’immagine più grande, il blocco di testo più grande o il video più grande nell’area visibile è visualizzato, a partire dall’apertura della pagina. Un valore di 2,5 secondi o meno è considerato buono.

In una pagina come quella dell’azienda vinicola, l’elemento più grande è un’immagine — quella dei vigneti. La rapidità con cui si carica questa sola immagine determina quindi la prima impressione.

La dimensione giusta

La leva più importante è la dimensione. Una foto scattata con una fotocamera attuale è larga diverse migliaia di pixel; su un telefono appare forse larga 400 punti. MDN osserva che non c’è motivo di incorporare immagini così grandi per uno schermo piccolo: si spreca larghezza di banda, e chi naviga in mobilità non vuole scaricare una grande immagine pensata per il computer quando ne basta una piccola.

Il calcolo è quadratico. web.dev fa notare che uno schermo con densità di pixel doppia ha bisogno di quattro volte più pixel. Al contrario, un’immagine larga la metà ha solo un quarto dei pixel.

Più versioni con srcset e sizes

Poiché telefoni, tablet e computer hanno bisogno di dimensioni diverse, un sito web può offrire la stessa immagine in più versioni. MDN descrive a questo scopo gli attributi srcset e sizes:

• srcset elenca le versioni disponibili con la loro larghezza in pixel, per esempio una larga 480 e una larga 800 pixel.
• sizes indica al browser con quale larghezza l’immagine viene mostrata a seconda della dimensione dello schermo.

Il browser sceglie poi da sé la versione adatta. Per gli schermi ad alta densità di pixel si possono indicare anche versioni a risoluzione doppia. Alcuni strumenti per creare siti e programmi per siti web generano queste versioni automaticamente — vale la pena verificare se lo fanno.

Il formato

Per le immagini raster sul web, MDN raccomanda in primo luogo WebP o AVIF, con un ripiego in JPEG o PNG per i browser che non conoscono questi formati. Come riferimento, MDN indica che le immagini WebP con perdita sono in media dal 25 al 35 per cento più leggere delle immagini JPEG di qualità simile. Quale formato si addice a quale immagine è descritto nell’articolo Quale formato immagine per che cosa.

Indicare larghezza e altezza

Il testo che salta ha una causa propria: finché un’immagine non è caricata, il browser non sa quanto spazio le serve. Quando arriva, spinge il resto della pagina verso il basso.

MDN descrive la soluzione: se nell’HTML sono indicate la larghezza e l’altezza dell’immagine, il browser può calcolare le proporzioni prima che l’immagine sia caricata e riservare lo spazio necessario. Questo riduce o impedisce lo spostamento — secondo MDN, una parte importante di una buona esperienza d’uso.

Caricamento differito

La galleria della festa in cantina si trova molto in basso nella pagina. Chi vuole solo guardare i vini non ha bisogno di queste immagini. Con l’attributo loading="lazy" il browser rimanda il caricamento di un’immagine finché questa non si avvicina all’area visibile. MDN spiega che così rete e memoria non vengono impegnate per immagini prima che sia ragionevolmente certo che serviranno.

Per la grande immagine in cima, invece, rimandare serve a poco: è comunque visibile all’apertura e deve apparire il più in fretta possibile. MDN sottolinea inoltre che larghezza e altezza sono importanti proprio per le immagini caricate in differita.

Testi alternativi

Ottimizzare significa anche rendere le immagini accessibili a tutti. Secondo MDN, l’attributo alt contiene un testo che può sostituire l’immagine — i lettori di schermo lo leggono ad alta voce, e appare quando un’immagine non può essere caricata. Un testo alternativo vuoto contrassegna un’immagine puramente decorativa. Per le foto delle bottiglie dell’azienda vinicola basta una breve frase come «Bottiglia di Merlot 2025 del Mendrisiotto».

Contano anche le immagini di sfondo

Non tutte le immagini compaiono come img nell’HTML. Alcuni siti inseriscono grandi immagini come sfondo tramite CSS, per esempio dietro un titolo. web.dev elenca anche queste immagini di sfondo tra gli elementi che contano per il Largest Contentful Paint. Per loro valgono le stesse regole: dimensione giusta, formato giusto. Solo larghezza e altezza non si possono indicare tramite attributi — lo spazio è definito dall’impaginazione.

Misurare invece di tirare a indovinare

Se le modifiche funzionano lo mostra una misurazione. web.dev raccomanda di osservare il Largest Contentful Paint al 75° percentile delle visite, separatamente per dispositivi mobili e computer — in modo, cioè, che tre visite su quattro raggiungano il valore. Gli strumenti per sviluppatori dei browser mostrano inoltre, per ogni pagina, quali immagini vengono caricate, quanto sono grandi e quanto tempo ci vuole. Uno sguardo prima e dopo l’ottimizzazione rende visibile l’effetto.

Metadati e luogo dello scatto

Le foto di fotocamere e telefoni contengono spesso metadati, talvolta anche il luogo esatto dello scatto. Su un sito web sono superflui e rendono il file più grande. Per le foto scattate nella propria abitazione, rivelano inoltre l’indirizzo. Si possono rimuovere nello stesso momento in cui si rimpiccioliscono le immagini.

Per l’azienda vinicola nel Mendrisiotto

L’azienda vinicola passa in rassegna le sue immagini una volta: l’immagine dei vigneti viene generata in tre larghezze e offerta tramite srcset, in WebP con ripiego JPEG. Tutte le immagini ricevono larghezza, altezza e un testo alternativo, la galleria viene caricata in differita e i metadati vengono rimossi. Sul telefono, in treno, il testo ora resta fermo mentre le immagini si caricano.

Gli strumenti immagini che stiamo sviluppando rimpiccioliranno e comprimeranno le immagini, le convertiranno tra JPG, PNG, WebP e HEIC e ne rimuoveranno i metadati — elaborate in Svizzera, in memoria, senza che alcuna immagine resti salvata, e in modalità riservata interamente sul Suo dispositivo.