Ottimizzazione immagini: WebP/AVIF, lazy loading, dimensioni corrette

Il tuo portfolio è pronto ed è il momento di metterlo online. Lo carichi su un server, apri il sito dal cellulare e… ci mette 8 secondi a caricare. Perché?

Perché hai caricato le foto dei tuoi progetti e la tua foto profilo in formato .jpg a 4000x3000 pixel pesanti 5 Megabyte ciascuna. Le immagini enormi sono una delle cause principali dei siti lenti, e la lentezza fa abbandonare la pagina a molti utenti.

1. Scegli il formato moderno (WebP / AVIF)

PNG e JPEG restano utili in alcuni casi, ma per molte fotografie e anteprime di progetto conviene valutare formati più moderni:

• WebP: offre buona compressione mantenendo una qualità visiva adeguata ed è supportato dai browser moderni.
• AVIF: può comprimere ancora meglio, ma va verificato rispetto al supporto dei browser che vuoi coprire.

La regola pratica: prima di caricare una foto sul tuo sito, ridimensionala e salvala in un formato moderno come WebP o AVIF. Se ti serve compatibilità con browser molto vecchi, usa l’elemento <picture> o mantieni un fallback.

2. Ridimensiona prima di caricare

Se la foto profilo sul tuo sito è larga 300px (grazie a CSS width: 300px;), perché stai caricando un file largo 4000px? Il browser sarà costretto a scaricare 4000 pixel di dati, per poi ridimensionarli a schermo. È uno spreco evitabile.

La regola: usa Photoshop, Anteprima su macOS o uno strumento online per ridimensionare fisicamente l’immagine a 600x600px (il doppio di 300px per supportare display ad alta densità) prima di convertirla in WebP.

3. Lazy loading: loading="lazy"

Abbiamo inserito 6 card di “Progetti” nel nostro portfolio. Le ultime tre sono in basso, e l’utente deve scorrere la pagina per vederle. Di default, il browser inizia a scaricare tutte e 6 le immagini nel momento in cui si apre il sito.

Non ha senso scaricare subito immagini che l’utente potrebbe non vedere. Possiamo chiedere al browser di caricarle solo quando stanno per avvicinarsi alla viewport.

Si fa aggiungendo un singolo attributo HTML:

<!-- Immagine ottimizzata -->
<img 
  src="progetto1.webp" 
  alt="Dashboard del Progetto 1" 
  loading="lazy" 
  width="600" 
  height="400"
>

(Nota: Abbiamo anche aggiunto esplicitamente width e height reali in HTML. Questo serve al browser per sapere quanto spazio “riservare” per l’immagine prima ancora di scaricarla, evitando che il testo del sito salti su e giù all’improvviso, un problema grave noto come Cumulative Layout Shift o CLS).

Applica queste tre regole e il tuo sito sarà molto più leggero, soprattutto su connessioni mobili lente.