Come ottimizzare le immagini per migliorare SEO e design del tuo sito

Migliora le immagini per la SEO del sito

Oggi vorremmo richiamare la tua attenzione sull’importanza dell’ottimizzazione di ogni immagine caricata sulle tue pagine web. Che si tratti di un semplice sito, un negozio online o un blog, l’obiettivo sarà sempre quello di rendere il suo aspetto magnifico.

Quando parliamo di “ottimizzazione” delle immagini per il web, ci riferiamo principalmente a tre aspetti:

  1. estetico: le immagini devono essere belle e catturare immediatamente l’attenzione  di un potenziale visitatore
  2. velocità di caricamento sulle pagine
  3. facile indicizzazione da parte dei motori di ricerca.

In precedenti articoli del nostro Blog abbiamo affrontato singolarmente i diversi aspetti sopra indicati, ma in questo post li terremo in considerazione tutti insieme.

La cosa migliore è ovviamente ottimizzare le immagini con degli strumenti gratuiti e facili da utilizzare, senza diventare necessariamente esperti di Photoshop. Per la realizzazione di questo articolo abbiamo modificato la maggior parte delle immagini usando la versione gratuita di Pixlr che è uno strumento fantastico per la modifica basilare delle foto.

Se sei interessata/o ad altri strumenti, non puoi assolutamente perderti questo altro articolo in inglese How to Edit Photos Without Photos.

Cosa sapere per migliorare le immagini del sito

1. Inizia con immagini di alta qualità

Siti che raccolgono immagini: non devi per forza essere un fotografo professionista per usare foto sbalorditive. Ci sono sempre più siti che offrono raccolte di foto di alta qualità facilmente scaricabili a titolo gratuito per usi commerciali. Condividiamo con te una lista dei nostri preferiti:

Quando scarichi un’immagine da uno di questi siti, si tratterà probabilmente di un file JPEG molto grande. La sua ottimizzazione richiede una riduzione della grandezza e il caricamento di un file più piccolo. Meglio evitare invece file di piccole dimensioni perché l’ingrandimento pregiudicherebbe la qualità dell’immagine.

 

Usa le immagini migliori: certamente non puoi usare raccolte di foto per ogni occasione. Basti pensare a quando ti servono immagini del tuo team oppure dei prodotti che vuoi vendere. Se vuoi fotografare i tuoi articoli, ecco qua qualche semplice trucco per degli scatti ben illuminati e professionali, in questo modo non dovrai per forza acquistare della costosissima attrezzatura fotografica!

 

Grafica: se stai cercando qualcosa che sia più orientato verso lo stile grafico, esistono ormai tantissimi strumenti che puoi utilizzare per creare delle infografiche o per inserire delle scritte sulle foto. Ti suggeriamo di utilizzare Canva e PiktoChart. Se hai bisogno di un logo, ti consigliamo 99designs o designonclick.

 

2. Usa il giusto tipo di file: JPEG o PNG

Avendo a che fare con immagini, ti imbatterai la maggior parte delle volte in file JPEG (o JPG) o PNG. Entrambe le tipologie hanno diversi pro e contro, puoi tenere a mente giusto i seguenti:

  • Le fotografie dovrebbero essere salvate e caricate come JPEG. Questo tipo di file, anche se di dimensioni contenute, può contenere tutti i colori di una fotografia. Se salvassi la stessa foto in un formato PNG, ti ritroveresti un file di enormi dimensioni.
  • Le immagini grafiche, soprattutto se caratterizzate da grandi aree di colore, dovrebbero essere salvate e caricate come PNG. Ci riferiamo in questo caso a semplici immagini grafiche, infografiche, immagini contenenti molto testo e loghi.      Il formato PNG ha una qualità migliore rispetto al JPEG, ma di solito occupa uno spazio maggiore. Le immagini salvate con questo tipo di file possono essere ingrandite senza che venga la qualità ne risenta. Il formato PNG supporta inoltre sfondi trasparenti, particolarmente importanti se vuoi utilizzare un logo personalizzato. Se puoi scegliere, ti suggeriamo di salvare il PNG come “24 bit” e non “8 bit” vista la migliore qualità e il maggior numero di colori supportati.
