© 2014-2021
NUwebstudio
P. IVA 08827630966
Privacy Policy

Tutto sulle immagini per il sito web (Guida al sito web, parte 8)

In questo articolo vediamo come scegliere le immagini per il sito web, dove acquisirle, come ottimizzarle per il web e come posizionarle sui motori di ricerca

Le immagini, e i media in generale, sono l'ingrediente magico che cattura l'attenzione iniziale dei visitatori di un sito e ne migliora l'esperienza durante tutta la navigazione, contribuendo all'efficacia del sito.

In questa ottava puntata della Guida al Sito Web vediamo come e dove scegliere le immagini per il sito, trattarle, ridurle alle giuste dimensioni e infine ottimizzarle al meglio.

La Guida al Sito Web

La guida al sito web non è una guida tecnica su come costruire un sito con WordPress o altri CMS. Per questa parte ci sono in rete moltissime risorse valide a cui vi rimandiamo.

Lo scopo di questa guida è quello di fornire un approccio strutturato alla creazione di un sito, una lista di concetti chiave, di priorità, decisioni, competenze, utili sia per affidare ad un'agenzia o per creare in proprio l’elemento di base della presenza online: il sito web.

In questa puntata ci dedichiamo alla scelta, trattamento e ottimizzazione delle immagini e della grafica. L'obiettivo da raggiungere è duplice:

  • rendere immagini e grafiche un forte tratto distintivo della visual identity aziendale
  • trattare i materiali nel modo migliore affinché non compromettano la velocità di caricamento delle nostre pagine.

Partiamo!

Fase 8: inserire immagini e grafica

L'importanza delle immagini in un sito web è chiarissima agli imprenditori che gestiscono un e-commerce oppure operano in settori come viaggi, beauty, food, moda. Chi invece opera in settori meno "visuali" - ad esempio la plastica, la metalmeccanica, la carpenteria, eccetera - spesso è portato a pensare che nel suo sito le immagini hanno un ruolo marginale e non meritano una progettazione accurata.

Se vi ritrovate in questo secondo gruppo però, vi suggeriamo di ripensarci: proprio perché non esistono immagini perfette ma solo immagini giuste per il target, anche in settori industriali o perfino nei settori immateriali come la consulenza o i servizi, le giuste immagini e grafiche contribuiscono ad affermare la vostra Visual Identity, migliorano l'esperienza utente e contribuiscono non solo alla conversione ma anche al posizionamento organico. Preparatevi a sorprendervi.

Le immagini originali

Per usare le immagini come elemento di identità aziendale, le foto migliori sono sempre quelle originali, sia per il web che per i materiali stampati.

NUwebstudio può creare per voi un servizio fotografico completo di ritocco e ottimizzazione, ma è ancora meglio se già disponete di un archivio fotografico proprietario costruito nel tempo: le foto originali, fatte con abilità, rendono il sito davvero unico e donano alle pagine web un look "vero" ma curato, che ispira affidabilità e rende il sito più piacevole da visitare.

foto originali di un'industria chimica
un esempio di foto originali dal sito di una nota azienda chimica

Fotografate dunque i vostri prodotti, trovate le migliori inquadrature e le luci più adatte ad esaltarli. Mostrate alcuni aspetti della vostra Azienda come le attività di ufficio, le riunioni, le operazioni con macchinari o attrezzi. Invitate i vostri collaboratori a partecipare alle foto, ricostruite scene tipiche del vostro lavoro e riproducetele nelle foto che scattate. Attenzione però: anche le foto cosiddette "spontanee" in realtà vanno progettate con cura altrimenti potrebbero cadere nel ridicolo: per non rischiare è meglio affidarsi a professionisti specializzati.

esempio di foto di dettaglio di un prodotto di carpenteria (credits: bettoniservind.it)
un esempio di foto originali integrate in un nostro progetto web

Se decidete di investire in foto originali, con il tempo costruirete un ottimo archivio fotografico utile e subito disponibile per tutte le pubblicazioni di marketing, compreso il sito web.

Scaricare immagini per il sito web

