La corretta gestione delle immagini in un sito web è uno dei fattori primari per il raggiungimento dell'obbiettivo che il sito si è prefissato, che sia vendere un prodotto in un ecommerce, o avere un blog letto da molti utenti.
La diffusione dei social network non ha aiutato molto l'utente medio nel capire i meccanismi standard con cui trattare un immagine. Un esempio che faccio sempre è l'utilizzo dei cellulari per caricare foto su Facebook.
Un cellulare medio ormai ha fotocamere decisamente potenti che creano immagini mediamente sui 5 Megabite, una volta che vengono caricate su Facebook vengono ridimensionate e compresse per stare mediamente al di sotto dei 100kbite perdendo inevitabilmente qualità senza che l'utente stesso possa essere parte attiva del processo di modifica dell'immagine.
Molti siti aziendali dove i contenuti vengono aggiornati autonomamente all'interno dell'azienda vengono settati in maniera simile a Facebook per non dare "troppi pensieri" all'utente, si vedono quindi in giro migliaia di siti con immagini mediocri e con bassa qualità.
Oggi voglio condividere con te 5 consigli sulla gestione delle immagini in un sito web, iniziando con alcuni consigli tecnici e finendo con quelli creativi/legali.
1) Prepara le immagini da solo, non far fare tutto al tuo CMS
Se il tuo sito è stato realizzato con Wordpress o Joomla o Drupal o qualsiasi altro CMS che ti permetta di aggiornare i contenuti, devi prendere parte al processo che ti porterà ad inserire l'immagine nel tuo sito, non devi lasciar fare tutto il lavoro a lui, fargli decidere come comprimere le immagini e quale qualità usare. Dovrai preparare tu le immagini in modo da avere un buon compromesso tra qualità e fruibilità.
2) Utilizza la giusta risoluzione, la giusta dimensione e il giusto peso.
Le fotocamere di solito sono settate per scattare foto adatte alla stampa, quindi immagini con risoluzione a 300dpi, un monitor lavora con una risoluzione di 72dpi, utilizzare immagini di risoluzione superiore non serve a nulla.
Stesso discorso per la grandezza delle immagini, una fotocamera digitale di solito crea dei file con minimo circa 3200 pixel per il lato lungo della foto, un monitor a 24 pollici ha una risoluzione massima dello schermo di 1920 pixel , lo stesso vale per una televisione fullhd a 1080p, inserire in un sito un'immagine con risoluzione superiore alla massima del monitor non la farebbe visualizzare tutta contemporaneamente, un buon compromesso in considerazione dei vari device presenti sul mercato è avere immagini con il lato lungo di massimo 1200 pixel.
Per quanto riguarda il peso delle immagini bisogna considerare che una fotocamera digitale produce immagini da minimo circa 5/6 mega, avere un sito con solo 3 foto di queste dimensioni comporterebbe tempi di caricamento biblici soprattutto se lo si sta visualizzando da uno smartphone con connessione 3g o 4g, non oso pensare a una pagina web con una galleria di 50 immagini, sarebbe impensabile anche per le connessioni più veloci. Occorre quindi prepararle a dovere.
Ti faccio un esempio pratico con una mia vecchia foto:
Eseguii questo scatto con fotocamera Nikon D80, non recentissima e con risoluzione minore rispetto a molti smartphone attuali, la rielaborai in Photoshop per ottenere un file pronto per la stampa di circa 11 megabite, opportunamente preparata per il web , rendendola di dimensioni 1000*662px a 72dpi, ora ha un peso al di sotto dei 100 kilobite e viene caricata velocemente dal browser.
Puoi utilizzare molti software per ottimizzare le tue immagini, Photoshop, LightRoom, Gimp...
Se vuoi testare la velocità del tuo sito web, ti consiglio di leggere questo post.
3) Utilizza il giusto formato di immagini.
Nel web essenzialmente i formati più utilizzati sono 3 : jpeg, png e gif. Per velocizzare il sito è oppurto utilizzare il giusto formato per un determinato scopo.
Il formato jpeg è quello più frequente, si usa spesso per le fotografie, per le illustrazioni, per i banner.
Il png è un formato valido, si utilizza in qualche caso in sostituzione dei jpeg ma personalmente lo sconsiglio, la mia foto salvata in png pesa circa 850kilobite contro i 100 del formato jpeg. Il png di solito si usa in casi in cui bisogna avere uno sfondo trasparente, magari in qualche logo o icona.
Il gif è un formato che è stato usato tantissimo dagli albori del web fino a qualche anno fa, gestiva gli sfondi trasparenti e veniva usato per creare immagini animate, negli ultimi anni è tornato alla ribalta tramite una tecnica particolare che si chiama Cinemagraph che permette di creare foto animate di grande effetto.
Aggiornamento Settembre 2020:
Ho appena pubblicato un articolo che fa una panoramica sul formato WebP dove ti spiego cos'è e come utilizzarlo nel tuo sito web, lo trovi a questo link.
4) Utilizza immagini originali e creative
Ricorda che un visitatore medio in circa 5 secondi, se non è attratto dalla tua pagina web, smetterà di visionarla per dirigersi da un altra parte. Le immagini sono una componente importante per attrarre l'utente che può essere un tuo potenziale cliente. Non inserire contenuti, soprattutto immagini, solo perchè lo devi fare. Utilizza immagini creative e di impatto, cerca di utilizzare immagini originali, creale tu in modo da avere un contenuto unico che non ritroverai su altri siti.
5) Non utilizzare immagini altrui illegalmente o senza citare le fonti
In alcuni casi non è possibile creare immagini originali e le si cercano su Google, bisogna considerare che queste immagini potrebbero essere protette da diritto d'autore e un utilizzo potrebbe portare a problemi giuridici. Si può tranquillamente superare il problema utilizzando a dovere Google Image Search.
Tramite gli strumenti di ricerca si possono filtrare le immagini presentate da Google per visualizzare ad esempio quelle contrassegnate per essere riutilizzate, o quelle che possono essere riutilizzate in maniera non commerciale.
In questo modo si dovrebbero bypassare i problemi legali, ma se in un sito vengono inserite immagini altrui e bene citare le fonti magari con una piccola didascalia.
Questi sono i miei 5 consigli sulla gestione delle immagini in un sito web, sia dal punto di vista tecnico che creativo o legale, possono aiutarti a raggiungere gli obiettivi prefissati per il tuo sito.
