Best practices sull’ottimizzazione delle immagini per le pagine web del tuo sito
Se scrivi per il web avrai senz’altro affrontato l’argomento Immagini: anche le immagini entrano nell’indice dei motori di ricerca (es. Google, uno a caso) ed è quindi bene ottimizzarle, vale a dire renderle “trovabili” nelle ricerche web per l’argomento a cui sono abbinate, e renderle il più leggere possibile per non rallentarne il caricamento e quindi appesantire le pagine del tuo sito.
Ci sono 4 punti chiave che secondo me (e secondo un numero imprecisato di altri autori web) devono essere presi in considerazione:
Leggerezza
Le immagini devono pesare il meno possibile per non rallentare il caricamento della pagina web di riferimento.
Per un’immagine di testata non andare oltre i 100 Kb; bellissimo sarebbe entro i 30-40 Kb; fantastico sotto i 30 Kb.
Decidi preventivamente le dimensioni (altezza e larghezza) delle tue immagini, e carica sul tuo sito le immagini già ridimensionate.
Risorse gratuite
Se non disponi di un software di fotoritocco, come Photoshop, puoi utilizzare queste risorse gratuite:
- Pixlr – tool online che ti permette di ridimensionare e ritoccare immagini.
- TinyPng – tool online che ti permette di comprimere, e quindi alleggerire, le immagini in formato jpg e png, anche a gruppi di massimo 20 immagini.
Attinenza
Le immagini che utilizzi devono rappresentare, o richiamare, l’argomento a cui sono state abbinate.
Per una semplice questione di coerenza, e per non confondere l’utente che sta leggendo il tuo contenuto.
Testo Alternativo
Il testo alternativo è quel testo che compare quando le immagini non si visualizzano (errore di caricamento, impostazioni del browser…) ed è il testo che viene letto dai sintetizzatori vocali attivi sui dispositivi per non vedenti.
Il testo alternativo deve descrivere l’immagine e – perchè no? – contenere l’argomento (parola chiave) dell’articolo.
E’ un fattore di posizionamento, quindi meglio lo scrivi e meglio è 🙂
Un esempio: per un articolo che parla di bottoni anni ’50 scelgo un’immagine che ritrae un bottone in passamaneria di seta turchese; il testo alternativo potrebbe essere: “Dettaglio di un bottone degli anni ’50 in passamaneria di seta color turchese”.
Fonte
Se le immagini non sono state scattate da te, le puoi scaricare da siti che offrono immagini gratuite.
Risorse gratuite
- Unsplash – sito ormai noto per l’alta definizione delle immagini, utilizzabili in modalità “do whatever you want”.
- Pixabay – database di tantissime immagini gratuite; cliccando su ogni immagine potrai verificare se è necessaria l’attribuzione (= citare/linkare l’autore), o se l’utilizzo è completamente libero.
Oppure, puoi acquistare un abbonamento a un sito che raccoglie immagini Stock (es. Shutterstock).
Quello che di sicuro non è lecito fare, è prendere le immagini “dal web” come se fossero di tutti: le immagini che vedi in rete hanno tutte un autore e relativi diritti.
Ma di questo argomento ne parlerò a breve in altro blogpost.
