Le immagini e i media in generale sono l’ingrediente magico che cattura l’attenzione iniziale dei visitatori di un sito e aiuta a mantenerne l’interesse durante tutta la navigazione, contribuendo all’efficacia del sito.
In base al tipo di sito web in lavorazione le immagini possono essere elaborate insieme al testo, per esempio quando si realizzano le schede prodotto per un e-commerce. Nella nostra sequenza di lavorazione del sito le immagini sono le ultime in ordine di tempo, ma non certo per importanza. In questa puntata della Guida al Sito fai da te vediamo come e dove scegliere le immagini per il sito, trattarle, ridurle alle giuste dimensioni e infine ottimizzarle al meglio.
La Guida al Sito fai da te
Questa è l’ottava puntata della nostra Guida definitiva al sito fai da te, una guida in otto parti rivolta a chi vuole creare il proprio sito web in autonomia.
Se ti interessano anche gli altri aspetti della creazione del tuo sito ti consigliamo di iniziare dal primo articolo e leggere le puntate nell’ordine. Insieme ti danno un metodo, una struttura per fasi ragionate che puoi seguire passo passo.
► Preferisci commissionare il sito a chi è del mestiere? Scopri il nostro servizio oppure leggi qui come commissionare un sito web professionale.
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 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 ti ritrovi in questo secondo gruppo però, ti 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 Visual Identity della tua Azienda, migliorano l’esperienza utente e contribuiscono non solo alla conversione ma anche al posizionamento organico. Preparati a sorprenderti.
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 la tua azienda un servizio fotografico completo di ritocco e ottimizzazione, ma è ancora meglio se già disponi 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.
Fotografa dunque i tuoi prodotti, trova le migliori inquadrature e le luci più adatte ad esaltarli. Mostra alcuni aspetti della tua Azienda come le attività di ufficio, le riunioni, le operazioni con macchinari o attrezzi. Invita i tuoi collaboratori a partecipare alle foto, ricostruisci scene tipiche dell’ambiente di lavoro e riproducile nelle foto che scatti. 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.
Se decidi di investire in foto originali, con il tempo costruirai 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 possiedi un archivio fotografico originale, o se vuoi integrarlo con qualche foto qua e là, puoi 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 fermarti a quelle più scaricate, esplora gli archivi e fai ricerche con parole associate sia direttamente che indirettamente all’argomento, soprattutto abbi 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 tuoi materiali di marketing:
- 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 sei fra gli imprenditori che scaricano e inseriscono nel sito foto da Google senza preoccuparsi se sono protette da copyright, sappi che utilizzare le foto senza licenza è un reato.
Quando cerchi foto su Google per utilizzarle nel tuo marketing, quindi, fai sempre 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 consideri 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 sai, possono avere diversi formati. Per aiutarti 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 immagini vettoriali usate nei siti web hanno quasi sempre l’estensione .svg (scalable vector graphics). 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 icone, le grafiche di presentazione; possono essere inseriti all’interno dei siti web ma richiedono maggiore attenzione poiché, essendo praticamente dei pezzi di codice, possono venire contaminati con malware. Esistono comunque degli strumenti per “purificare” il codice dei file prima o durante il caricamento sul sito. I siti che forniscono grafiche vettoriali permettono comunque di scaricarle già convertite in 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, i file .png sono usati soprattutto per gli oggetti scontornati con sfondo trasparente e per le grafiche. I file .gif gestiscono anch’essi gli sfondi trasparenti e possono essere animati.
Nelle immagini raster la dimensione conta parecchio: più grandi sono le immagini (cioè più pixel contengono), più pesante sarà il file. 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.
Trasformare le immagini in elementi di Visual Identity
Nel progetto di un sito web la componente relativa alla Brand Identity è sicuramente importante 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 logo, i colori e lo stile grafico aziendale, in modo da essere sempre riconoscibili.
La personalizzazione di un’immagine vettoriale si esegue con applicativi come InDesign di Adobe o Affinity Design, oppure ancora il gratuito Inkscape, mentre le immagini raster si manipolano con le apposite applicazioni di trattamento fotografico come Photoshop o Affinity Photo, oppure con app grafiche online come Canva, PicMonkey o VistaCreate (ex Crello). Quando si opera con le immagini raster l’elaborazione va fatta sull’immagine a grandezza originale, per non perdere di qualità durante il processo di manipolazione. Le modalità di lavoro sono diverse fra immagini vettoriali e raster ma l’obiettivo è sempre quello di ottenere immagini efficaci e in linea con la Visual Identity aziendale mediante operazioni di ritocco, ricolorazione, regolazioni varie come aumento o diminuzione di esposizione, luminosità, contrasto, colore, e così via. Sia le foto aziendali originali, sia quelle acquistate, devono essere identificabili con l’azienda.
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 tuo business e contribuiscono ad affermare la tua identità.
Ridimensionare le immagini: quali dimensioni scegliere
I file delle immagini raster sono spesso colpevoli di rallentare il caricamento della pagina web e, come forse sai, Google privilegia il posizionamento dei siti veloci da caricare soprattutto dal cellulare.
Per questo motivo è necessario ridurre ogni immagine fino ad una misura adatta allo spazio che occuperanno nella pagina web.
Per ridimensionare le immagini puoi 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 consiste in una sola colonna che mostra i contenuti uno dopo l’altro. Per questo motivo non c’è differenza nelle dimensioni delle immagini per una Hero, uno slider o il corpo di un articolo: l’unica larghezza da considerare è quella dello schermo del cellulare.
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 il caricamento delle pagine talmente tanto 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 grafiche con pochi colori, 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
- Shortpixel.com
- 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 con testo e pochi colori, dove è molto importante la definizione. In caso di grafiche animate scegliete il .gif.
| jpg | png | gif | webp | |
| compressione lossless | 🟢 | 🟢 | 🔴 | 🟢 |
| compressione lossy | 🟢 | 🟢 | 🔴 | 🟢 |
| trasparenza | 🔴 | 🟢 | 🟢 | 🟢 |
| animazione | 🔴 | 🔴 | 🟢 | 🟢 |
CONTROLLARE IL PESO del file: nel comprimere le immagini dovresti sempre porti l’obiettivo di ottenere file di max 100KB per le immagini più grandi. Le immagini piccole devono pesare ancora meno (50-70KB). Superando queste grandezze corri il rischio di rallentare inutilmente il caricamento delle pagine.
Un’attenzione particolare va posta nella scelta delle immagini da inserire nella parte iniziale di una home page, dove è frequente l’uso di immagini hero o di slider. Non sono adatte a questo utilizzo le immagini ricche di dettagli e colori diversi, sia perché sono più difficili da comprimere mantenendo una qualità decente, sia perché immagini hero e slider di solito hanno titoli e link in sovrimpressione e uno sfondo troppo colorato 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 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 caricate molte immagini durante un sessione di lavoro potreste riscontrare rallentamenti o addirittura 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, se il cliente desidera aggiornare in autonomia il sito con nuovi contenuti e immagini, facilitiamo il suo lavoro includendo nel sito un plugin di compressione.
Tra i tanti plugin disponibili ne citiamo due, testati direttamente nei nostri progetti web e quindi garantiti da NUwebstudio senza alcuna affiliazione o altri tipi di accordo commerciale:
- ShortPixel (gratis fino a 100 immagini / mese)
- Imagify (gratis fino a 25MB di immagini / mese).
Ottimizzare le immagini per la SEO
Se le immagini del sito raccontano la tua Azienda, i tuoi prodotti e le tue realizzazioni, non devi 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 il giusto contesto alla foto cambia il nome file con uno descrittivo, con parole separate da trattini e magari anche il nome del sito. Se vuoi mantenere anche il nome originale tienilo in coda al nome file.
- alt text o “testo alternativo”: il testo alternativo ha lo scopo di descrivere l’immagine in modo testuale. Fornire un testo alternativo aumenta l’accessibilità del sito perché viene letto dal browser per i non vedenti. Inutile dire che i motori di ricerca usano quel testo per classificare la foto e per posizionarla in base alle 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 ed è utile all’interno di una galleria di immagini per per descrivere ogni foto.
Ricapitolando
- le immagini e le grafiche hanno un ruolo importante nell’attirare i visitatori al tuo sito web
- quando si tratta di immagini per un sito aziendale, preferisci sempre immagini originali e assicurati di costruire nel tempo un archivio fotografico da usare nel sito e nel materiale di marketing
- quando non disponi di immagini originali, non scaricare immagini a casaccio: acquisiscile soltanto con la licenza d’uso per evitare problemi legali
- personalizza sempre le immagini secondo la Visual Identity della tua Azienda
- utilizza il formato grafico più corretto per ciascun tipo di immagine
- riduci le dimensioni di ogni immagine in base allo spazio che deve occupare nella pagina web
- comprimi le immagini per rendere i file più leggeri da scaricare
- aiuta i motori di ricerca a riconoscere e posizionare le tue immagini
- non sottovalutare il tempo necessario a elaborare le immagini in modo efficace
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 recente formato WebP.
