Come ottimizzare le immagini per la SEO

0 Condivisioni

Le immagini sono molto importanti nel layout grafico di un sito Web. L’utente può essere attratto da elementi visivi: una grafica ben curata e ben fatta consentirà di migliorare l’esperienza utente dei nostri visitatori.

Occorre però non soltanto basarsi su la bellezza dell’immagine ma cercare di ottimizzarla. Innanzitutto bisogna prendere in considerazione i tag HTML, che servono al browser per visualizzare l’immagine.

<img src="image/informarea.jpg" width="700" height="400" alt="Blog di informazione" />
  • Il nome dell’immagine, deve essere breve e contenere una o due parole chiave che richiamano l’argomento espresso dalla foto. Questo perchè alcuni utenti potrebbero giungere al nostro sito attraverso la ricerca effettuata su immagini, ad esempio via Google Image. Avere un nome che esprima il contenuto di un’immagine o di una foto agevola gli utenti e i motori di ricerca.
  • L’attributo alt deve essere presente e deve rispecchiare il contenuto dell’immagine. Questo attributo è utile nel caso in cui l’immagine non venisse caricata dal browser, il testo contenuto permetterebbe all’utente di capire dove si trova e cosa potrebbe incontrare proseguendo nella navigazione.
  • I tag width e height devono essere sempre presenti, perchè permettono al browser di visualizzare l’immagine senza doverne calcolare gli attributi di altezza e larghezza. La presenza di questi due attributi permette al browser di caricare la pagina senza aspettare di aver effettuato il download delle immagini presenti in essa.

Questi elementi consentono di ottenere sottili miglioramenti apprezzabili anche in ambito SEO. Anche il testo che si trova vicino all’immagine risulta essere molto importante. Infatti, se ben strutturato, con informazioni correlate a quelle dell’attributo alt, rende ancora più appetibile l’immagine per i motori di ricerca.

Ottimizzare le immagini

La scelta del formato delle immagini (gif, jpg, png) è un altro elemento cruciale che ci potrà consentire di risparmiare durante il caricamento qualche KB:

  • Gif: permette di ottenere prestazioni migliori per immagini con una mappa di colori ristretta (fino ad un massimo di 256 colori). Questo formato supporta la trasparenza e piccole animazioni. E’ tipicamente consigliato per elementi grafici come bottoni, icone o layout grafici.
  • Jpeg: è più indicato per immagini fotografiche e, grazie al suo metodo di compressione (con perdita dell’informazione), ci permette di ottenere risultati soddisfacenti. Questo formato supporta la trasparenza.
  • Png: attua una compressione dell’immagine senza perdita dell’informazione e supporta la trasparenza e la semitrasparenza. L’unico difetto riscontrabile è che a oggi non tutti i browser supportano la trasparenza delle png.

La scelta di un formato adeguato per le nostre immagini consentirà di ottenere immagini con qualità superiore, ma di dimensioni ridotte, e un risparmio in byte utile per ottimizzare il caricamento di una pagina web. Un modo di ottimizzare le immagini è quello di ridurre le dimensioni, ma come? Esistono diversi strumenti che ci agevolano in questo compito:

  • image optimizer è un tool che consente di ridurre le dimensioni con estensioni gif, jpg e png;
  • smush.it è un servizio offerto da Yahoo per la compressione delle immagini;
  • seo friendly images è un tool per ottimizzare le immagini.

Ricordiamoci che se nel nostro sito inseriamo un’immagine con tag height e width di 50px, ma in realtà ha una larghezza e altezza di 500px, essa impiegherà più tempo per a caricarsi, per questo motivo cerchiamo di ridurre le dimensioni delle immagini prima di caricarlo utilizzando programmi appositi per ridurre le dimensioni.

Per comprimere le immagini esistono librerie proprietarie di linguaggi di programmazioni dinamici come anche l’uso del CSS, il quale può aiutarci a utilizzare meno byte rendendo più performanti le nostre pagine web.

Alcune persone potrebbero utilizzare le nostre immagini nei loro blog o siti web, prelevandole direttamente dal nostro sito Web, sovraccaricandolo. Alcuni Webmaster, infatti, cercano di bloccare le immagini se visualizzate da domini diversi dall’host di destinazione. Questo consente di migliorare il carico sul server e di impedire che le nostre immagini vengano utilizzate su altri siti Web. Di contro, però, bloccando l’hot-linking impediamo che i motori di ricerca di immagini sfruttino le foto privandoci di una possibile fonte di visite al nostro sito Web. Il consiglio è quello di monitorare l’utilizzo delle immagini attraverso strumenti di statistica, ma non impedire la tecnica dell’hot-linking, perchè ci priveremmo di visite proveniente dai diversi canali.

0 Condivisioni

Fabrizio Cannatelli

Fondatore di Informarea.it, è un appassionato di informatica. Ha lavorato per molti anni come Analista Programmatore presso varie aziende utilizzando diversi linguaggi di sviluppo, oggi svolge un lavoro completamente diverso ma la voglia di comunicare e di condividere con il web i suoi studi e le sue curiosità lo hanno spinto a far nascere questo blog non solo per esprimere e mostrare la passione per questo mondo, ma anche per confrontarsi con nuove esperienze di sviluppo.

Fabrizio Cannatelli

Lascia un commento

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

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.