Ottimizzare le immagini: SEO, UX e non solo

Giulio_M

Il web è pieno di immagini, anche in ambito SEO e User Experience queste diventano fondamentali. Gli aspetti principali sono:

titolo: giusto per capire, se cerchi "Xiaomi Mi 10 Lite" e la tua immagine si chiama immagine1.jpg oppure xiaomi-mi-10-lite.jpg, è ben evidente che le probabilità di posizionamento (e corrispondenza nelle ricerche degli utenti) siano diverse
alt-text: descrizione dell'immagine, che non dovrebbe essere un copia-incolla del titolo, ma ha una funzione di descrizione (senza esagerare, comunque precisa e dettagliata)
peso dell'immagine: a parte il compromesso dimensione/qualità, è possibile ottimizzare le immagini, online esistono molti strumenti gratuiti che vediamo

Quindi, i primi due punti sono importanti prevalentemente per la SEO, posizionamento nei motori di ricerca; il punto che riguarda il peso dell'immagine è invece FONDAMENTALE anche lato User Experience: in genere, il peso maggiore nel caricamento di una pagina web è data dalla presenza delle immagini; molti siti web non ottimizzano le immagini (se ne fregano, "non lo sapevano", ecc).
Prima di caricare su una pagina web un'immagine che pesa oltre 300 kb, è opportuno pensarci. Quando l'immagine pesa 2 MB, evidentemente non abbiamo ben compreso il concetto di ottimizzazione delle immagini per il web (salvo es. che la pagina sia un archivio di immagini HD da scaricare come wallpaper, caso specifico, stiamo parlando invece di tutte le classiche immagini in una generica pagina web). Una pagina lenta a caricare, ottiene bassi punteggi di qualità (Esperienza Utente, principalmente il parametro LCP dei Core Web Vitals) da parte di Google e da parte degli utenti, aumenta la frequenza di rimbalzo (quanti se ne vanno prima del caricamento... Gli utenti hanno sempre meno pazienza, 3 secondi per caricare una pagina è visto come un valore critico).

Come ottimizzare la dimensione di un'immagine? Esistono diversi servizi online, gratuiti, ad esempio:

imagecompressor (probabilmente il migliore, puoi scegliere il livello di compressione)
tinypng, tinyjpg (tinypng e tinyjpg in realtà sono uguali, lo stesso servizio)
smallseotools/image-compressor

Come e quanto va ottimizzata un'immagine? La risposta è DIPENDE. Ovvero: il consiglio generale è partire da un'ottimizzazione media e valutare il miglior compromesso peso/qualità, a seconda dello scopo che deve avere quella precisa immagine. Semplicemente l'output è visivo, se per le dimensioni fisiche (altezza, larghezza) che l'immagine avrà nella pagina web, si può ridurre ancora la dimensione guadagnandoci in leggerezza, conviene farlo; se invece sgrana visibilmente senza fornire altri vantaggi di leggerezza, ci si ferma prima. Quindi, a seconda della situazione specifica, una valutazione visiva è la cosa migliore da fare.

Altro suggerimento: il formato! In genere, in genere, un'immagine in formato .jpg occupa meno rispetto ad una .png (lasciamo perdere poi formati come .bmp, non compresso, che nel web di oggi quasi non si trova nemmeno ed è meglio che sia così). Il consiglio, anche prima, dell'ottimizzazione (imagecompressor, tinypng, ecc) è quello di convertire l'immagine jpg in png o viceversa, se la qualità e la tonalità dei colori non viene rovinata, guardare quale versione occupa meno: dopodiché, procedere all'ottimizzazione (es. servizi online linkati prima) dell'immagine più leggera.

Conclusioni: oltre ai tag HTML title e alt-text dell'immagine, di semplice implementazione, è fondamentale ricordarsi dell'ottimizzazione del peso dell'immagine stessa. I dati parlano chiaro, gran parte della dimensione pagina e tempo di caricamento è spesso data dalle immagini e un peso eccessivo, velocità troppo lenta, viene penalizzata sia da Google sia dagli utenti che si collegano. Spero che sia chiara l'importanza della cosa.

Vladimir

Giulio_M Tutto completamente chiaro, adesso ! 👌

Giulio_M

WebP: lo standard di oggi e del futuro!

