Come alleggerire le foto di un sito o un blog

· ·

In sintesi
  • Oltre la metà del peso di un sito medio sono immagini: ottimizzarle è il primo intervento per la velocità.
  • Con Comprimi Immagini prepari ogni foto in pochi secondi: WebP, lato massimo 1600-1920 px, qualità 75%.
  • La regola d'oro: carica la misura giusta, non una foto enorme ridotta «dal sito». Il browser scarica il file intero comunque.

Hai mai sentito dire che il tuo sito «è lento»? Nove volte su dieci, la causa sono le immagini. Non il codice, non il server: le foto. Un sito medio carica 1-4 MB di immagini, spesso per foto che ne bastavano 200 KB. La buona notizia: ottimizzare le immagini è l'intervento più semplice e con il risultato più immediato su tutta la pagina. Ecco il metodo.

Il principio che cambia tutto

C'è una cosa che sorprende molti: ridimensionare l'immagine con il codice non riduce il peso. Se carichi una foto da 4000 px e nel sito la mostri a 800 px, il browser scarica comunque i 4000 px interi (4-6 MB) e poi li «ristringe». Il visitatore scarica il file grande per vederlo piccolo.

Quindi la regola numero uno è: il file che carichi deve avere le dimensioni che usa il sito. Le misure tipiche:

  • Foto a tutta larghezza (hero): 1600-1920 px di larghezza.
  • Immagini dentro il testo: 800-1200 px.
  • Miniature e card: 400-600 px.
  • Icone e loghi: SVG (che scala senza peso) o PNG piccoli.

Il flusso di ottimizzazione

  1. Apri Comprimi Immagini.
  2. Carica le foto del sito (anche a gruppi).
  3. Imposta il lato massimo: 1920 per le foto principali, 1200 per quelle nel testo, 600 per le miniature.
  4. Scegli il formato WebP: pesa il 25-35% in meno del JPG a parità di qualità.
  5. Qualità 75%: il punto in cui l'occhio non distingue più e il peso è già crollato.
  6. Scarica e carica sul sito.

Una foto di 4 MB diventa 150-250 KB. Dieci foto da 4 MB (40 MB) diventano 2 MB: la pagina passa da «lenta» a «istantanea».

Il nome dei file e l'SEO

Il peso non è l'unica parte: il nome del file conta per la ricerca e per l'accessibilità.

  • Nomi descrittivi: `torta-al-limone-ricetta.webp` invece di `IMG_4821.webp`. Il nome aiuta i motori e chi naviga con lo screen reader.
  • Testo alternativo (alt): la descrizione va nel sito (nel codice), non nel nome del file. È obbligatorio per legge sull'accessibilità e utile per l'indicizzazione.
  • Formato giusto per il giusto uso: foto → WebP (o JPG), screenshot e testi → PNG, icone e loghi → SVG.

Il controllo finale: strumenti di verifica

Dopo l'ottimizzazione, verifica sul campo:

  • PageSpeed Insights di Google: analizza la pagina e ti dice esattamente quanto pesano le immagini e cosa resta da sistemare. Puntare a «Buono» nelle prestazioni è un obiettivo realistico con le immagini ottimizzate.
  • Peso della pagina: sotto 1,5-2 MB totali per una pagina media è un buon traguardo; sotto 1 MB, eccellente.
  • Prova su un telefono con connessione reale: il 70% del tuo pubblico arriva da lì. Se «vola» in 4G, hai fatto il lavoro giusto.
Attenzione

Non ottimizzare per la stampa: se le foto del sito ti servono anche per stampe o per la grafica, conserva gli originali in una cartella a parte e ottimizza solo le copie web. Così hai il piede in due scarpe: sito leggero e file di qualità per ogni futuro uso. Se sono tante, un archivio ZIP con Comprimi in ZIP le tiene in ordine.

Domande frequenti

Tutti i browser leggono il WebP?

Sì, dai browser del 2020 in poi (Chrome, Edge, Firefox, Safari incluso). Solo browser molto vecchi non lo leggono: per prudenza si può convertire in JPG, ma per un sito moderno il WebP è una scelta senza pensieri.

Quanto incide davvero il peso delle immagini sulla velocità?

Moltissimo: su un sito tipico, le immagini sono il 50-70% del peso totale. Riducendole del 90% (cosa che succede quasi sempre) la pagina passa da 5 secondi a 1-2 secondi su una connessione mobile media. È l'intervento con il miglior rapporto sforzo/risultato di tutto il web.

Devo ricomprimere anche le foto di sfondo?

Sì, e con più attenzione: gli sfondi a tutta pagina sono i più pesanti. Ottimizzali aggressivamente (qualità 65-70%) e, quando possibile, scegli sfondi a tinta unita o sfumature leggerissime. La sfumatura leggera con un piccolo SVG costa meno di 5 KB contro i 500 KB della foto di sfondo.

Commenti