Se non avete un archivio fotografico originale, o se volete integrarlo con qualche foto qua e là, potete scaricare le immagini da appositi siti di "immagini stock", gratuiti o a pagamento. Al giorno d'oggi vi sono moltissimi siti e dispongono di una scelta di milioni di foto, opere grafiche e video per tutte le esigenze.

Nella scelta delle foto non fermatevi alle foto più scaricate, esplorate gli archivi e fate ricerche con parole associate sia direttamente che indirettamente all'argomento, soprattutto abbiate cura di scegliere immagini non banali e non sovrautilizzate.

Siti di immagini stock a pagamento

Ecco una piccola lista, non esaustiva, di siti con immagini stock a pagamento

  • stock.adobe (.com)
  • shutterstock (.com)
  • gettyimages (.it)
  • istockphoto (.com), parte di Getty Images
  • depositphotos (.com)
  • dreamstime (.com)

Siti di immagini stock gratuite

Esistono anche banche fotografiche gratuite da cui scaricare foto di alta qualità per i vostri materiali.

  • Freedigitalphotos (.net)
  • Freeimages.com
  • Unsplash (.com): foto molto suggestive
  • Freepik (.com): risorsa molto utile soprattutto per immagini vettoriali
  • Pixabay (.com): aggregatore e motore di ricerca di foto da siti diversi
  • Pexels (.com) come Pixabay, è un aggregatore e motore di ricerca di foto da diversi siti.

Infine citiamo The Stocks (.im), una raccolta di link a molti siti di immagini, video e grafica stock, gratuiti e a pagamento. Attenzione: può causare assuefazione.

Attenzione al copyright

Se siete fra gli imprenditori che scaricano e inseriscono nel sito foto da Google senza preoccuparsi se sono protette da copyright, sappiate che utilizzare le foto senza licenza è un reato.

Quando cercate foto su Google per utilizzarle nel vostro marketing, quindi, fate attenzione a usare il filtro "diritti di utilizzo" per evidenziare solo le immagini scaricabili e le loro rispettive licenze di utilizzo.

Uno strumento di marketing importante come il sito web non merita di contenere foto "pirata", inoltre se considerate la grande disponibilità di materiale anche gratuito utilizzabile legalmente, non vale la pena di correre il rischio di dover rimuovere le immagini dal sito e pagare un'ammenda per aver usato foto senza averne il diritto.

I formati grafici giusti per il sito web

Le immagini digitali, come forse sapete, possono avere diversi formati. Per aiutarvi a scegliere i formati giusti è necessario scendere un pochino in dettagli tecnici.

Prima di tutto distinguiamo le due macro-famiglie:

  • immagini vettoriali
  • immagini raster o bitmap

Le immagini vettoriali sono composte da punti e linee che compongono diverse forme geometriche; ad ogni forma e ogni linea si possono attribuire colori e sfumature. Le forme vettoriali si possono ingrandire a piacere senza perdita di nitidezza mantenendo i file molto leggeri.

I vettoriali sono usati soprattutto per lavorare con i caratteri, i loghi, le grafiche di presentazione, ma quando si tratta di usarli in un sito web vengono quasi sempre trasformati in un formato raster, che descriviamo qui di seguito

Le immagini raster (o bitmap) sono composte da minuscoli pixel di colore. Fanno parte di questo gruppo i file .jpg, .png e .gif.

I file .jpg sono i più usati nelle fotografie a colori, il .png è usato nella grafica e negli oggetti scontornati con sfondo trasparente, il .gif gestisce le trasparenze e può essere animato.

Per questi tipi di file la dimensione conta parecchio: più grandi sono le immagini (cioè più pixel contengono), più pesante sarà il file relativo. Spesso le immagini di una fotocamera hanno una dimensione di 6mila per 4mila pixel e il file corrispondente può raggiungere anche i 10 megabyte. Per questo motivo, per inserire un'immagine in una pagina web è necessaria la sua compressione.

Oltre ai formati grafici già visti, che vengono usati sia per la stampa che per il web, esiste un formato più recente specifico per il web, non incluso nella figura qui sopra: il formato WEBP.

Il formato WebP è stato creato da Google appositamente per rendere più veloci le pagine web, e può gestire immagini con sfondo trasparente e immagini animate. Essendo un formato recente è supportato dalle ultime versioni dei browser più utilizzati, ma non dalle versioni precedenti.

