Ottimizzare le immagini dei post

Con il post web design for dummies ho voluto dare qualche suggerimento per realizzare un buon layout web. I dieci argomenti trattati andrebbero presi in esame singolarmente vista la loro importanza, cosa che intendo fare poco alla volta con una serie di articoli.
Inizierò parlando della gestione delle immagini da inserire nei nostri post.

Ottimizzare le immagini dei post

Perché è importante farlo? L’adeguata preparazione delle immagini da usare nei nostri post, ma anche in widget, banner e loghi, è utile per due motivi fondamentali.
Si evitano rallentamenti nella visualizzazione delle pagine e si aiuta il blog nell’indicizzazione sui motori di ricerca.

Ottimizzare le immagini dei post

Fonte: pixabay.com

1) Le dimensioni contano.

Il primo aspetto è direttamente correlato alle dimensioni delle immagini utilizzate.
Più Kilobyte = maggiore lentezza nel caricare il blog = aumento dei visitatori che lo abbandoneranno.
In genere bisognerebbe ottimizzare le immagini portandole ad un massimo di 30 Kb.
Per ridurre dimensioni e peso si possono utilizzare appositi software come GIMP o Photoshop. In alternativa, se non si è pratici di grafica, ci sono ottimi servizi online gratuiti:

2) Che nome dare alle immagini?

Molto spesso, per la fretta o per distrazione, tendiamo a caricare foto con i nomi di default assegnati dalle digitali (parlo al plurale perché ammetto di aver fatto spesso questo errore, anche di recente).
Grave mancanza perché il nome ha la sua importanza in ottica SEO.

Utilizzando termini appropriati è possibile ottenere una buona indicizzazione su Google Images con i benefici che ne conseguono: crescita delle visite e aumento della popolarità del blog, migliore indicizzazione dei contenuti su Google.

Evitiamo quindi immagine1.jpg o DSCN1592.png  rinominandoli con termini che descrivano quanto fotografato, che siano correlati al testo del post e che abbiano almeno una keyword. Attenti a non eccedere, il nome deve essere di 4/5 parole al massimo separate dal trattino e non dal’ underscore o, peggio, dal fastidioso %20
Es: ottimizzare-immagini-blog.jpg invece di ottimizzare%20immagini%20blog.jpg
Ottimizzare le immagini. Formato PNG

3) Il formato adatto

In questo caso le opzioni sono ridotte a due: png e jpg. Formati compressi che mantengono una qualità accettabile, meglio ancora se sono realizzati in formato progressivo. Il caricamento dell’immagine avviene gradualmente, partendo dal livello di qualità più basso.
Evitate assolutamente le Gif animate! Appesantiscono e obiettivamente sono un po’ pacchiane.

4) Tag Alt

Alt per Alternative, perché deve fornire una descrizione testuale al browser qualora non riuscisse a caricare l’immagine. Viene letta dai motori di ricerca, per questo valgono i concetti espressi per la scelta del nome: attinenza con il tema della foto e presenza di keywords, ovviamente senza esagerare o inserirle sotto forma di elenco.

Il tag deve avere un senso logico, ecco perché è necessario usare una terminologia chiara e precisa.

Google lo utilizza per facilitare l’indicizzazione delle immagini, con i benefici che ne conseguono (vedi quanto già scritto nel paragrafo Che nome dare alle immagini?)

<img src=”vacanza-roma.jpg” alt="Colosseo Roma" > </img>

5) Tag Title

Importante per l’usabilità dei siti, un po’ meno in ambiente SEO, ma visto che ci siamo è meglio configurare anche questo parametro. In linea di massima è applicabile quanto scritto per il Tag Alt, anche se il risultato sarà di visualizzare un pop-up informativo al passaggio del cursore del mouse sull’immagine.

Attributi

Più che un suggerimento è un riepilogo dei principali attributi del tag IMG da inserire quando decidiamo di ottimizzare le immagini.

  •  SRC è un parametro obbligatorio perché indica la posizione dell’immagine.
  • ALIGN specifica l’allineamento dell’immagine rispetto al testo adiacente e può avere i parametri Top, Middle, Bottom (sopra, in mezzo e sotto)
  • ALT permette di visualizzare un testo alternativo quando l’immagine non viene caricata.
  • TITLE fa visualizzare una finestra d’informazione al passaggio del cursore sull’immagine.
  • WIDTH è la larghezza dell’immagine.
  • HEIGHT è l’altezza dell’immagine.

Per una lettura più approfondita sugli attributi suggerisco un interessante post di Gdesign.

Se ti è piaciuto questo articolo, iscriviti GRATUITAMENTE agli aggiornamenti via email