Salva le foto come file JPEG
Le fotografie dovrebbero essere salvate come file JPEG.
Salva grafiche e loghi come file PNG
Grafiche e loghi dovrebbero essere salvati come file PNG.

Che fare se vuoi inserire nel sito una foto sulla quale è impressa una scritta?

In questo caso è meglio optare per il formato JPEG. Molti programmi per la modifica delle foto lasciano la possibilità di scegliere tra JPG o PNG cliccando su “Salva come”, “Esporta”, o “Salva per il web”.

Esistono anche degli strumenti online gratuiti (come ad esempio Zamzar) che permettono la conversione del file.

Puoi convertire un file PNG in JPEG senza problemi, ma attenzione alla qualità dell’immagine nel passaggio dal formato JPEG a PNG. Se disponi del tuo logo solamente in JPG, meglio rivolgerti a un graphic designer di fiducia per la realizzazione di un’immagine direttamente in formato PNG.

3. Ridimensiona le immagini per ottimizzare velocità e aspetto della pagina

Quando si ha a che fare con immagini per il web, la cosa più importante è trovare il giusto equilibrio tra dimensione e risoluzione. Più è alta la risoluzione, più grande sarà la dimensione del file. Nel mondo della stampa l’alta risoluzione è un valore positivo. Nell’universo web invece immagini grandi possono rallentare notevolmente la velocità di caricamento delle pagine. Ciò va a discapito della qualità della navigazione dei tuoi visitatori e dell’indicizzazione del sito. Immagini grandi e tempi di caricamento lento sono particolarmente fastidiose per chi visita le pagine web da un dispositivo mobile.

 

In certi casi vorresti usare una foto molto grande per il tuo sito, ad esempio per personalizzare lo sfondo. Se usi una foto con una bassa qualità e cerchi d’ingrandirla, potrebbe risultare sfocata. Come raggiungere quindi il giusto equilibrio tra dimensione e qualità? Prima di tutto è necessario capire che, quando si parla d’immagini, il termine “dimensioni” è relativo. Se volessi stampare un’immagine, avresti bisogno di una dimensione molto più grande di quella necessaria per caricare la stessa immagine sul web.

Potrebbe essere un po’ complicato capire alcuni concetti, allora ecco qua una breve panoramica dei tre maggiori aspetti che definiscono le dimensioni di un’immagine:

  • Grandezza del file: numero dei bytes che un file occupa sul tuo computer. Questa caratteristica potrebbe rallentare considerevolmente la velocità di caricamento del sito. Una foto di 15 MB (megabyte) è enorme. Una foto di 12 KB (kilobyte) è molto più piccola. Se il tuo file occupa davvero tanto spazio, ciò può dipendere dalla grandezza dell’immagine o da una risoluzione troppo alta.
  • Grandezza dell’immagine: è l’attuale dimensione della tua immagine in pixels. Probabilmente penserai alle misure tradizionali di una foto stampata e cioè 10x15, 13x18, 20x30. Sul web la lunghezza e la larghezza sono invece misurate in pixels. Ad esempio la tipica immagine che puoi trovare su un sito o su un blog potrebbe essere di 795x300 pixels.
  • Risoluzione: concetto nato nel mondo della stampa, la risoluzione è la qualità o la densità di un’immagine misurata in dots per inch (dpi, punti per pollice in italiano). Un’immagine che si vuole stampare dovrebbe avere una risoluzione di almeno 300 dpi. Per il web sono sufficienti 72dpi o 92dpi, quindi meglio evitare d’ingrandire inutilmente delle immagini. Quando ti capita di imbatterti nella scritta “save for web” usando un programma di design, significa salvare la foto in una risoluzione più bassa e compatibile con il web.

Impara di più sulla grafica web seguendo la nostra guida per principianti!

Dove trovare la grandezza del file, dell’immagine e la sua risoluzione?

