Rendere le immagini di un sito web SEO friendly

  5 minuti

Guida base alle best practice per ottimizzare le immagini all'interno del proprio sito web

banner verde dell'articolo di blog sull'ottimizzazione delle immagini

Le risorse infografiche sono una componente fondamentale di un sito web moderno: rendono la pagina più interessante, colorata e iterattiva. È importante farne uso sia nei siti web vetrina che soprattutto negli e-commerce, dove mettere in mostra il proprio prodotto con immagini di impatto è un punto imprescindibile per incrementare le vendite. È necessario tuttavia prestare attenzione a diversi aspetti legati alle immagini, per questioni riguardanti l'accessibilità, la SEO, nonchè all'esperienza utente finale. Vediamo dunque quali sono le buone prassi per rendere un'immagine seo friendly.

Evitare di inserire testi importanti all'interno delle immagini

Inserire testi all'interno delle immagini può essere utile ma allo stesso tempo è necessario considerare che non tutti possono accedere a quel contenuto, in particolare i crawler dei motori di ricerca. Per assicurare la massima accessibilità meglio riportare le informazioni importanti direttamente nell'html.

Prestare attenzione al nome del file

I motori di ricerca utilizzano il nome del file dell'immagine per identificarne il soggetto, per cui è molto importante dare un nome sensato alle proprie immagini e nel caso di siti web multilingua crearne ciascuno per ogni lingua definita e con il proprio nome tradotto. Questo aiuta l'indicizzazione delle immagini e migliora il posizionamento delle proprie pagine. Ad esempio, meglio preferire panorama-monte-bianco.jpg a IMG000001.jpg.

Inserire l'attributo alt nel tag html dell'immagine

Questo punto è fondamentale sia per l'accessibilità che per la SEO, in quanto questo attributo descrive il contenuto dell'immagine, fornendo ai motori di ricerca informazioni circa il contenuto delle immagini. L'attributo alt inoltre fornisce importanti informazioni per utenti che hanno impedimenti visivi.

È importante cercare di essere il più descrittivi possibili, questo attributo non corrisponde ad un titolo ma ad un testo vero e proprio, dovrebbe quindi includere possibilmente tutti i dettagli dell'immagine. Meglio evitare di fare keyword stuffing sul valore di questo attributo, in quanto potrebbe portare a penalizzazioni lato SEO.

Esempio negativo:

<img src="panorama-monte-bianco.jpg" />

Esempio intermedio:

<img src="panorama-monte-bianco.jpg" alt="Panorama monte bianco" />

Esempio ottimizzato:

<img src="panorama-monte-bianco.jpg" alt="Vista della parete nord del monte bianco in primavera all'alba" />

Da evitare:

<img src="panorama-monte-bianco.jpg" alt="monte bianco panorami montagna trekking" />

Inserire l'attributo title

Sebbene non strettamente correlato alla SEO l'attributo title può risultare molto utili in termini di usabilità ed esperienza utente. Molti plugin che utilizzano le immagini per creare gallerie, slideshow o quant'altro utilizzano questo attributo per aggiungere la didascalia all'immagine, ovvero un titolo breve e rappresentativo. A differenza dell'attributo alt quest'ultimo non deve essere descrittivo ma fornire una sorta di slogan per l'immagine.

Tradurre le immagini

Se si dispone di un sito multilingua è molto importante prendersi cura di tradurre gli attributi alt e title, nonchè provvedere ad una copia del file con nome tradotto. Questa operazione, sebbene possa risultare noiosa e ripetitiva, è in realtà molto importante per avere una buona indicizzazione dei propri contenuti in lingue diverse.

Ottimizzare la dimensione su disco

I motori di ricerca tengono in considerazione i tempi di caricamento della pagine web, ritenendoli un fattore di ranking molto importante. Parallelamente, con l'aumento delle prestazioni di un sito web aumenta anche la qualità dell'esperienza utente, il quale ne uscirebbe frustrato da un caricamento lento di una pagina. Ecco perchè è necessario ottimizzare le immagini per il web, prestando attenzione alle dimensioni, al numero di pixel per pollice e al formato. A chiunque piacerebbe vedere immagini perfettamente nitide e definite nel proprio sito web ma è necessario considerare che gli utenti navigano nelle condizioni più disparate possibili, dallo smarphone in metropolitana fino alla connessione di casa, spesso lenta. Bisogna cercare il giusto compromesso tra qualità e dimensione, attuando alcuni espedienti:

  • Preferire immagini jpeg png nel caso di foto o comunque risorse che non richiedono livelli di trasparenza
  • Considerare una dimensione massima di 800px (orizzontale o verticale) o in generale non inserire immagini più grandi del contenitore dell'elemento immagine o del contenitore del sito
  • Considerare una densità di pixel per pollice di 72.000
  • Creare diverse versioni della stessa immagine con dimensioni diverse, utilizzabili in contesti diversi. Ad esempio se si visualizza una griglia di immagini è preferibile mostrare una miniatura nella griglia per poi mostrare la relativa immagine grande nella visualizzazione di dettaglio
  • Non superare i 500Kb di spazio su disco per immagine

Esistono diversi programmi, gratuiti e non, che si occupano dell'ottimizzazione delle immagini per il web. È opportuno dotarsi di questi strumenti e cercare di automatizzare il più possibile l'ottimizzazione delle immagini, in modo da velocizzare il processo.

Considerazioni finali

Prendersi cura delle immagini inserite in un sito web è dunque uno dei passi fondamentali per l'ottimizzazione SEO e costituisce un fattore di ranking molto importante, oltre a fornire una migliore esperienza utente. Tutti i maggiori CMS, compresi Drupal e Wordpress, permettono una facile e autonoma gestione di tutti gli aspetti analizzati in questo articolo.

 

Condividi l'articolo

Rimani aggiornato

Iscriviti alla nostra newsletter di TouchMultimedia per rimanere sempre aggiornato sui nostri articoli e sulle ultime novità.

Touch Multimedia

Codice fiscale e registro imprese 02782060244 VI
Capitale Sociale Euro 52.000,00
R.E.A. Vicenza 274016

Dove siamo

Touch Multimedia S.R.L.
Via Dei Molini, 3B
Sarcedo (VI)
36030

Tel. +39 0445 366583
Fax. +39 0445 366583

info@touchmultimedia.com

Resta in contatto

Bandiera italiana
Bandiera inglese