Trasformate le immagini in elementi di Visual Identity

Nel progetto del vostro sito web c'è sicuramente un'importante componente che riguarda la vostra Brand Identity, e ne abbiamo parlato nel relativo articolo. Se questa è stata ben progettata, tutte le immagini, anche quelle da inserire nel sito, dovranno avere un look-and-feel in armonia con il vostro logo e colori, in modo da essere sempre riconoscibili.

La personalizzazione di una immagine si esegue con le apposite applicazioni di trattamento fotografico come Photoshop o Affinity Photo, oppure con app grafiche online come Canva, PicMonkey o Crello, deve essere fatta sull'immagine a grandezza originale, per non perdere di qualità durante il processo di manipolazione. Le immagini vengono ritoccate, ricolorate, regolate con l'aumento o la diminuzione di esposizione, luminosità, contrasto, colore, e così via. Sia le foto aziendali originali, sia quelle acquistate, devono diventare pienamente vostre e parlare di voi.

Un esempio? c'è chi usa soltanto foto in bianco e nero, chi le colora con un'unica sfumatura nei colori aziendali, chi utilizza solo colori chiari e pastello, chi inserisce un motivo grafico comune a tutte le foto. La cosa importante è che le foto, come i testi, parlano del vostro business e contribuiscono ad affermare la vostra identità.

Ridimensionare le immagini: quali dimensioni scegliere

I file delle immagini sono spesso colpevoli di rallentare il caricamento della pagina web e, come forse sapete, Google privilegia il posizionamento dei siti veloci da caricare anche dal cellulare.

Per questo motivo è necessario ridurre ogni immagine fino ad una misura in pixel che sia adatta allo spazio che occuperanno nella pagina web.

Per ridimensionare le immagini potete quindi seguire queste regole generali:

Dimensioni delle immagini per sito in versione Desktop

  • una foto da inserire in un trafiletto o nella barra laterale dovrà essere ridotta fino a 300-400 pixel di larghezza
  • una immagine che occuperà l'intera larghezza di un articolo o una pagina potrà essere ridotta a 800-1000px di larghezza, o appena più largo se nella pagina non vi è una barra laterale
  • una immagine da usare come Hero o in uno slider dovrà avere un larghezza intorno ai 1400 - 1600px.

Dimensioni delle immagini per sito in versione Mobile

Non sempre il design del sito permette di differenziare le immagini tra la versione desktop e quella mobile, ma date le dimensioni molto diverse di uno schermo desktop rispetto ad uno mobile, questo elemento dovrebbe essere sempre incluso nella progettazione di un buon sito web.

Quasi sempre la versione del sito per il cellulare non utilizza un design a più colonne, al contrario incolonna i contenuti in una sola colonna e pertanto non c'è differenza nelle dimensioni delle immagini per una Hero, uno slider o il corpo di un articolo.

Giacché le dimensioni degli schermi cellulari si stanno allargando è buona norma utilizzare immagini intorno ai 700-800px di larghezza.

Nel ridurre le dimensioni è necessario fare attenzione anche alle proporzioni delle immagini in base a dove dovrete usarle. Per cambiare proporzioni ad una immagine bisogna sempre operare un ritaglio, facendo attenzione a non ritagliare il soggetto principale: in questo modo eviterete l'effetto "stiratura" che, per fortuna, è sempre meno presente sul web.

Comprimere le immagini per il web

Come abbiamo detto in precedenza, nei siti web si usano soprattutto immagini raster che, se usate in originale, rallentano talmente il caricamento delle pagine da risultare ingestibili.

Per questo, dopo aver ridotto le dimensioni delle immagini, dobbiamo anche comprimerle allo scopo di ridurre ulteriormente il peso del file.

Esistono due metodi di compressione:

  • con il metodo lossless l'immagine viene compressa senza perdita di qualità ma il suo file risulta più pesante
  • con il metodo lossy il file può essere maggiormente compresso con una proporzionale perdita di qualità.

Il formato .jpg è quello più comprimibile con il metodo lossy ed è quindi il più leggero e il più adatto per le foto: nelle foto a colori la perdita di qualità è quasi impercettibile all'occhio umano.

