Cosa significa ottimizzare le foto per il web e perchè è importante

Cosa significa ottimizzare le foto per il web e perchè è importante

Una foto dice più di mille parole, questo se a guardarla è un occhio umano, ma ti sei mai chiest* cosa capiscono i motori di ricerca?

Il nostro cervello è in grado, a colpo d’occhio, di identificare il soggetto, il contesto e i colori delle immagini ma queste informazioni che a noi sembrano banali sono ancora molto difficili da estrapolare con sistemi automatici come gli algoritmi dei motori di ricerca.

Per questo motivo è molto importante facilitare il riconoscimento di queste caratteristiche inserendo informazioni aggiuntive in fase di pubblicazione. Di seguito alcuni consigli su come rendere le tue immagini a prova di web :)

Cura il nome file

L’ottimizzazione delle immagini comincia sul tuo device. Avere l’abitudine di rinominare le foto con titoli descrittivi è utile per motivi di archiviazione personale oltre che per i motori di ricerca.

Una file nominato pescatore-lago.jpg lascia intendere immediatamente quale sia il soggetto ed è più chiaro rispetto a un nome automatico come DSC301.jpg.

Moltissime fotocamere attribuiscono nomi con sequenze consecutive di lettere e cifre creando così immagini omonime ma con soggetti diversi contribuendo a rendere più difficile l’identificazione del soggetto.

Gif con sequenza di foto differenti con il medesimo nome

Gif con sequenza di foto differenti con il medesimo nome

Una volta rinominato il file sei pront* per caricarlo sul tuo sito

Presta attenzione al peso del file

Il digital divide è purtroppo una realtà, soprattutto in un paese come il nostro in cui le aree con internet veloce sono ancora la minoranza e in cui le connessioni limitate sono tra le più diffuse. Per questo motivo è importante avere cura di inserire nel proprio sito immagini che non superino 1MB di peso.

Maggiore è il peso delle tue foto e maggiore sarà il tempo di caricamento della tua pagina, prestare attenzione al peso delle tue immagini significa sincerarsi che i tuoi visitatori non abbiano problemi durante la loro permanenza sul tuo sito.

Molti (se non tutti) abbonamenti internet per lo smartphone hanno un limite al n° di MB scaricabili al giorno, evita che i tuoi visitatori finiscano il credito solo per aver letto il tuo ultimo post

Inserisci titolo, titolo alternativo e descrizione

Tutto ciò che percepiamo come testo e immagini su internet altro non è che la traduzione di codice html in elementi visivi ad opera del nostro programma di navigazione preferito. Il codice che si cela dietro alle immagini è il seguente, ed è importante conoscerlo per capire che cosa i motori di ricerca capiscono dei file che carichiamo.

<img src=”nomefile.jpg” alt=”titolo alternativo” title=”Titolo” desc=”Descrizione” />

Fortunatamente moltissimi   come WordPress si preoccupano di generare questo codice per noi, indipercui dobbiamo solo compilare diligentemente i campi che ci vengono proposti.

form di caricamento immagine su WordPress

Compilare tutti i campi proposti dal tuo CMS rende le immagini più semplici da interpretare sia per gli umani che per i robot.

Vediamo nel dettaglio a cosa si riferisce ogni campo

Titolo

Il titolo viene mostrato all’interno di un rettangolo giallo in sovraimpressione all’immagine, è un sistema pratico e veloce per fornire maggiori informazioni ai tuoi visitatori. Sposta il mouse sull’immagine qui sotto e aspetta 2 secondi, vedrai comparire il titolo.

Un gruppo di elefanti che cammina in fila indiana

 Didascalia

La didascalia può essere utilizzata per inserire curiosità o informazioni aggiuntive che completano ciò che hai scritto nel tuo articolo. Un buon uso di queste rende l’articolo più curato e fornisce un metodo di lettura differente ai visitatori. Spesso infatti il nostro occhio si sofferma prima sulle immagini e in base alle informazioni recepite si decide se proseguire con la lettura o se passare ad altro. La didascalia è la tua occasione per catturare l’attenzione di chi ti segue.

