Le immagini rendono più leggere e carine le pagine in un sito web; sono essenziali poiché la loro mancanza appesantisce la pagina e porta il lettore ad abbandonarla.

Tuttavia, nell’utilizzarle, occorre avere presente alcuni concetti che riguardano la fonte, il diritto di utilizzo, la qualità e la pesantezza, ossia il numero di KB che devono avere (non ho scritto MB, non è un errore!).

Diritti di utilizzo

Il primo passaggio è, senza dubbio, la scelta dell’immagine appropriata. Non è certo facile scegliere una foto o un disegno che sia attinente all’argomento di cui si tratta.

Purtroppo, a complicare le cose, ci si mette la legge sul diritto d’autore. Erroneamente molti pensano che un’immagine, dal momento che è pubblicata su un sito, sia di pubblico dominio e, quindi, si possa scaricarla e utilizzarla a propria volta. Niente di più sbagliato! L’autore la pubblica per i suoi scopi, commerciali o meno, e non per il riutilizzo, tranne qualora sia espressamente dichiarato tale scopo.

La legge fa distinzione tra opere fotografiche e semplici fotografie. Un’opera fotografica ha un elemento artistico che la rende unica (es. un disegno, una foto scattata in uno studio fotografico, un fotoritocco evidente, …). Per poterla utilizzare è necessaria l’autorizzazione dell’autore, meglio in forma scritta per evitare problemi giuridici. Una foto semplice, per esempio di un luogo pubblico, può essere utilizzata liberamente, a meno che contenga il nome del fotografo, la data o l’autore di un’opera d’arte fotografata: in questo caso valgono le regole applicate all’opera fotografica.

Se si pubblicano foto o disegni propri è bene contrassegnarli e specificarne i diritti di utilizzo in una pagina apposita (Copyright) linkata in tutte le pagine del sito.

Ci sono diversi siti che offrono immagini gratuite o a pagamento. Tuttavia, quando si sta per scaricare un’immagine free, è bene capire quali diritti di utilizzo abbia, cioè se è utilizzabile liberamente, solamente per scopi non commerciali, se va citato l’autore, … .

Qui di seguito c’è un elenco di siti dove è possibile scaricare immagini gratuitamente; alcuni offrono immagini di tutti i tipi, altri no.

Sui siti gratuiti spesso la ricerca è più difficile. Se, ad esempio, voglio rappresentare la depressione, devo avere già un’idea di quale elemento la rappresenti meglio. Se penso di mettere una persona triste cercherò “tristezza”, “triste”,… Devo usare le parole più comuni. Si può fare una prima ricerca su Google Immagini, vedere i risultati, e fare un’altra ricerca sugli altri siti, ispirata alle immagini più attinenti trovate in precedenza, mettendo la parola chiave più specifica.

Elaborare l’immagine scaricata

Trovata l’immagine giusta potrebbe essere necessario aggiustarla o farne un bel ritocco.

Il programma per eccellenza adatto allo scopo è Adobe Photoshop, oggi disponibile in versione Creative Cloud, usufruibile pagando un abbonamento mensile di circa 24€. Ovviamente sono costi alti per una persona non addetta ai lavori. Vi sono alternative gratuite come Gimp, che funziona molto bene ed è completamente gratuito, oppure ci sono dei tool online, anche se, personalmente, prediligo i programmi installati nel proprio computer per questo genere di operazioni.

In fase di lavorazione le immagini devono essere ad alta risoluzione; per esempio se l’immagine, nel sito, sarà larga 600px conviene che l’originale sia almeno il doppio, poi tutto dipende da quali ritocchi vanno fatti.

Un aspetto fondamentale per la resa ottimale dei colori è la scomposizione dell’immagine in RGB, ossia nei tre colori primari della luce, rosso, verde e blu, e non in CMYK, cyan, magenta, giallo, nero, i colori primari degli inchiostri.

Salvataggio delle immagini

Trattandosi di pagine web, che vengono caricate da differenti dispositivi con differenti tipi di connessione, bisogna prestare attenzione al peso delle immagini onde evitare che la pagina venga appesantita eccessivamente e si reindirizzi in tempi troppo lunghi. È risaputo che oggi l’utente medio attende al massimo 3 secondi prima di vedere la pagina, poi, se non vede nulla, la abbandona.

Normalmente le immagini non devono superare i 100KB, si può arrivare al massimo a 200 per quelle molto grandi. In caso ci sia la necessità di mostrare una foto a grandezza intera con molta nitidezza (per esempio in un sito di fotografia) è bene mettere nella pagina una piccola anteprima, su cui cliccare per vedere l’immagine a dimensione intera: in questo modo la risorsa pesante sarà caricata solamente su richiesta e non ostacola il rendering di tutta la pagina. Inoltre l’html 5.1 ha introdotto la possibilità di specificare risorse diverse, per la stessa immagine, per differenti larghezze di schermo.

Con alcuni CMS, come WordPress, per ogni immagine caricata ne vengono generate altre copie con dimensioni più piccole: è un bel vantaggio perché consente, di volta in volta, di scegliere un file da allegare più o meno pesante in base alle necessità. In ogni caso è inutile uploadare sul server un’immagine larga 2000px quando deve essere visualizzata a 600, al massimo (per esempio l’anteprima di un articolo): il server è un computer e, come il personal computer, ha un disco fisso che si rallenta quando è pieno di risorse pesanti, col conseguente rallentamento del sito.

Descrizione delle immagini nel sito: gli attributi alt e title

Quando leggiamo un libro o una rivista vediamo delle foto e ci piace leggere una didascalia che descrive cosa viene rappresentato. La stessa cosa vale nel web, sopratutto per i motori di ricerca.

Ogni immagine, in una pagina, è bene che abbia l’attributo alt, che contiene il testo da stampare a video qualora ci siano problemi a caricarla. Altra buona abitudine è impostare title, ossia il testo leggibile quando il puntatore del mouse è sopra all’immagine.

Su WordPress alt può essere impostato nella libreria media, nel campo Testo Alternativo: all’inserimento del tag <img>, nella pagina, verrà generato anche alt con il testo scritto nel campo apposito. Non avviene altrettanto per title, che va scritto a mano nel tag.

Scrivere alt e title è importante perché:

  • vengono letti dai motori di ricerca, i quali penalizzano i siti fatti da chi non ha l’abitudine di metterli;
  • alt è leggibile qualora l’immagine non si carichi;
  • sono utili per i programmi di lettura assistita per gli ipovedenti e i non vedenti.


Share This