Best practices sull’ottimizzazione delle immagini per le pagine web del tuo sito

ottimizzazione-immagini

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.

Trackback dal tuo sito.

simona

This information box about the author only appears if the author has biographical information. Otherwise there is not author box shown. Follow YOOtheme on Twitter or read the blog.

Lascia un commento

Devi essere loggato per postare un commento.