WebP è il nuovo standard delle immagini web, sviluppato da Google nel 2010. È una scelta sempre più interessante, dato che prende i benefici di JPG e PNG (un algoritmo più sofisticato, maggiore efficienza, che consente quindi di ottenere stessa qualità con peso dell'immagine inferiore). Quindi sempre parlando del campo raster (SVG, grafica vettoriale sono un mondo a parte), WebP sta diventando lo standard più diffuso e dovremmo cominciare ad usarlo, questo salvo alcune eccezioni, casi d'uso specifici (ad esempio stampa oppure file che devono essere rieditati spesso, che quindi potrebbero avere problemi con lossy).

L'unico limite passato era la non completa compatibilità del nuovo formato WebP. Oggi però ha già raggiunto un livello di compatibilità quasi universale quindi vale la pena usare questo formato, nel mondo del web è sempre più importante (peso inferiore a parità di qualità, significa migliore tempo di caricamento, beneficio in ottica SEO, esperienza utente ovviamente, riduzione nel consumo di risorse).

JPG vs PNG vs WebP: alcuni esempi applicativi

galleria fotografica: scelta tradizionale JPG (qualità 80-90%), la scelta moderna WebP lossy (scegliamo il livello di compressione, es. 80-90%) a parità di qualità con il file JPG, ha un peso nettamente inferiore
logo del sito: tralasciando il caso di grafica vettoriale, restando sempre in ambito raster, la scelta tradizionale era PNG lossless (senza perdita di qualità); la scelta moderna WebP lossless è identico al file precedente ma con un peso inferiore (scegliamo anche con o senza trasparenza a seconda del caso)
screenshot classico (misto testo + immagine): la scelta originale PNG ha buona qualità ma file pesante; la conversione JPG genera una pessima qualità es. vicino alle lettere di testo; la scelta moderna WebP (lossless se vogliamo preservare esattamente la qualità originale) ottiene lo stesso risultato visivo di PNG ma con peso inferiore

Compressione WebP online

Analogamente ai tradizionali JPG, PNG, anche WebP consente compressione (appunto, lossless vs lossy); a seconda della nostra esigenza, scegliamo eventualmente il livello di compressione (compromesso peso/qualità, quindi il peso minimo per un determinato livello di qualità visiva dell'immagine che vogliamo raggiungere). È interessante il servizio online gratuito 11zon, che consente di scegliere il livello di compressione del file WebP 1-100 (nota: 100 è la compressione massima e non la qualità massima, io me ne sono accorto a posteriori 😅) oppure anche, funzionalità molto interessante, specificare la taglia (voglio che la dimensione finale sia 80KB, 100KB, ecc). Questo tool consente di comprimere anche altri formati immagine, analogamente a quelli già descritti (optimizilla - imagecompressor, tinypng/tinyjpg, ecc, Giulio_M).

Bonus: la gestione della compatibilità

Premesso che ormai WebP ha già raggiunto quasi una compatibilità universale (il buon vecchio Internet Explorer non lo supportava ma ormai lo storico browser è già stato ufficialmente dismesso da anni), se vogliamo maggiore sicurezza, robustezza del nostro codice, possiamo ricorrere all'elemento HTML picture (approfondimento correlato: SEO semantica). In questo modo il browser carica il primo elemento che supporta. Il codice ha questo template:

<picture>
  <!-- Il browser prova prima con WebP. Se lo supporta, lo usa e basta. -->
  <source srcset="mia-foto.webp" type="image/webp">
  
  <!-- Se non supporta WebP, passa alla prossima opzione: JPG (il fallback universale per le foto). -->
  <source srcset="mia-foto.jpg" type="image/jpeg">
  
  <!-- Se non supportasse neanche JPG (improbabile), userebbe questo tag. È il fallback definitivo. -->
  <img src="mia-foto.jpg" alt="Descrizione della mia foto">
</picture>

Questa soluzione offre la massima sicurezza nella scelta di WebP. Il browser prova a caricare l'immagine WebP, se non fosse compatibile passa subito a JPG (o PNG, a seconda del caso), se ci fossero ancora problemi (più che l'incompatibilità con JPG, pressoché impossibile, pensiamo piuttosto ad un down o disservizio del server su cui sono hostate le immagini, che potrebbe essere differente dal server che carica il codice HTML, ad esempio sito vetrina con altro dominio, altro hosting), la terza e ultima opzione è mostrare l'Alt Text, descrizione testuale dell'immagine dato che l'immagine non viene renderizzata (il testo alternativo è comunque utile aggiungerlo in ogni caso, lato SEO e accessibilità per utenti non vedenti).

Nota: esiste anche il formato AVIF (AV1 Image Format), con ottimizzazioni ancora più estreme (soprattutto nel caso si voglia ottenere massime performance con qualità fotografica/HDR), oggi però nel complesso il formato WebP per il web è una scelta preferibile, con maggiore supporto.

Vediamo infine la tabella di compatibilità di WebP, tratta da caniuse.com, aggiornata a fine dicembre 2025. Come si può vedere, l'attuale compatibilità raggiunta è ottima con tutti i principali browser. L'immagine che segue è stata salvata in formato PNG (sto scherzando 😂).
webp-compatibilità-browser-dicembre-2025

Fondatori