Come ottimizzare le immagini per il web

Ottimizzare le immagini per il web è estremamente importante. Una bella immagine, ben ottimizzata e compressa, rende il tuo sito piacevole per gli utenti e veloce agli occhi di Google.

In questa guida cercherò di darti alcuni semplici consigli su come ottimizzare le immagini, sia che tu abbia un classico sito statico di poche pagine, un ecommerce o un blog WordPress.

Usa le immagini in ogni contenuto testuale

Un’immagine vale più di mille parole, recita un noto proverbio. In effetti basta una sola immagine per aiutarti a comprendere e ricordare meglio un concetto complesso, o per riassumere una idea o un pensiero: pensa solo al successo di certe infografiche.

E poi, ammettiamolo: chi riuscirebbe, sul web, a leggere un lungo articolo in stile “muro di testo” senza all’interno qualche immagine? Pertanto il mio consiglio è quello di inserire almeno una immagine in ogni tuo articolo o post. E se il pezzo è molto lungo, valuta di inserirne più di una.

ATTENZIONE: nei limiti del possibile evita di utilizzare immagini stock già usate ovunque sul web, in quanto pare che Google non gradisca molto questa pratica.

Immagini gratis, dove trovarle e scaricarle

Una buona soluzione può essere quella di usare sul tuo sito/blog foto e immagini create con la tua fotocamera (al giorno d’oggi è sufficiente uno smartphone) e poi sistemate con un programma di fotoritocco.

Se però non ha tempo/modo di crearle, ci sono vari siti dove puoi scaricare gratuitamente foto, illustrazioni e grafiche vettoriali; uno di questi è Pixabay.

Se poi vuoi elaborare/ritoccare le immagini scaricate con un programma totalmente gratuito, puoi utilizzare GIMP (disponibile per Windows, Mac e Linux), mentre se non vuoi installare nulla sul tuo PC ma vuoi manipolare le immagini tramite browser puoi provare l’ottimo Canva.

Dagli un nome SEO friendly

Tipicamente le immagini (o le fotografie fatte con lo smartphone) hanno di default dei nomi assurdi, fatte da una combinazione senza senso di lettere e numeri (tipo DSC1234.jpg).

Ti consiglio di modificare quel nome con qualcosa di più intuitivo per un motore di ricerca, ovvero una descrizione concisa del contenuto dell’immagine con dentro le parole chiave più rilevanti (tipo parola-chiave-descrittiva.jpg).

Inserisci l’attributo ALT (ed eventualmente il TITLE)

All’interno del tag IMG SRC, l’attributo ALT fornisce un testo alternativo all’immagine quando questa, per qualsiasi motivo, non può essere visualizzata: può essere utile per chi (ad esempio) utilizza browser testuali.

Pertanto è bene utilizzare sempre questo attributo, e personalmente mi sento di consigliare di aggiungere anche il TITLE, soprattutto se pensiamo che l’utente possa posizionare il puntatore del mouse sull’immagine: infatti, nella maggior parte dei browser, se il puntatore del mouse si posa su una immagine con l’attributo TITLE correttamente impostato viene mostrato in sovraimpressione un tooltip, ovvero una finestrella tipo fumetto che mostra il contenuto testuale inserito all’interno del TITLE.

Su questo blog utilizzo l’attributo TITLE sugli annunci pubblicitari per mostrare, oltre ad una descrizione di cosa troverà l’utente quando cliccherà sul banner, anche una piccola call to action. 😉

Usa le didascalie

Secondo Kissmetrics, le didascalie poste sotto le immagini vengono lette in media il 300% in più rispetto al contenuto principale della pagina (secondo Poynter Research solo del 16% in più, ma è comunque una percentuale interessante).

In pratica, la didascalia colpisce l’occhio dell’utente almeno tanto quanto un H2: cerca pertanto di utilizzarle sotto tutte le immagini che inserisci nei tuoi articoli, anche per dare ai motori di ricerca altre informazioni utili oltre al tag ALT e al TITLE.

Comprimi le immagini

Un tipico errore commesso dai webmaster alle prime armi è quello di utilizzare sui loro siti immagini dal peso enorme, che causano rallentamenti importanti nello scaricamento delle pagine del sito web.

Per fortuna esistono tantissimi strumenti gratuiti per comprimere in pochissimi secondi ogni tipo di immagine, mantenedone praticamente inalterata la qualità: personalmente utilizzo i siti compressjpeg.com (per comprimere le immagini in formato JPG) e compresspng.com (per comprimere le immagini in formato PNG).

Per WordPress esistono invece dei plugin che effettuano la compressione in automatico: i più noti sono WP Smush e EWWW Image Optimizer, anche se io preferisco comprimere le immagini prima di caricarle via FTP.

Usa immagini responsive

Il traffico via mobile ha ormai superato da tempo quello via desktop, ed è quindi praticamente obbligatorio avere uno sito responsive.

Ciò significa che anche le immagini presenti nel tuo sito web devono adattarsi in modo dinamico alla larghezza del dispositivo nel quale sono visualizzate: ovviamente WordPress ha un sacco di temi e plugin che automatizzano la procedura, ma se avessi un sito sviluppato con altre tecnologie puoi fare affidamento a quest’ottima guida (che spiega in dettaglio l’utilizzo dell’attributo srcset).

Inserisci le immagini in una sitemap

Se vuoi aumentare le probabilità che le immagini del tuo sito web vengano restituite nei risultati della ricerca di Google Immagini, puoi seguire le indicazioni di questa guida di Google.

Conclusioni

Un sapiente uso delle immagini migliora la leggibilità della pagina, l’esperienza utente e, di conseguenza, le conversioni: non è quindi un tema che può interessare solo i webmaster o i grafici, anche noi SEO dobbiamo tenerne conto! 🙂