Puoi trovare le grandezze del file e dell’immagine direttamente sul tuo computer. Se usi un PC, clicca il tasto destro sul file, seleziona “Proprietà” e poi il “Sommario”.

Su un Mac premi Ctrl e clicca sul file selezionando poi la voce “Informazioni/Get info”. Scoprire la risoluzione richiede un software più avanzato come ad esempio Photoshop, ma molti programmi per la modifica basilare di immagini le salveranno automaticamente in un dpi basso e compatibile col web (Pixlr in 72dpi e Canva in 92dpi, basta optare per la voce “Salva per il web”).

 

Qualche prezioso trucco per ottimizzare le immagini

Ora che conosci le varie accezioni del termine “dimensione”, segui questo pugno di regole per una perfetta ottimizzazione:

  • Per lo sfondo non usare immagini più grandi di 1MB.
  • Se vuoi uno sfondo full-screen, il supporto di Jimdo raccomanda il caricamento di un’immagine larga 2000 pixels.
  • Usa sempre l’opzione “Salva per il web” quando è disponibile: la risoluzione della foto sarà compatibile col web. 
  • Puoi sempre rimpicciolire un’immagine senza problemi, lo stesso non avviene quando la vuoi ingrandire. L’effetto finale potrebbe essere pixelato e sfocato, sarebbe come cercare di riempire un’intera piscina usando solamente un litro d’acqua.  

Che fare se l’immagine è troppo grande per il sito?

Immaginiamo che tu possegga una meravigliosa camera digitale e che voglia passare gran parte del tempo a scattare foto grandi diversi megabytes: si tratterebbe di dimensioni decisamente sproporzionate per il web. I siti che raccolgono foto ad alta qualità tendono ad offrire immagini contenute in file di grandi dimensioni.

Se la tua immagine supera 1MB, ecco qualche consiglio su come procedere:

  • Rimpicciolisci l’immagine: se la foto è larga 5000 pixel, puoi semplicemente rimpicciolirla a 2000, 1200 pixel o renderla ancora più piccola a seconda di come desideri usarla nel sito. Questo cambiamento ridurrà significativamente le dimensioni del file. Presta giusto attenzione alle proporzioni in modo da non distorcere l’immagine.
  • Riduci la risoluzione: programmi come Pixlr e Canva riducono automaticamente la risoluzione dell’immagine in una compatibile col web (rispettivamente 72dpi e 92dpi). Puoi anche usare Photoshop con l’opzione “Salva per il web” oppure utilizzare altri programmi per la modifica di foto.
  • Apri l’immagine con un programma gratuito come TinyPNG o TinyJPG .Entrambi ridurranno le dimensioni del file senza interferire sulla qualità. 
Ridimensiona le immagini usando Pixlr

Ridimensiona le immagini usando Pixlr. La grandezza originale della foto era di 6302x4789 pixel e 16,2MB, molto più ampia di quella di cui avevo bisogno per il sito. Usando Pixlr, ho rimpicciolito l'immagine a 1000x760 pixel ottenendo un file di 132KB perfettamente compatibile col web! 

4. Tutte le immagini del sito devono avere stesse dimensioni e identico stile

Le immagini del sito appariranno molto meglio se userai sempre lo stesso stile e grandezza/proporzioni. Questa “coerenza” grafica ti aiuterà notevolmente anche nell’allineamento del testo, delle colonne e di tutte le informazioni sulle pagine web.

Per capire che intendiamo, dai uno sguardo agli esempi che seguono.

Nel primo, preso dal sito “Make-Believe Coffee”, le foto hanno grandezze differenti. Una è orientata in senso verticale e le altre in orizzontale. Ciò fa apparire la pagina come dominata dal caos.

Immagini non ottimizzate per SEO

In questo esempio le foto hanno dimensioni differenti e non sono allineate facendo apparire la pagina disordinata e rendendo la navigazione poco intuitiva.

Nell’esempio successivo ho usato Pixlr per ritagliare le foto e renderle uniformi a 1000x70 pixels (puoi anche farlo direttamente sul sito Jimdo usando la funzione integrata di Adobe Image Editor).

