© 2014-2020
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 su WordPress o altri CMS. Ci sono in giro tanti corsi validi e non c’è bisogno di un nuovo corso.

Lo scopo di questa guida è quello di dare un approccio strutturato alla creazione del tuo sito, una lista di concetti chiave, di priorità da seguire, decisioni da prendere, competenze da sviluppare, per poter creare da solo l’elemento di base della presenza online: il sito web.

Nel primo articolo, dedicato alla parte strategica, abbiamo visto che il sito web è fondamentalmente un progetto di marketing e deve essere l’espressione della tua strategia di posizionamento. 

Abbiamo proseguito con l’articolo dedicato alla scelta del nome a dominio, in cui ti abbiamo fornito le 7 regole essenziali da seguire per scegliere un nome memorabile.

Poi siamo passati all’argomento logo e visual identity, descrivendo l’approccio e il processo creativo necessario per dare una forma e un’impronta estetica alla personalità del tuo brand.

Proseguendo il nostro discorso ci siamo soffermati sulla progettazione dei contenuti, cioè la scelta di quali pagine e quali funzioni inserire nel sito, in base alle tue esigenze.

Finalmente, nel quinto capitolo abbiamo riflettuto su come impostare la struttura, l’architettura dei contenuti, detta anche Alberatura SEO.

Nel sesto capitolo abbiamo invece trattato la scelta del miglior software e del piano hosting più adatto al nostro sito web. 

Nel settimo capitolo abbiamo dato alcune regole da seguire nella stesura dei testi secondo i principi del content marketing.

In questa puntata infine ci dedichiamo alla scelta, trattamento e ottimizzazione delle immagini affinché siano un forte tratto della visual identity aziendale, espressa attraverso il sito.

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, oppure possiamo usare strumenti di pura compressione come FileMinimizer, ImageOptim, jStrip o Caesium. Quando possibile, scegliete il formato WebP, oppure optate per il Jpg, e solo in presenza di sfondi trasparenti o animazioni scegliete il .png o 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, magari per le grandi immagini o gli slider a tutta larghezza possiamo concederci file leggermente più grandi. Superando queste grandezze mettiamo a rischio la velocità di caricamento delle pagine.

Per chi utilizza WordPress esistono plugin di trattamento delle immagini che creano una versione compressa delle stesse e possono anche convertirle nel formato WebP.

Questi plugin funzionano bene, ma 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, senza utilizzare plugin di compressione. I plugin però sono una buona soluzione per quei blog, negli ecommerce o nei siti in cui le immagini sono gestite direttamente dagli utenti.

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
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.

14/09/2020
Come usare gli hashtag nei 7 social network del momento [video-riassunto]

Chi sta compiendo i primi passi nei social media ha intuito l'importanza degli hashtag. Ma vanno usati sempre allo stesso modo? La risposta breve è NO: Twitter, Facebook, Instagram, YouTube, Pinterest e TikTok usano gli hashtag in modi diversi. La nostra videoguida compatta.

17/08/2020
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

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
Guida al sito perfetto parte 6a: Software e Hosting

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