Volto di un leone

Anche il re della giungla deve avere la sua didascalia

Alt, ovvero titolo alternativo

Il titolo alternativo viene visualizzato quando l’immagine per qualche motivo non viene mostrata. Al posto di questa il browser propone il “titolo alternativo”, una scritta descrittiva utilizzata anche dai motori di ricerca per interpretare il file modo corretto. Questo è probabilmente il campo più importante per rendere rintracciabili le tue immagini sui motori di ricerca.

Immagine di una foto non caricata correttamente

Il testo alternativo compare quando l’immagine non viene caricata correttamente

Descrizione

Questo attributo non viene più utilizzato nè dai motori di ricerca, nè dai browser, puoi quindi evitare di compilare questo campo. Il suo utilizzo sta infatti scemando sempre più e continuerà fino alla sua scomparsa. In HTML5 questo infatti non viene più considerato.

L’unico caso in cui può essere necessario inserirlo è se utilizzato dal tema del tuo CMS ma la didascalia dovrebbe già essere in grado di contenere tutte le informazioni che ti servono. Personalmente amo compilare tutti i campi in modo meticoloso perchè i motori di ricerca sono tanti e ciò che viene ignorato da uno potrebbe essere importante per un altro. Ammetto però di non essere sicuro su questo ultimo punto e nel caso tu avessi maggiori informazioni gradirei riceverle nei commenti.

Modi di dire 2.0

Per non sapere nè leggere nè scrivere, io compilo tutto.

Scrivi nei commenti come ottimizzi le tue immagini o fammi una domanda, cerco sempre di rispondere entro un paio di giorni, weekend compresi :)

Content Management System – Piattaforme di gestione contenuti 
468

2 Commenti

  1. Ciao conpanna,
    quello che non capisco è la differenza tra ridimensionamento immagini e ottimizzazione delle immagini. Se riduco manualmente il numero di pixel riduco il peso della foto, significa che l’ho ottimizzata? Non ho Photoshop e vorrei usare strumenti alternativi, magari anche interni a WordPress. Inoltre mi è stato detto che i motori di ricerca premiano quei siti in cui la stessa immagine ha risoluzioni diverse, quindi in che dimensione la devo caricare?

    Grazie mille!
    filo

    Rispondi
    • Ciao Filo,
      Ottimizzare una foto significa anche ridimensionarla quindi possiamo dire che la seconda è una fase della prima ma non si limita solo questo, come scritto nell’articolo è opportuno anche fornire ai motori di ricerca le informazioni utili per poterle decifrare come titolo e titolo alternativo.

      Personalmente utilizzo un plugin per WordPress chiamato EWWW Image Optimizer che in automatico ridimensiona le immagini durante l’upload e crea delle copie per ogni dimensione necessaria: anteprima, media, grande, mobile etc… In questo modo non è necessario utilizzare photoshop. Oltre a questo esistono molti altri plugin che hanno la stessa funzione e la scelta dipende dall’uso che fai del tuo sito.

      Non esiste una regola d’oro per capire di che dimensione caricare le immagini se non il buon senso, affidandoti al plugin lasci questo aspetto tecnico a WordPress che in base al dispositivo utilizzato dai visitatori è in grado di scegliere l’immagine migliore. I motori di ricerca premiano i siti che effettuano questa operazione e non il semplice fatto di avere caricato l’immagine di tante dimensioni differenti. Ciò che è importante è il rispetto dei tuoi visitatori e fornire un’immagine di piccole dimensioni se il sito viene consultato via smartphone significa proprio questo.

      Ciao, a presto!

      Rispondi

Trackback/Pingback

  1. Foto prodotto, 6 punti da mettere a fuoco - conpanna - […] aver evidenziato l’importanza di ottimizzare le foto per il web ho deciso di dedicare attenzione a una tipologia specifica …

Invia commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Share This

Share This

Share this post with your friends!

Share This

Share this post with your friends!