Il formato .png e il formato .gif, per la loro natura, supportano meglio la compressione lossless e rimangono più pesanti rispetto al .jpg. Questi formati però sono necessari per utilizzi particolari: il formato .png è perfetto per le immagini "scontornate" con sfondo trasparente, mentre il .gif è il formato delle grafiche animate. Inoltre il .png è indicato per le opere grafiche, dove la compressione lossy renderebbe la perdita di qualità troppo evidente.

Infine, il formato WebP è stato creato da Google appositamente per rendere più veloci le pagine web, supporta entrambi i metodi di compressione e può gestire immagini con sfondo trasparente e immagini animate. Essendo un formato recente è supportato dalle ultime versioni dei browser più utilizzati, ma non dalle versioni precedenti.

Le immagini possono essere compresse utilizzando gli stessi strumenti di fotoritocco descritti in precedenza, In aggiunta a questi, ecco qualche strumento di compressione da installare nel proprio computer o da utilizzare online:

  • File Minimizer
  • ImageOptim
  • jStrip
  • Caesium
  • Compressor.io
  • Squoosh.app
  • Shrinkme.app
  • Kraken.io
  • Imagify.io
  • TinyJPG | TinyPNG

Quando possibile, scegliete il formato WebP, oppure optate per il Jpg. Il formato .png è adatto solo in presenza di sfondi trasparenti e grafica scritta o con pochi colori, dove è molto importante la definizione. In caso di grafiche animate scegliete il .gif.

jpgpnggifwebp
compressione lossless🟢🟢🔴🟢
compressione lossy🟢🟢🔴🟢
trasparenza🔴🟢🟢🟢
animazione🔴🔴🟢🟢
Un riepilogo delle caratteristiche dei diversi tipi di file per il web

CONTROLLARE IL PESO del file: nel comprimere le immagini dovremmo sempre porci come obiettivo quello di ottenere file di max 100KB, anche per le immagini più grandi. Le immagini piccole devono pesare ancora meno (50-70KB). Superando queste grandezze mettiamo a rischio la velocità di caricamento delle pagine.

Le immagini particolarmente dettagliate e ricche di colori diversi sono sicuramente più difficili da comprimere mantenendo una qualità decente e per questo motivo sconsigliamo il loro uso nelle immagini hero oppure come sfondi negli slider. Questi di solito hanno titoli e link in sovrimpressione e l'eccessivo numero di colori sullo sfondo rende il testo meno leggibile.

Per chi utilizza WordPress esistono plugin di trattamento delle immagini che creano una versione compressa delle stesse. I plugin sono comodi per i seguenti motivi:

  • hanno potenti algoritmi di compressione che possono essere complementari a quelli dei programmi di fotoritocco
  • possono convertire le immagini nel formato WebP e servirle nel formato giusto in base al browser di ogni utente
  • possono modificare il codice adattando le dimensioni di ogni immagine in base allo spazio che occupa nel design della pagina

D'altra parte i plugin aumentano il carico di lavoro del vostro hosting poiché

  • gli originali caricati hanno dimensioni piene e il plugin creerà le copie compresse, consumando più spazio disco
  • la compressione aumenta l'uso delle risorse hardware e se avete molte immagini sul sito, in alcuni casi l'hosting potrebbe imporvi di passare ad un piano più costoso.

I plugin più noti, inoltre, comprimono gratuitamente un numero limitato di immagini, dopodiché diventano a pagamento.

Qui in NUwebstudio, quando progettiamo un sito web, adattiamo e comprimiamo le immagini prima di caricarle nel sito. In alcuni progetti però aggiungiamo anche un plugin di compressione, soprattutto quando il cliente continuerà a gestire autonomamente gli aggiornamenti

Tra i tanti plugin disponibili ne citiamo due, testati direttamente nei nostri progetti web e quindi garantiti da NUwebstudio (*):

  • ShortPixel (gratis fino a 100 immagini / mese)
  • Imagify (gratis fino a 25MB di immagini / mese).

Ottimizzate le immagini per la SEO