La foto superiore della tazza bianca col cappuccino fumante mi è sembrata a quel punto troppo diversa dalle altre e l’ho quindi sostituita con un’altra più simile nello stile e nei colori alle altre due immagini. Ho poi sperimentato gli effetti di Pixlr e aggiunto un filtro sottile su ogni foto (simile a quelli che si trovano su Instagram) per rendere conforme l’aspetto di tutte le immagini. Infine le ho caricate tutte sul mio sito inserendole in colonne per ottenere una struttura grafica più pulita e ordinata.

Ottimizzazione, ridimensionamento e allineamento delle immagini per SEO

In questo esempio le foto scelte hanno lo stesso stile , dimensione e allineamento. L'aspetto della pagina è molto più pulito e ordinato.

Visto che le foto sono tutte della stessa grandezza e orientate verso la medesima direzione (verticale) si adattano perfettamente all’interno di una colonna, permettendomi di inserire il testo nella seconda senza altri noiosi accorgimenti!

Ritaglia le immagini con Pixlr

Ritaglia le immagini con Pixlr per uniformare la loro dimensione.

Ora che le tue immagini sono state ridimensionate e hanno un aspetto magnifico, come ottimizzarle per i motori di ricerca?

5. Usa i campi caption e alternative text per rinominare le immagini

Moltissime persone caricano immagini come elementi foto e poi dimenticano di compilare le parti relative alle informazioni aggiuntive. Caption e Alternative Text sono fondamentali per rinominare le immagini e quindi cruciali per la SEO del tuo sito. 

 

Di solito non si presta attenzione al nome attribuito al file. Potrebbe apparire privo d'importanza intitolare un'immagine “Photo1.jpg” o “Screen Shot 2017-06-02 at 3.41.15 PM”. Prendi qualche minuto per rinominare le immagini prima di caricarle sul sito.

Perché? Perché facendo ciò darai una spinta incredibile all’ottimizzazione (SEO) delle tue pagine. Prova a ragionare in questo modo: Google analizza il tuo sito, ma può leggere solo testi e non vedere le immagini. I nomi dei file danno delle informazioni sul contenuto dell’immagine e da essi dipende la corretta interpretazione di Google (pensa alla differenza tra un file che si chiama eiffel-tower.jpg piuttosto che DSC12345.jpg).

 

Sui siti Jimdo le immagini vengono automaticamente rinominate per accordarsi all’alternative Text, usando trattini alti al posto degli spazi. Ciò vuol dire che non dovrai rinominare tutti i file d’immagini sul sito, ma semplicemente aggiornare l’alternative text.

 

Il titolo del file diventa inoltre parte dell’URL dell’immagine, quindi attribuirgli un nome in una lingua esistente e comprensibile rende l’indirizzo dell’immagine stessa più facile da raggiungere e da interpretare.

 

Gli Alt tags (o alternative text) non saranno visibili ai visitatori, ma daranno ai motori di ricerca delle informazioni fondamentali sul contenuto di ogni singola immagine. Perciò appena aver caricato un elemento grafico, accertati di compilare il campo dell’alternative text con una frase che descriva ciò che mostra la foto, preferibilmente usando delle parole chiave. Gli alternative text aiutano anche i visitatori che navigano sul tuo sito usando dei software audio per non vedenti, per cui si tratta anche di un modo intelligente e civile di potenziare l’accessibilità delle pagine web.

 

I nomi dei file e gli alt tags sono particolarmente importanti per l’indicizzazione delle pagine web dedicati ai prodotti. Non dimenticare poi di aggiungere una caption (breve testo descrittivo visibile ai tuoi utenti) ad ogni immagine visto che i visitatori tendono a leggere le brevi didascalie più di ogni altra cosa. 

Ottimizza le immagini usando i campi Caption e Alternative Text

Non dimenticare di compilare i campi  per la caption (sottotitolo) e Alt tag (testo alternativo). 

