Come ottimizzare le immagini
per il web e la SEO

Il formato che scegli ha il maggiore impatto sulla dimensione del file e sulla qualita. I formati moderni producono file notevolmente piu piccoli alla stessa qualita visiva rispetto agli standard precedenti. Ecco cosa usare e quando.

L'approccio ideale e servire formati multipli usando l'elemento HTML <picture>. Offri AVIF per primo, WebP come riserva e JPEG come ultima opzione. Il browser scegliera automaticamente il miglior formato supportato.

La compressione riduce la dimensione del file rimuovendo dati che l'occhio umano non riesce facilmente a percepire. La chiave e trovare il punto ideale dove la dimensione del file si riduce significativamente ma la qualita resta visivamente identica all'originale.

Esistono due tipi di compressione. La compressione lossy (JPEG, WebP, AVIF) rimuove permanentemente i dati per ottenere file piu piccoli - e quella che vuoi per le fotografie sul web. La compressione lossless (PNG, WebP lossless) preserva ogni pixel ma ottiene riduzioni minori - migliore per grafica e screenshot.

Strumenti come Squoosh, ImageOptim o Sharp (Node.js) ti permettono di visualizzare la differenza di qualita prima di procedere. Confronta sempre la versione compressa con l'originale a dimensione piena prima di pubblicarla.

Il testo alternativo (l'attributo alt nei tag <img>) ha due scopi: descrive l'immagine per gli screen reader e gli utenti ipovedenti, e dice ai motori di ricerca cosa contiene l'immagine. Google usa il testo alternativo come segnale primario per il posizionamento nella ricerca per immagini.

Un buon testo alternativo e descrittivo, conciso e include naturalmente parole chiave pertinenti senza forzature. Invece di "foto.jpg" o "immagine1", scrivi qualcosa come "golden retriever che corre tra le foglie autunnali in un parco". Descrivi cosa c'e nell'immagine, non cosa e (evita di iniziare con "immagine di" o "foto di").

Per le immagini decorative che non aggiungono valore informativo (bordi, spaziatori, pattern di sfondo), usa un attributo alt vuoto (alt="") cosi gli screen reader le saltano completamente.

Il lazy loading ritarda il caricamento delle immagini fino a quando stanno per entrare nel viewport. Questo significa che una pagina con 50 immagini non scarica tutte e 50 al caricamento iniziale - solo quelle visibili sullo schermo. Le altre si caricano man mano che l'utente scorre. Questo riduce drasticamente il tempo di caricamento iniziale della pagina e l'uso di banda.

Nell'HTML moderno, il lazy loading e semplice come aggiungere loading="lazy" ai tuoi tag <img>. Non applicare il lazy loading alle immagini visibili above the fold (la prima schermata) - queste devono caricarsi immediatamente per evitare spostamenti del layout e punteggi LCP (Largest Contentful Paint) scarsi.

Le immagini responsive si adattano alle diverse dimensioni dello schermo cosi gli utenti mobili non scaricano un'immagine larga 4000px quando il loro schermo ne misura solo 400. Usa gli attributi srcset e sizes per fornire risoluzioni multiple. Il browser sceglie la versione piu piccola che si adatta allo schermo dell'utente, risparmiando banda e migliorando il tempo di caricamento.

Specifica sempre gli attributi width e height su ogni immagine per prevenire il Cumulative Layout Shift (CLS) - una metrica Core Web Vitals che penalizza le pagine dove il contenuto salta durante il caricamento.

I nomi dei file immagine sono un altro segnale SEO che molte persone trascurano. I motori di ricerca leggono i nomi dei file per comprendere il contenuto dell'immagine. Un file chiamato tramonto-sul-lago-di-garda.webp dice a Google molto di piu di IMG_4829.webp.

Per una SEO avanzata, aggiungi dati strutturati (schema.org ImageObject) alle tue pagine. Questo markup dice ai motori di ricerca la didascalia dell'immagine, il creatore, la licenza e l'URL del contenuto. Le pagine con dati strutturati hanno piu probabilita di apparire nei risultati di ricerca per immagini di Google con rich snippet.

Se filigrani le tue immagini prima di pubblicarle, la filigrana stessa diventa parte del file. Per indicazioni sulla filigranatura senza compromettere la qualita dell'immagine, consulta la nostra guida alle best practice per le filigrane.

I fotografi e i creatori affrontano una sfida unica: vogliono immagini che siano splendide sul web, si carichino velocemente per la SEO e restino protette dal furto. Questi obiettivi possono sembrare contraddittori, ma non lo sono - hai solo bisogno di un flusso di lavoro chiaro.

Conserva i tuoi file originali ad alta risoluzione al sicuro offline - questi sono i tuoi master e la tua prova di paternita. Per il web, esporta versioni ridimensionate (tipicamente 1200-2000px sul lato piu lungo) in formato WebP a qualita 80. Questo ti da un'eccellente qualita visiva a una frazione della dimensione originale del file.

Prima di caricare, aggiungi una filigrana alle tue versioni web. Una filigrana semi-trasparente al 30-40% di opacita non influira significativamente sulla dimensione del file o sulla velocita di caricamento, ma fornisce una protezione visiva che scoraggia il furto occasionale. Dopo la filigranatura, passa l'immagine attraverso uno strumento di compressione per una riduzione finale della dimensione.

Per la guida completa sulla protezione delle tue immagini oltre l'ottimizzazione, consulta il nostro articolo sulla protezione delle foto dal furto online e il nostro tutorial sulle filigrane.