Se le immagini del sito raccontano la vostra azienda, i vostri prodotti e le vostre realizzazioni, non dovete rinunciare all'opportunità di posizionarle nei motori di ricerca aumentando le probabilità di traffico organico, attraverso l'ottimizzazione SEO. Vediamo come:

  • nome file: si sa che i tipici nomi file delle foto sono semplicemente numerici oppure sono sigle astratte. Per dare significato alla foto, cambiate il nome file con uno descrittivo separato da trattini e aggiungete anche il nome del vostro sito in coda.
  • alt text o "testo alternativo": il testo alternativo è quel testo che viene mostrato dal browser nello spazio di una foto, mentre questa non è ancora stata caricata nella pagina. Inoltre viene usato dai lettori di pagine web per i visitatori non vedenti. Inutile dire che i motori di ricerca usano quel testo per classificare la foto e per proporla sulla base delle ricerche ritenute più pertinenti.
  • attributo "title": l'attributo Title o Titolo permette di "titolare" la foto e appare per default quando si passa il mouse sulla foto stessa. In una galleria di immagini il titolo può essere utile come descrizione della foto che si sta guardando.

Conclusioni

La scelta delle giuste immagini e grafiche per il sito web può influenzare direttamente il tempo di permanenza nel sito e quindi, di riflesso, anche il suo posizionamento organico e, a lungo andare, può aiutare ad attirare più visitatori e più clienti potenziali.

Le immagini originali in genere vanno preferite a quelle di archivio perché più autentiche, ma solo se sono di ottima qualità. Per questo motivo è meglio affidarsi a professionisti specializzati.

Sia le immagini originali che quelle di archivio vanno manipolate per incorporarle nella visual identity dell'azienda e, da ultimo, vanno trattate nei modi che abbiamo specificato, affinché non pesino sul caricamento della pagina web che le ospita.

Anche il lavoro sulla acquisizione e preparazione delle immagini, quindi, richiede tempo che non deve e essere affatto sottovalutato.

(*) Nota a margine: NUwebstudio non ha in corso nessuna affiliazione con nessuno degli strumenti citati in questo articolo

Approfondimenti

Mentre la scelta delle inquadrature e la post-produzione delle immagini si basa sul talento artistico e pertanto non è inquadrabile in regole codificate, la loro compressione è un aspetto puramente tecnico nel quale è possibile fornire istruzioni e informazioni chiare. Dedichiamo quindi la sezione approfondimenti ai software di compressione delle immagini, e al nuovo formato WebP.

La condivisione è crescita

ISCRIVITI alle NUz

Il Digital Marketing per il tuo biz: guide operative e notizie selezionate, una volta al mese nella tua inbox
ISCRIVITI QUI
CONSIGLIATO
16/11/2020
Il sito veloce, senza codice

La giusta sequenza per ottenere un sito veloce con Wordpress: impostare correttamente i test di velocità, leggere e interpretare i risultati del test, utilizzare le tecniche e i plugin che permettono di migliorare la velocità del sito senza leggere o scrivere codice.

26/10/2020
I siti web attivi nel mondo? Quasi 200 milioni

I siti web attivi nel mondo sono quasi 200 milioni. E' ancora possibile emergere su Google in un World Wide Web così affollato? Come può una PMI gettare le basi per uno sviluppo digitale nel 2020.

21/09/2020
L'Impresa online: sito web o profilo social? come scegliere.

La semplicità e la diffusione dei social network induce alcune piccole aziende a puntare tutta la propria strategia online sui canali social trascurando il sito web. Fanno bene o fanno male? Scopriamolo in questo articolo.

Correlati

21/09/2020
L'Impresa online: sito web o profilo social? come scegliere.

La semplicità e la diffusione dei social network induce alcune piccole aziende a puntare tutta la propria strategia online sui canali social trascurando il sito web. Fanno bene o fanno male? Scopriamolo in questo articolo.

29/10/2019
Guida al sito perfetto parte 7a: scrivere i testi

Le regole di base, sperimentate con successo da molti marketer, per rendere efficaci i testi del tuo sito web e del tuo blog.

19/08/2019
Scegliere software e hosting per il sito web (Guida al sito web, parte 6)

Come scegliere il sistema e la piattaforma giusti, tra decine di sistemi gratuiti e a pagamento, per creare e sostenere il tuo sito web

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram