Usabilità delle immagini online: tutto quello che devi sapere

Oggi quando si parla di ottimizzazione di un sito web non si può prescindere dall’usabilità delle immagini. Ovvero dalle regole che rendono un progetto semplice da usare, immediato, intuitivo. Usabile, ecco. Non c’è parola migliore per descriverlo.

Le persone non devono pensare, questo suggerisce Steve Krug. Don’t make me think, non farmi riflettere su quello che sto facendo, ma lavora in modo da rendere tutto semplice. Una riflessione, questa, che riguarda ogni aspetto del sito web. Anche le immagini.

Usabilità delle immagini online

Sai bene quanto siano importanti le foto, in particolar modo su un blog che pubblica con costanza articoli e contenuti. Ogni post una foto, questa è la regola base. Ma poi? Basta aggiungere il visual su WordPress con la classica operazione di upload per avere la situazione sotto controllo? No,devi curare l’usabilità delle immagini.

Questo è un passaggio decisivo per accogliere i lettori nel miglior modo possibile. E ti assicuro che i benefici saranno evidenti per l’ottimizzazione SEO della pagina web: oggi non si ragiona per compartimenti stagni, tutto è collegato. Allora, quali sono i passaggi fondamentali per ottenere buoni risultati? Ecco la mia lista personale.

Da leggere: come migliorare le immagini del blog

Carica solo quello che serve

Preambolo indispensabile: vero, il visual è utile per contestualizzare e dare il benvenuto al lettore. Ed è giusto dare parte del successo alla scelta dell’immagine. Però non devi esagerare, non devi spezzare la lettura con riquadri messi solo per soddisfare il tuo desiderio di arricchire il post. Perché le fotografie possono diventare un ostacolo alla fruizione della pagina.

Inserisci il testo alternative

Primo punto da rispettare per migliorare l’usabilità delle immagini: devi inserire il tag alt, il testo alternative che viene utilizzato per descrivere il contenuto che hai caricato. In realtà è nato per aiutare il browser degli ipovedenti a commentare la foto nella pagina. Poi Google ha utilizzato questa soluzione per dare un senso alle immagini, quindi è diventato parte dell’ottimizzazione SEO di una pagina.

In ogni caso questo elemento deve essere presente, e deve descrivere il visual con un testo chiaro e naturale. All’interno ci possono essere le keyword più importanti ma l’idea base è sempre questa: usare il tag alternative per dare una definizione di ciò che stai caricando. E se hai più foto usa un testo alternative sempre diverso e descrittivo del singolo scatto.

Non è facile individuare tutti i testi alternative mancanti in un sito, vero? Nessun problema: puoi usare Screaming Frog per individuare tutti gli alt mancanti. Oppure puoi usare Wave per analizzare pagina per pagina, un processo più lento ma che ti consente di individuare altri problemi di accessibilità. Inoltre suggerisce eventuali inserimenti senza significato o poco attinenti.

Crea il giusto contrasto

Se decidi di inserire del testo nelle immagini – con Canva o Picmonkey è molto semplice – devi fare in modo che ci sia uno sfondo omogeneo per ospitare il copy. Altrimenti rischi di pubblicare un messaggio impossibile da leggere. Se la foto che hai scelto non presenta queste caratteristiche devi lavorare con la grafica: aggiungi una forma con il programma di fotoritocco, sfuma e inserisci il testo. In questo modo si intravede lo sfondo ma hai la base per aggiungere il testo.

Informa con title e didascalia

Anche questi testi possono fare la differenza per la SEO delle immagini, però tutto nasce da un principio sacrosanto: devi puntare verso la chiarezza e devi aiutare le persone a capire esattamente cosa si trova nella pagina web. Non tutte le foto sono chiare al primo sguardo, magari devono essere contestualizzate. Ecco perché esistono title e didascalia.

Il title è quel testo che appare nel momento in cui passi il cursore del mouse sull’area in questione. La didascalia, invece, si trova sotto all’immagine stessa. Ed è la massima espressione degli strumenti utili per migliorare la presentazione del contenuto. Puoi dare dei riferimenti sull’autore della foto? Vuoi indicare la firma di un quadro? La didascalia è perfetta per fare tutto questo.

Attenzione ai link immagine

Spesso nelle impostazioni di default di WordPress viene indicata la possibilità di inserire un link all’immagine ingrandita. Una soluzione buona per dare un dettaglio al lettore che vuole ispezionare la foto con maggior attenzione. In realtà non sempre questa soluzione è l’ideale: non è sempre intuitivo il percorso che ti permette di tornare indietro e rischi di perdere qualche utente.

Il consiglio usa un plugin come Photo Gallery per creare delle preview dell’immagine con un riquadro definito e un comando per chiudere l’ingrandimento ben evidente. In questo modo eviti che la chiusura della foto corrisponda con l’abbandono della sessione sul blog.

Carica la giusta dimensione

Se il layout del blog è di 630 pixel l’immagine sarà tale. Non più piccola per evitare fastidiosi rientri di spazio bianco, non più grande per scongiurare fastidiosi ridimensionamenti in HTML. Fastidiosi per chi? Per il caricamento della pagina, il browser rallenta l’upload quando deve adattare una foto di 1000 pixel in uno spazio di 300. Carica quello che serve, nella misura giusta.

Ricorda inoltre che la qualità del visual si lega alla tua capacità di comprimere le immagini senza perdere nitidezza e contorni. Tutto molto semplice: una volta raggiunte le dimensioni utili passa la foto su compressor.io: questa utility riduce il peso senza intaccarne la qualità. Un passaggio che però dipende dal tipo di file: se stai lavorando su una foto conviene usare il JPG, mentre per lavori con pochi colori (tipo grafiche) è meglio usare il PNG.

Quindi tutte le foto devono essere piccole e di qualità minima? No, non ho detto questo. Soprattutto per chi lavora con le immagini, tipo un fotografo o un grafico, le regole diventano flessibili in vista di un obiettivo superiore. In ogni caso puoi usare lo Speed Test di Google o Gmetrix per avere sempre la situazione sotto controllo.

Da leggere: le migliori applicazioni come Canva per immagini

Usabilità delle immagini: la tua opinione

Questi sono i passaggi essenziali per migliorare l’usabilità delle immagini, per pubblicare dei contenuti capaci di fare la differenza e di farsi notare dal pubblico. Ma anche di lavorare in sinergia con l’esperto SEO che ottimizza pagine web con l’obiettivo di ottenere migliori risultati. Tu vuoi aggiungere qualcosa a questa lista? Credi che ci siano altri dettagli necessari per ottimizzare le immagini? Lascia la tua opinione nei commenti.


Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *