“IMG_2938.jpg”. Se il nome ti suona familiare, potresti avere un problema: caricare le immagini così come vengono, senza un criterio ben preciso, è un errore comune (ma anche facile da risolvere!), che rischia di rendere il tuo sito web lento e invisibile sui motori di ricerca.
Formato, risoluzione, livello di compressione, nomenclatura e attributi ALT non sono tecnicismi per smanettoni: incidono direttamente sul Largest Contentful Paint (LCP), una delle metriche Core Web Vitals usate da Google per il ranking. L’ottimizzazione delle immagini per il web, dunque, è indispensabile per mantenere elevate le performance SEO.
Scopriamo insieme le best practice da implementare per trasformare i contenuti visivi in alleati e ottenere una piattaforma veloce e visibile in SERP.
Perché ottimizzare le immagini è importante per la SEO
Le immagini rendono un sito web accattivante, ma spesso ne rappresentano la componente più pesante. Quando non vengono gestite e compresse correttamente, rallentano i tempi di caricamento penalizzando sia l’esperienza utente (bastano pochi secondi di attesa perché un visitatore abbandoni la pagina) sia il posizionamento.
Ottimizzare le immagini per il web significa invertire questa rotta. Nello specifico, è un passaggio fondamentale per tre motivi.
- Migliora i Core Web Vitals, metriche fondamentali per il ranking di Google: il tempo di caricamento dell’immagine principale di una pagina (hero image) definisce gran parte del tuo LCP, e un LCP rapido è un segnale di qualità che l’algoritmo premia con un ranking migliore.
- Abbassa il tasso di abbandono (bounce rate): un sito rapido trattiene e invita gli utenti a navigare più a lungo, e le sessioni prolungate vengono interpretate da Google come un segnale di User Experience positiva.
- Attira traffico da Google Immagini: la SEO non è fatta di soli testi. Contenuti visivi ben nominati e con testo alternativo curato possono posizionarsi su Google Immagini, generando una fetta di traffico organico aggiuntiva.
I migliori formati immagine per il web
Cos’è il formato di un’immagine? In parole semplici, è il modo in cui l’immagine viene salvata all’interno del file. Si riconosce dall’estensione visibile dopo il punto nel nome del file: .jpg, .png, .webp, .svg e così via.
Ciascun formato sfrutta una tecnica diversa per registrare i colori e i dettagli, e tale tecnica determina due cose fondamentali: quanto sarà pesante il file e quanta qualità visiva verrà mantenuta.
Non esiste un formato migliore in assoluto: la scelta dipende dal tipo di immagine e dall’uso che se ne deve fare. Ecco perché, prima ancora di pensare alla compressione o alla nomenclatura, il primo passo dell’ottimizzazione immagini per web è scegliere il formato più adatto a ogni singolo contenuto visivo.
JPEG
Il JPEG (estensione .jpg o .jpeg) è probabilmente il formato immagine più diffuso al mondo: è quello che esce di default dalla fotocamera del tuo smartphone. Funziona con un sistema di compressione lossy, cioè con perdita: per rendere il file più leggero, elimina alcuni dettagli dell’immagine che l’occhio umano fatica a percepire.
È il formato giusto quando hai a che fare con fotografie: foto prodotto, immagini di persone, paesaggi, scatti editoriali. Non è invece adatto a loghi o immagini con testo, perché la compressione tende a sporcare i contorni netti creando un effetto sfocato o a blocchi.
PNG
Il PNG (estensione .png) funziona in modo opposto al JPEG: la sua compressione è lossless, cioè senza perdita. Questo significa che il file, per quanto compresso, mantiene esattamente tutti i dettagli e i colori dell’immagine originale. Il prezzo da pagare è un peso maggiore rispetto al JPEG.
Il vero punto di forza del PNG è la capacità di gestire uno sfondo trasparente, che lo rende la scelta naturale per loghi, icone, screenshot e grafiche con testo, dove ogni lettera deve rimanere nitida.
WebP
Il WebP (estensione .webp) è un formato sviluppato da Google pensato specificamente per il web moderno. Puoi immaginarlo come un erede evoluto sia del JPEG sia del PNG: riesce a comprimere le immagini fino al 30% in meno rispetto a questi, mantenendo una qualità visiva praticamente identica, e supporta anche la trasparenza.
Oggi è possibile convertire quasi tutte le immagini di un sito web in WebP e ottenere pagine più leggere e veloci senza che l’utente noti alcuna differenza qualitativa. Il supporto da parte dei browser (Chrome, Firefox, Safari, Edge) è ormai completo, motivo per cui l’estensione è diventata lo standard consigliato per la maggior parte dei siti.
AVIF
L’AVIF (estensione .avif) è un formato di ultima generazione, ancora più efficiente del WebP: a parità di qualità visiva, il file può essere ancora più leggero. È quindi la scelta ideale se l’obiettivo principale è ottenere performance massime.
Ha, però, due limiti: alcuni browser o dispositivi meno recenti potrebbero non supportarlo (per questo andrebbe sempre previsto un formato di riserva per chi non riesce a visualizzarlo), e il processo di conversione richiede più tempo rispetto agli altri.
SVG
L’SVG (estensione .svg) è un formato diverso: l’immagine è composta, invece che da pixel, da istruzioni matematiche che descrivono forme, linee e colori (perciò si dice vettoriale). La conseguenza pratica è che il contenuto può essere ingrandito a piacimento senza mai perdere di nitidezza – perché, appunto, non è fatto di punti fissi ma viene ridisegnato ogni volta.
È perfetto per loghi, icone e illustrazioni semplici, ed è anche estremamente leggero in termini di peso.
Dimensioni e risoluzione per immagini ottimizzate
Prima di parlare di regole pratiche, è bene chiarire due concetti che vengono spesso confusi.
La risoluzione è il numero di pixel che compongono un’immagine, espresso come larghezza per altezza (es. 1750 x 980 pixel). Più pixel ci sono, più l’immagine è dettagliata – ma anche più pesante in termini di byte. Una foto scattata con lo smartphone, ad esempio, ha in genere una risoluzione altissima (4000 × 3000 pixel o più), pensata per essere stampata o ingrandita: è molto superiore a quella richiesta da qualsiasi pagina web.
La dimensione di visualizzazione è invece lo spazio che l’immagine occupa realmente nella pagina, misurato in pixel a schermo. È proprio qui che può sorgere un problema: se carichi un’immagine con risoluzione di 4000 pixel di larghezza per mostrarla in uno spazio che sullo schermo ne occupa solo 800, il browser scarica comunque l’intero file pesante per poi rimpicciolirlo visivamente: un enorme spreco di banda e di tempo di caricamento.
Come scegliere la risoluzione giusta
La regola di base è semplice: la risoluzione deve essere il più vicina possibile allo spazio in cui l’immagine verrà effettivamente mostrata, con un piccolo margine per gli schermi ad alta densità di pixel (come i display Retina), che richiedono circa 1,5-2 volte i pixel rispetto a uno schermo standard per apparire nitidi.
Alcuni riferimenti pratici per un sito web tipico:
- immagini hero a piena larghezza (banner in testa alla pagina): 1600-1920 pixel di larghezza;
- immagini all’interno di un articolo di blog: 800-1200 pixel di larghezza;
- immagini per box o card: 400-600 pixel di larghezza;
- thumbnail e anteprime: 150-300 pixel di larghezza;
- icone: solitamente sotto i 100 pixel, o meglio ancora in formato SVG.
Per la corretta ottimizzazione di un’immagine per il web, puoi controllare quanto spazio occupa nel sito direttamente nel CMS/tema che usi (spesso la larghezza del contenuto è indicata nelle impostazioni del layout), oppure ispezionare la pagina con gli strumenti sviluppatore del browser.
Come ridurre la risoluzione prima di caricare l’immagine
Individuata la dimensione esatta, può essere necessario ridimensionare il file con un editor di immagini o un plugin che lo fa in automatico al momento dell’upload. L’obiettivo è caricare un file che abbia la risoluzione realmente necessaria, né di più né di meno.
Immagini responsive: una risoluzione diversa per ogni dispositivo
Bisogna considerare una complicazione: la stessa immagine può essere mostrata in dimensioni diverse a seconda del dispositivo, poiché uno smartphone ha uno schermo molto più stretto di un monitor desktop. Caricare una singola versione pensata per il desktop significa costringere gli utenti mobile a scaricare un file inutilmente pesante.
La soluzione al problema sono le immagini responsive: tramite l’attributo srcset o il tag <picture> si forniscono al browser più versioni della stessa immagine, a risoluzioni diverse, lasciando che sia il browser stesso a scegliere e scaricare quella più adatta allo schermo dell’utente in quel momento.
Compressione: l’ultimo passaggio
Un file della risoluzione corretta può essere ulteriormente alleggerito con la compressione, un algoritmo che riduce il peso del file.
- La compressione lossy (con perdita) elimina alcuni dettagli non percepibili all’occhio umano, riducendo sensibilmente il peso: è quella usata da JPEG e WebP ed è ideale per le fotografie.
- La compressione lossless (senza perdita) riduce il peso senza eliminare alcun dettaglio, mantenendo la qualità originale identica: è quella tipica dei PNG, preferibile per grafiche, loghi e testo.
Solitamente, la combinazione vincente è: risoluzione adeguata allo spazio di visualizzazione + formato WebP + compressione lossy moderata.
Nomenclatura SEO-friendly delle immagini per web
Prima di analizzare l’attributo ALT, Google usa il nome del file per capire qual è il contenuto di un’immagine. Curare la nomenclatura è quindi parte integrante del processo di ottimizzazione immagini per web.
Usa parole chiave descrittive separate da trattini (non underscore): scarpe-running-uomo.jpg è preferibile a scarpe_running_uomo.jpg. Evita nomi generici lasciati di default dalla fotocamera o dallo smartphone, come IMG_2938.jpg o foto-1.png. Assicurati inoltre di non usare spazi o caratteri speciali (accenti, simboli, maiuscole), poiché possono generare problemi di codifica negli URL. Infine, mantieni coerenza tra il nome del file e il contenuto reale della pagina in cui l’immagine è inserita.
Attributo ALT: come scriverlo in ottica SEO
Il testo alternativo, o alt text, descrive il contenuto dell’immagine sia per i motori di ricerca sia per gli utenti che utilizzano screen reader. Scriverlo bene, dunque, serve tanto alla SEO quanto all’accessibilità del sito.
L’accortezza da tenere a mente è descrivere in modo naturale ciò che l’immagine rappresenta davvero, senza forzature – come se dovessi spiegarla a qualcuno che non può vederla. È poi bene evitare il keyword stuffing, poiché ripetere la stessa parola chiave in ogni attributo ALT della pagina è una pratica controproducente che Google riconosce e penalizza: la parola chiave va inserita solo quando è realmente pertinente al contenuto specifico di quella immagine.
Altri elementi tecnici da non trascurare per immagini ottimizzate
Oltre a formato, dimensioni e nomenclatura, alcuni altri accorgimenti tecnici completano una strategia efficace di ottimizzazione immagini per web.
Il lazy loading, ad esempio, consiste nel caricare le immagini solo nel momento in cui l’utente scorre fino a raggiungerle, invece che tutte insieme all’apertura della pagina: così, i tempi di attesa iniziali si riducono sensibilmente, soprattutto nelle pagine lunghe e ricche di contenuti visivi – ma va evitato, in genere, per l’immagine LCP o per le immagini immediatamente visibili al caricamento della pagina.
Ulteriore leva utile è la CDN, una Content Delivery Network che distribuisce le immagini tramite server sparsi geograficamente così da consegnarle all’utente dal server più vicino a lui e velocizzare il caricamento dei contenuti. Anche la presenza di una sitemap immagini dedicata è importante: aiuta Google a scoprire e indicizzare correttamente tutti i contenuti visivi del sito, incluse le immagini che, altrimenti, potrebbero passare inosservate.
Infine, il title attribute, un attributo secondario rispetto all’alt, può essere utile in alcuni contesti – anche se pesa molto meno degli altri elementi ai fini SEO.
Checklist finale per l’ottimizzazione immagini per web
- Scegliere il formato più adatto al tipo di immagine (JPEG, PNG, WebP, AVIF, SVG)
- Ridimensionare l’immagine in base al contesto di utilizzo reale
- Comprimere il file mantenendo un buon equilibrio qualità/peso
- Assegnare un nome file descrittivo, in minuscolo e con trattini
- Scrivere un alt text naturale e pertinente
- Attivare il lazy loading sulle immagini non above-the-fold
- Verificare la presenza di una sitemap immagini
Groweb: professionisti nell’ottimizzazione immagini per web (e non solo!)
Ottimizzare le immagini per il web può sembrare un’attività minuziosa e noiosa, ma è uno degli interventi a più alto rendimento che puoi fare per la tua strategia SEO.
Pensi che le immagini rallentino il tuo sito? Con un audit prestazionale puoi individuare subito dove stai perdendo traffico e clienti. Il team di Groweb è a disposizione per analizzare la tua piattaforma, eliminare i colli di bottiglia e velocizzare il caricamento delle pagine. Contattaci ora!
