Immagini per siti web: come non violare il copyright e ottimizzazione SEO
Immaginare una comunicazione online senza immagini è impossibile. Le immagini nel tempo hanno ottenuto un’importanza sempre maggiore. Sono parte integrante del contenuto e pertanto è fondamentale prevederne l’ottimizzazione per la SEO.
Prima di analizzare come si ottimizza un’immagine e quali parametri vanno inseriti per renderla rintracciabile dai motori di ricerca è bene capire quali immagini possiamo usare e dove poterle prendere.
Licenze d’uso delle immagini e limitazioni del Copyright
Ti sei mai chiesto se le foto, infografiche ed immagini che inserisci sul tuo sito web e blog possono essere usate liberamente?
Se ancora non l’hai fatto non preoccuparti, non sei sicuramente il solo e nel corso di questo articolo avrai modo di capire come orientarti e come correre ai ripari.
Cosa dice la legge italiana in merito al diritto d’autore delle fotografie?
Innanzitutto stabilisce delle categorie e spiega come si applicano le norme relative al copyright in ogni caso. Vediamolo più approfonditamente.
Fotografie che rientrano nella categoria "Opere fotografiche"
Questa categorizzazione parte dal presupposto che ogni fotografia che sia stata realizzata in modo accurato per studio della scena, inquadratura, esposizione, ecc., in quanto opera creativa debba essere protetta da copyright. Il fotografo, come suo ideatore, ne è il detentore dei diritti (legge sul diritto d’autore - LDA).
le opere fotografiche e quelle espresse con procedimento analogo a quello della fotografia sempre che non si tratti di semplice fotografia protetta ai sensi delle norme del Capo V del Titolo II
Pertanto solo l’autore della foto può trarne un profitto attraverso la commercializzazione, la riproduzione e la diffusione.
Fotografie che rientrano nella categoria "Fotografia semplice"
Rientrano in questa categoria tutte le foto che ritraggono momenti e persone in modo naturale. Possono anche essere fotografie di riproduzione di opere d’arte e pellicole cinematografiche. Sono escluse, invece, le foto che ritraggono scritti, documenti, carte di affari, oggetti materiali, disegni tecnici, prodotti simili.
le immagini di persone o di aspetti, elementi o fatti della vita naturale e sociale, ottenute col processo fotografico o con processo analogo, comprese le riproduzioni di opere dell’arte figurativa e i fotogrammi delle pellicole cinematografiche
In questo caso le foto non sono protette dal diritto d’autore ma dal diritto connesso che, in ogni caso, permette al solo autore la riproduzione e la diffusione.
Non è sempre semplice riuscire a fare una netta distinzione tra le due tipologie di foto ma in entrambi i casi, perché il diritto d’autore o il diritto connesso siano validi, dev’essere riportata la citazione del nome del fotografo.
Pertanto, se vuoi utilizzare una foto protetta è necessario avere l’approvazione del fotografo.
Violazione diritti d'autore per immagini web: come evitarlo?
Quali soluzioni adottare per non incorrere nella violazione dei diritti d’autore delle immagini? Vediamo insieme tutti i modi in cui è possibile reperire immagini e foto da utilizzare per il proprio sito web o blog.
1. Immagini di propria produzione
Puoi realizzare da te le foto per il tuo blog o sito, in questo caso il copyright è tuo e non hai bisogno di citare fonti esterne o chiedere l’autorizzazione.
Ma attenzione a ciò che fotografi: ci sono soggetti che per loro natura sono coperti da copyright e richiedono, pertanto, un consenso esplicito:
- Edifici e ambienti che risultino essere di proprietà privata, come ad esempio musei, giardini e parchi, se non diversamente espresso dal proprietario.
- Opere d’arte in aree pubbliche, se facenti parte di installazioni permanenti.
- Opere d’arte (intese come opere creative) in generale, se rappresentano il soggetto principale della foto.
- Persone, se risultano in primo piano o come soggetto della foto.
- Prodotti di terzi.
2. Servizio fotografico esterno
Puoi affidarti ad un fotografo professionista per realizzare un servizio fotografico esclusivo. Questa soluzione è particolarmente adatta per le foto da inserire nelle pagine istituzionali, pagine dei servizi e dei prodotti del tuo sito web. Avrai il vantaggio di avere immagini originali e di proprietà.
3. Servizi online di acquisto immagini a pagamento
Puoi acquistare foto ed immagini online su portali appositi, come Shutterstock, Fotolia e Depositphotos. Con questo sistema eviti di porti problemi sul copyright. Solitamente in servizi come questi le foto sono “royalty free” e pertanto attraverso un contratto tra le due parti (venditore e acquirente) vengono stabiliti i termini di utilizzo che, di solito, permettono anche l’uso commerciale e senza limiti di tempo.
Ogni servizio è però a sé, quindi è importante leggere attentamente le clausole.
Shutterstock e Fotolia ad esempio mettono a disposizione entrambi due tipi di licenza a pagamento diverse, “Standard” e “Estesa”, con condizioni differenti:
- Shutterstock Licenza Standard ed Estesa
Shutterstock - dettagli licenza standard ed estesa
- Fotolia Licenza Standard ed Estesa
Fotolia - dettagli licenza standard ed estesa
Depositphotos, invece, suddivide le licenze in piani ad uso personale e piani per più utenti:
Depositphotos - dettagli licenze
4. Siti di raccolta immagini scaricabili ed utilizzabili
Per tenere aggiornato il tuo blog senza dover spendere soldi in canoni o acquisti singoli, puoi avvalerti di alcuni siti dove si possono scaricare gratuitamente foto ed immagini.
Anche in questo caso, però, attenzione alle indicazioni sul copyright.
Utilizzo di immagini dal sito Flickr
Flickr è uno dei siti di raccolta immagini, caricate da vari utenti, più utilizzato. Attraverso la ricerca puoi trovare immagini inerenti ad un determinato argomento. Nei filtri di ricerca è possibile selezionare il tipo di licenza che preferisci.
Alcune foto sono coperte da Copyright. Se nel dettaglio dell’immagine trovi, in basso a destra, il simbolo con indicato “Tutti i diritti riservati” vale il diritto d’autore, pertanto per poterla utilizzare è necessario possedere il consenso dell’autore.
Nel resto delle foto vale generalmente la Creative Commons License che, in base alle specifiche di ogni foto, limita alcuni utilizzi. In questo caso, sotto alla foto trovi alcuni simboli (in base alle limitazioni decise dall’autore) con la dicitura "Alcuni diritti sono riservati". Cliccando su questa dicitura si visualizza la pagina con le indicazioni specifiche delle limitazioni.
Selezionando nel filtro di ricerca l’opzione “Nessuna limitazione di copyright note” otterrai, invece, l’elenco delle immagini che puoi utilizzare sul tuo sito web o blog. Infatti, sempre in basso a destra, si trova l’indicazione “Di dominio pubblico”.
Utilizzo di immagini dal sito Freepick
Freepick è un altro sito di raccolta immagini, molto utile in caso ti servano immagini vettoriali o PSD. È possibile scaricare gratuitamente quelle identificate come categoria "Selection" ma è necessario attribuire sempre l’autore, come specificato in basso a destra nel dettaglio dell’immagine scelta.
Freepick - Attribuzione del copyright
In alternativa si può attivare un abbonamento Premium, mensile o annuo, per poter utilizzare le immagini senza problemi di copyright. Questo abbonamento permette di avere accesso alle immagini Premium e di non dover attribuire il copyright nemmeno nelle foto della categoria base “Selection”.
Freepick - comparazione licenze Gratis e Premium
5. Google immagini
Atra soluzione che puoi adottare è quella di affidarti alla ricerca per immagini di Google.
Attraverso la voce del menu “Strumenti” puoi accedere al filtro “Diritti di utilizzo”.
Google immagini - Filtro Strumenti > Diritti di utilizzo
Scegliendo “Contrassegnate per essere riutilizzate” Google ti mostrerà tutte le immagini non coperte da diritti d’autore. Per sicurezza è sempre bene controllare le specifiche della pagina in cui è richiamata la foto.
Come ottimizzare le immagini scelte per il tuo sito o blog
Passiamo ora alla parte più operativa: l'ottimizzazione in ottica SEO. Per ottimizzare al meglio un’immagine per il web si deve intervenire in due fasi.
1) Interventi in fase di elaborazione e salvataggio dell’immagine
-
Scelta immagini pertinenti al contenuto della pagina
L’ottimizzazione parte già dalla scelta dell'immagine stessa. Come ben saprai, lo scopo di Google è far trovare alle persone ciò che cercano senza fargli perdere tempo, quindi l’immagine deve rispondere alle aspettative dell’utente. Meglio prediligere immagini originali, piuttosto che le classiche immagini stock “già viste” ed in grado di trasmettere un’emozione o una sensazione positiva per fargli sentire di essere arrivato nel posto giusto.
-
Metodo di colore ed estensione
Usa immagini con il metodo di colore RGB e salva la foto in estensioni per il web: jpg, jpeg, png, gif.
-
Peso e dimensione dell’immagine
È importante utilizzare immagini di buona qualità ma attenzione al peso. L’utilizzo di immagini pesanti rallenta il caricamento della pagina web e questo sappiamo che influisce negativamente sull’ottimizzazione SEO. Pertanto, quando salvi un’immagine per il web, assicurati che la risoluzione sia impostata a 72dpi ed il peso non superi i 150kb. Anche le dimensioni influiscono sul peso della foto.
Non ci sono proporzioni standard ma in linea di massima puoi stare entro questi limiti:
- Immagini destinate a gallerie e slider full screen: 1400x800px.
- Immagini post per articoli: 1200x630px.
- Immagini in evidenza/thumbnails: 400x210px.
- Ridimensionare e salvare immagini ottimizzate per il web in Photoshop
Se hai il programma di elaborazione immagini Photoshop farlo è molto semplice.
1- Apri l’immagine.
2- Accedi dal menu in “Immagine > Metodo” e seleziona “Colore RGB” “8 Bit/Canale”.
Photoshop - impostazione metodo di colore RGB
3- Accedi al menu “Immagine > Dimensione immagine…”.
4- Assicurati che l’immagine della catena sia attivata, per mantenere le proporzioni tra altezza e larghezza, e imposta uno dei due parametri, inserendo le dimensioni sopra indicate e premi “OK”.
Photoshop - impostazione dimensione immagine
5- Per tagliare la foto accedi al menu “Immagina > Dimensione quadro”. Imposta Altezza o Larghezza che vuoi tagliare e premi “ok”. Oppure utilizza lo Strumento taglierina che trovi nella barra degli strumenti di sinistra e usa le maniglie per ritagliare le dimensioni che vuoi. Premi “Invio” dalla tastiera.
Photoshop - impostazione Dimensione quadro per ritagliare l'immagine
6- Accedi al menu “File > Esporta > Salva per Web (versione precedente)”
Scegli l’estensione (ad esempio “JPEG”) e scegli la qualità (ad esempio “media”) fino ad ottenere un giusto equilibrio tra qualità dell’immagine e peso in kb. Premi “Salva”.
Photoshop - Salvare immagine per il web
- Ridimensionare e salvare immagini ottimizzate per il web con Pixlr.com
Se non hai Photoshop puoi ottimizzare le tue immagini o foto altrettanto facilmente con pixlr.com
1- Apri l’immagine.
2- Accedi al menu “Immagine > Dimensione immagine…”; imposta le dimensioni e premi “ok”.
Pixlr - Ridimensionare l'immagine
3- Per tagliare la foto accedi al menu “Immagine > Dimensione documento”. Imposta Altezza o Larghezza che vuoi tagliare e premi “ok”.
Pixlr - Ritagliare l'immagine
Oppure utilizza lo Strumento taglierina che trovi nella barra degli strumenti di sinistra e usa le maniglie per ritagliare le dimensioni che vuoi. Premi “ok”.
5- Accedi al menu “File > Salva”
Scegli l’estensione (ad esempio “JPEG”) e scegli la qualità con la barra apposita fino ad ottenere un giusto equilibrio tra qualità dell’immagine e peso in kb. Premi “ok”.
Pixlr - Salvare l'immagine per il web
-
Metadati Exif (Exchangeable image file format)
All’interno delle foto sono salvati alcuni parametri descrittivi che si rivelano utili anche per i motori di ricerca. Come ad esempio l’attribuzione del copyright.
Per visualizzare e modificare i tag con Photoshop accedi al menu “File > info file...”
Photoshop - visualizzare dati Exif
-
Nome del file pertinente
Nel momento del salvataggio di una immagine o foto che sarà utilizzata in un sito web o blog è importante utilizzare una denominazione breve ma che sia in grado di far capire il contenuto dell’immagine.
È consigliato usare tutte lettere minuscole, senza l’uso di caratteri speciali e accenti e sostituire lo spazio con il trattino “ - “. Ad esempio se la foto ritrae il Rifugio Boè sulle Dolomiti, la foto potrà essere rinominata: “rifugio-boe-dolomiti.jpg”.
2) Interventi a livello di codice html
La seconda fase di ottimizzazione riguarda il richiamo dell’immagine all’interno del codice html. Ecco a cosa devi prestare attenzione:
-
Attributi alt e title
Assicurati di compilare attentamente l’alt (alternative text). Esso è la descrizione dell’immagine e serve per “spiegare” al motore di ricerca il contenuto dell’immagine e per i sistemi di lettura vocale per persone diversamente abili.
Il Title è la didascalia della foto. Per capirci è quella che appare al passaggio del mouse sulla foto. Può essere utilizzata la stessa dicitura per entrambe ma l’importante è utilizzare un limitato numero di parole. Ad esempio “Panorama del Rifugio Boè - Dolomiti”.
-
Didascalia dell’immagine
Aggiungere una didascalia all’immagine aiuta a inviare ulteriori informazioni al motore di ricerca. La didascalia può essere aggiunta con il tag “figcaption”.
<figure>
<img src="rifugio-boe-dolomiti.jpg" alt="Panorama del Rifugio Boé - Dolomiti" title="Panorama del Rifugio Boé - Dolomiti" width="1200" height="630">
<figcaption>Fig1. - Veduta del Rifugio Boè, Gruppo Sella - Dolomiti</figcaption>
</figure>
-
Metadati in sitemap
La sitemap xml è un protocollo utilizzato per segnalare a Google e ai principali motori di ricerca le pagine web e gli elementi che le compongono.
Esiste una sintassi apposita per le immagini:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
<url>
<loc>http://example.com/nome-pagina.html</loc>
<image:image>
<image:loc>http://nome-sito.com/nome-immagine01.jpg</image:loc>
<image:caption>Didascalia immagine</image:caption>
<image:geo_location>Vicenza,
Italy</image:geo_location>
<image:title>Titolo immagine</image:title>
<image:license>http://url-licenza-immagine.com</image:license>
</image:image>
</url>
</urlset>
Puoi trovare ulteriori informazioni sulla pagina ufficiale di google dedicata alle Sitemap di immagini.
Ulteriori approfondimenti li trovi nel post Immagini per il web: indicazioni per nome, peso, Alt e Title.
E tu che tipo di immagini utilizzi di solito? Le scatti tu o le acquisti? Cosa fai per ottimizzarle?
Raccontami la tua esperienza.