Nota: compilare Alt tags, scrivere caption: si tratta di operazioni ottime per la SEO, ma non tentare di semplificare troppo questi accorgimenti ricorrendo ad un insieme di parole chiave scollegate tra loro. La strada da seguire è quella di descrivere un’immagine con una breve frase di senso compiuto. Aggiungere parole chiave irrilevanti o ripetitive penalizzerebbe la tua valutazione sui motori di ricerca.

6. Scegli immagini coerenti coi testi

Scegli immagini che rimandano al senso dei testi, invece che inserire qualcosa che potrebbe colpire inizialmente l’attenzione del visitatore, ma è completamente staccata dal contento. Un’immagine che è circondata da informazioni coerenti e rilevanti (soprattutto in termini di parole chiave) viene premiata con un ranking maggiore sui motori di ricerca.

 

Se il tuo sito parla di formazione e scolarizzazione, non otterrai nessun miglioramento nell’indicizzazione mostrando la foto di una mela. Hai bisogno di immagini di classi, insegnanti, studenti, sicuramente molto più interessanti per il lettore e coerenti con l’oggetto tematico delle tue pagine web.

Sintesi: ottimizzazione delle immagini web in chiave SEO

Ripassiamo tutti i consigli elencati precedentemente con un esempio che si riferisce ancora una volta al sito Make-Believe Coffee.

Ho trovato una foto di una tazza di caffè su Unsplash. Al momento del download il nome era “fN6hZMWqRHuFET5YoApH_StBalmainCoffee.jpg” e aveva una dimensione di 2509x1673 pixel. La grandezza del file era di 586 KB, non così male, ma ancora molto più grande di quanto avessi bisogno per le mie pagine web.

Per ottimizzare questa foto, potrei procedere in questo modo:

  • Rinominerei l’immagine con un titolo che abbia maggior senso. Qualcosa come make-believe-coffee-cappuccino.jpg
  • Userei uno strumento come Pixlr per ridimensionare e ritagliare la grandezza di cui ho bisogno. In questo caso sceglierei 1000x760 pixel. Nel caso volessi un riquadro potrei arrivare a 1000x1000 pixel.
  • Controllerei la grandezza del file. Una volta ritagliata e scaricata la foto con l’ausilio di Pixlr, la grandezza del file era di 117KB, praticamente perfetta!
  • Caricherei l’immagine sul sito usando un elemento foto e non dimenticherei di compilare il campo Alt Text! Aggiungerei infine una caption (didascalia) accattivante.
Ottimizza le immagini usando i campi Caption e Alternative Text

Anche se questa lista può sembrare lunga e faticosa da leggere e realizzare, soprattutto se devi caricare molte immagini, diventerai sempre più veloce man mano che familiarizzerai col procedimento.

 

Ti consiglio di inserire questa pagina nella barra segnalibro, potresti ritrovarti a cercarla spesso! Seguire questi consigli ti servirà a migliorare l’aspetto delle immagini, velocizzare il caricamento del sito e potenziarne la SEO.

Non dovrà passare molto tempo prima che tu riesca a vedere i primi risultati.


Aiutati ancora con la nostra guida online per tanti altri consigli su come creare il tuo sito web! 

Elisabetta Satta

Jimdo Team

 

 

Articoli che potresti trovare interessanti:

Il metodo "lean startup" che ti aiuterà a completare il tuo sito Jimdo
>> leggi di più

“Chiunque può fare il PR!”: la strategia vincente sui social network in soli 5 passaggi.
>> leggi di più

Un evento di successo? La chiave è nell'organizzazione
>> leggi di più

rankingCoach, la vostra nuova guida per il posizionamento su Google
>> leggi di più


Scrivi commento

Commenti: 8
  • #1

    Fogliaviola.com (Tuesday, 10 April 2018 17:36)

    Le immagini usate come prodotti negli e-commerce però, non possiedono ne alt, captions etc.. come fare considerando che certi siti si fondano proprio su queste?

  • #2

    Francesco (Tuesday, 10 April 2018 20:56)

    Nel mio sito www.francodauria.com uso centinaia di gallerie. Nell'articolo, pur esaustivo, non se ne fa cenno. Per le foto inserite nelle gallerie, visto che non esiste lo strumento dell'Alt tags, c'è correlazione tra il titolo della foto e gli Alt tags? Complimenti per la chiarezza e mille grazie.

  • #3

    Matteo (Tuesday, 10 April 2018 21:03)

    Ho sempre rinominato le foto apposta ma jimdo le ha sempre rinominate a modo suo..Ora rifarò una prova per vedere se le immagini mantengono il nome datogli o se vengono rinominate nel caricamento...altrimenti non capisco il senso (di una parte..) di questo articolo...

  • #4

    Davide - Jimdo team (Wednesday, 11 April 2018 17:16)

    @fogliaviola.com

    Ottimo spunto! Sebbene tra le impostazioni non sia previsto l'alt-tag per le immagini dello shop, l'indicizzazione in quel caso dipende dalla qualità dei contenuti della pagina in cui si trovano le foto dei tuoi articoli. Assicurati di avere titoli e testi ben descrittivi, che si rifacciano ai prodotti e ne diano informazioni attinenti. Google non farà tanta fatica a indicizzare quella determinata pagina e quindi anche le immagini presenti in essa.

  • #5

    Elisabetta - Jimdo team (Thursday, 12 April 2018 15:12)

    @ Francesco: è vero la galleria non consente l'inserimento dell'Alt tag, ma del sottotitolo e in questo caso Google prende proprio il sottotitolo come elemento di riferimento. Assicurati di inserire un sottotitolo per ogni immagine della tua galleria. :)

    @ Matteo: in effetti l'articolo era poco chiaro su questo punto e abbiamo provveduto a modificarlo proprio grazie al tuo prezioso feedback. Grazie! Intendevamo dire che le immagini vengo rinominate proprio attraverso gli Alt tags e che per questo motivo è fondamentale usare tale funzione se si vuole ottimizzare ogni elemento del sito.

  • #6

    Fabio (Friday, 20 April 2018 20:58)

    Salve come mai nella foto del logo non si può mettere l'attributo alt importantissimo per i motori di ricerca

  • #7

    Miriam (Saturday, 15 September 2018 09:56)

    Buongiorno Sono Miriam Lavoretano, io ho beneficiato di un prestito di 15.000€ presso un prestatore sig.ra Cristina Allegri che presenta offerte di prestito a ogni persona nella necessità. Dunque se siete interessato o avete una persona che è nella necessità di prestito, contattarla per maggiori informazioni:

    cristinaallegri09@hotmail.it

    Cordiali saluti



































    Buongiorno Sono Miriam Lavoretano, io ho beneficiato di un prestito di 15.000€ presso un prestatore sig.ra Cristina Allegri che presenta offerte di prestito a ogni persona nella necessità. Dunque se siete interessato o avete una persona che è nella necessità di prestito, contattarla per maggiori informazioni:

    cristinaallegri09@hotmail.it

    Cordiali saluti














    .
    Buongiorno Sono Miriam Lavoretano, io ho beneficiato di un prestito di 15.000€ presso un prestatore sig.ra Cristina Allegri che presenta offerte di prestito a ogni persona nella necessità. Dunque se siete interessato o avete una persona che è nella necessità di prestito, contattarla per maggiori informazioni:

    cristinaallegri09@hotmail.it

    Cordiali saluti



































    Buongiorno Sono Miriam Lavoretano, io ho beneficiato di un prestito di 15.000€ presso un prestatore sig.ra Cristina Allegri che presenta offerte di prestito a ogni persona nella necessità. Dunque se siete interessato o avete una persona che è nella necessità di prestito, contattarla per maggiori informazioni:

    cristinaallegri09@hotmail.it

    Cordiali saluti














    .

  • #8

    Michele (Friday, 02 November 2018 11:55)

    Ottimo!Articolo molto interessante complimenti! <a href=" *https://www.crearesito.info/quando-non-utilizzare-la-seo/></a>