Perché è importante ottimizzare le immagini per il web?
Durante la costruzione di un sito web, un aspetto da non trascurare è sicuramente quello dell’ottimizzazione SEO. Spesso concentriamo tutti gli sforzi nella scelta del layout del sito web, nella selezione del template del sito web o nell’analisi della user experience: tutte considerazioni necessarie e giustissime ma che non dovrebbero mettere in ombra l’importanza dell’ottimizzazione SEO del sito, che determinerà il posizionamento delle pagine nella ricerca Google. Infatti è controproducente avere un sito web molto performante dal punto di vista estetico ma che probabilmente nessuno vedrà se non è ottimizzato in modo tale che Google possa farlo apparire tra i primi risultati delle ricerche utente. In questo senso è fondamentale considerare una serie di fattori come l’alberatura del sito web prima della costruzione, la ricerca delle keywords opportunity, la versione responsive del sito e non per ultimo l’impatto delle immagini sul tempo di caricamento del sito web. Quest’ultimo fattore è fondamentale perché la velocità è uno degli aspetti che Google tiene più in considerazione nella valutazione di un sito web. Ottimizzare le immagini quindi aiuterà il tuo sito web a essere valutato in maniera migliore da Google, ridurrà il consumo di dati dell’utente e migliorerà il posizionamento delle tue pagine online.
Ottimizzazione delle immagini per il SEO: consigli e best practices.
L’utilizzo delle immagini nelle pagine online aiuta moltissimo ad aumentare l’engagement degli utenti, ma ha lo svantaggio di rallentare il caricamento della pagina. Questo può comportare uno svantaggio per il tuo sito rispetto alla Serp, ovvero la pagina dei risultati mostrati da Google che rispondono a una domanda da parte dell’utente perché Google premia le pagine con il caricamento più veloce.
Esistono diverse soluzioni per ovviare a questo problema: per prima cosa si può intervenire sulla compressione delle immagini. Questo passaggio è ormai diventato quasi obbligatorio per ottimizzare le prestazioni dei siti web, tanto che alcune piattaforme come WordPress (e di conseguenza Woocommerce) mettono a disposizione plugin di compressione delle immagini, sia gratuiti che a pagamento.
Tenete sempre in considerazione però da una parte la compressione delle immagini per il SEO è necessaria, ma dall’altra non può abbassare troppo la qualità perché questo andrebbe a incidere sulla user experience. È necessario quindi trovare una media tra questi due parametri. Certo è che quando parliamo di una galleria di immagini, di un e-commerce con una o più immagini per ogni scheda prodotto o anche solo di un sito web con una grande quantità di immagini, non si può procedere senza un’accurata compressione delle immagini. Per ovviare a questo problema in realtà c’è una soluzione tecnologica che si pone però a un livello più avanzato di competenza. Per siti web che hanno bisogno di un’alta qualità di immagini, senza rinunciare alla velocità, si consiglia l’utilizzo di un CDN per migliorare il posizionamento delle immagini sui motori di ricerca. Ciò significa che, grazie al CDN, il contenuto viene caricato da un network più vicino all’utente, con un significativo miglioramento della performance e un minore tempo di caricamento.
Una volta che le avrete rese meno pesanti per il caricamento, non dovete dimenticare che ai fini dell’ottimizzazione SEO anche le immagini possono essere sfruttate per essere trovati dagli utenti. Ricordate sempre quindi di inserire i tag ALT e i titoli delle immagini per il web. I tag ALT servono a Google per capire l’argomento generale e la categoria in cui si va a inserire l’immagine, mentre un buon titolo per l’immagine dovrebbe essere coerente con l’argomento della pagina. Considerate anche che ad oggi è possibile inserire keyword nelle immagini che Google riuscirà a visualizzare ed estrapolare per l’ottimizzazione SEO.
Comunicazione social Gin Enfleurage
Come scegliere le immagini giuste per il design del sito web
Utilizzo delle immagini per migliorare la user experience del sito web
Abbiamo visto quanto le immagini possano pesare sul caricamento di una pagina, ma non dobbiamo dimenticare quanto le immagini influiscano sulla user experience del sito web. Anche per quanto riguarda la SEO il design visivo del sito web è molto importante perché per essere autorevole una pagina deve saper trattenere l’utente. Per questo i migliori siti web utilizzano pattern e texture che rendono più dinamica e interattiva l’esperienza.
Pro e contro di usare siti foto stock
Siamo abituati ormai a utilizzare una grande quantità di immagini online. Spesso però non tutti hanno la possibilità di utilizzare immagini originali, perché il costo di produzione talvolta può essere troppo elevato per piccoli e medi business. Pensate solo alla quantità di immagini per i blog sul sito web, e capirete subito che proporre solo immagini originale può diventare impossibile. È in questi casi che possiamo aiutarci con foto stock reperite su siti di banca immagini. Si tratta di materiale fotografico, grafico o anche video totalmente royalty free che può essere utilizzato secondo il regolamento del singolo sito. Ciò è possibile anche grazie al Creative Commons, un tipo di licenza che permette la condivisione libera di opere, seguendo le condizioni stabilite dagli autori.
Ovviamente questo tipo di di servizio non può essere utilizzato in tutte le situazioni, per esempio le immagini per i prodotti sul sito web dovrebbero essere originali, così come le immagini per i servizi sul sito web. Non parliamo poi delle immagini per il portfolio sul sito web, che devono rappresentare quanto più possibile il processo di lavoro reale.
Quando non ci troviamo in questo tipo di situazione, che richiede una specifica restituzione di realtà, possiamo tuttavia cercare immagini gratis online nel pieno rispetto del diritto d’autore e del copyright.
Migliorare la qualità delle foto: aspetti da sapere/tenere in considerazione
All’interno delle considerazioni riguardo all’ottimizzazione delle immagini bisogna specificare che quanto più un’immagine nasce con una risoluzione ideale per le immagini web, tanto più sarà performante. Approfondiamo quindi l’argomento con suggerimenti sui formati e dimensioni consigliati per il web.
Formati e dimensioni delle immagini per il web
La scelta del formato (JPEG, PNG, GIF) e delle dimensioni per un’immagine web deve essere orientata da una conoscenza di questi mezzi. Vediamo in particolare che:
- il formato JPEG è quello più utilizzato perché è creato per comprimere le immagini e renderle più leggere. Allo stesso tempo però ha una bassa risoluzione;
- il formato PNG è più pesante del JPEG, ma permette di ottenere uno sfondo trasparente e applica una compressione minore all’immagine che dunque risulta più pesante ma di maggiore qualità;
- il formato GIF permette l’animazione delle immagini, ma a costo di una selezione massima di 256 colori e di una bassa risoluzione;
- il formato WebP è un nuovo formato che è stato creato proprio da Google per ottenere immagini con dimensione del file ridotta ma di qualità superiore rispetto al JPEG.
Infine non dimentichiamo che è possibile anche utilizzare le grafiche vettoriali sul sito web. In questo caso il formato migliore da utilizzare sarà SVG, perché è scalabile e può essere utilizzato per le animazioni e modificato tramite CSS.
Ottimizzazione e compressione delle immagini
Per ridurre il peso delle immagini esistono essenzialmente due tipi di intervento.
- Compressione lossy: per rendere l’immagine più leggera elimina in modo definitivo e permanente i dati superflui, rendendo il caricamento nettamente più veloce.
- Compressione lossless: pur rimuovendo i dati che non ritiene necessari, dà la possibilità di ripristinare l’immagine originale; questo permette una qualità di immagine superiore ma un caricamento più lento.
Anche in questo caso quindi si tratta di trovare il giusto compromesso per il sito in questione: se è più importante la velocità di caricamento sceglieremo una compressione lossy, se invece l’immagine è di centrale importanza per l’utente sceglieremo una compressione lossless.
Ottimizzazione dei colori
La qualità immagini per siti web dipende anche dalla resa dei colori. Per questo esistono dei tool automatici di correzione dei colori di un’immagine. È importante poi sapere che per il web è necessario utilizzare la modalità colore RGB che gestisce moltissimi colori che non sono presenti nella modalità CMYK.
Ricordiamo sempre anche che una risoluzione alta, magari ottenuta con una macchina fotografica reflex, non potrà mai essere apprezzata online come su carta stampata. Infatti anche il migliore schermo full HD non supporterà dimensioni superiori a 1920 x 1080 pixel, e avrà una risoluzione di massimo 96 dpi. Caricare immagini che superano questi parametri quindi non solo sarà superfluo, ma anche dannoso a causa del rallentamento generale del caricamento nella pagina.
Aumentare risoluzione foto
Oggi grande quantità delle immagini online vengono realizzate tramite strumenti non professionali, come smartphone o macchine fotografiche amatoriali: se per il nostro sito la risoluzione dell’immagine è importante esistono dei tool (Photoshop, Gimp, Lightroom) con cui fare upscaling delle immagini.
Limiti e possibilità dell’aumento della risoluzione delle immagini risoluzione foto
Per prima cosa è importante capire cosa vuol dire aumentare la risoluzione dell’immagine. Si tratta infatti di aumentare i pixel di una foto: se per la stampa infatti parliamo di DPI (dots per inch), online la qualità delle foto dipende dal PPI (pixel per inch). Oggi è possibile aumentare la risoluzione delle immagini con intelligenza artificiale tramite piattaforme online che forniscono questo servizio oltre a calibrare i colori, modificare il formato e la dimensione.
Le principali App per ottimizzare le foto: Snapseed, Autodesk Pixlr, Prisma
- ottimizzare le immagini
- Foto per social
- Rimozione oggetti indesiderati
- scrivere sulle immagini
- Keyword nelle immagini
- migliorare qualità foto
- modificare immagini online
Ottimizzare i dpi e ppi di un’immagine con GIMP
Gimp è una piattaforma che permette di modificare le immagini per apportare vari tipi di miglioramenti: grazie a questo editor grafico è possibile apportare semplici operazioni come il ritaglio, la rotazione o il ridimensionamento delle immagini, ma anche eseguire operazioni più complesse come migliorare foto sfocate, migliorare i colori, regolare la nitidezza ed eliminare oggetti indesiderati. Gimp fornisce anche vari strumenti per il calcolo del PPI/DPI che permettono di ottimizzare le immagini per il web a vari livelli: ricordiamo che online dobbiamo considerare i PPI, ovvero i pixel per pollice, per valutare dimensione e risoluzione dell’immagine, mentre offline parliamo di DPI, ovvero punti per pollice. Gimp permette di modificare PPI/DPI per dispositivi mobili e desk in modo da avere sempre immagini ottimizzate.
Esempi di siti web con immagini ottimizzate per il caricamento veloce delle pagine
Per alcuni brand l’immagine è parte centrale della comunicazione. Bisogna prendere atto che online, anche a causa della fruizione sui social media, l’utente è sempre più attratto da un contenuto visuale piuttosto che da uno testuale.
Prendiamo per esempio il sito web di Nike: possiamo notare già dalla homepage che il contenuto visuale pervade e guida l’utente attraverso le varie sezioni e categorie del sito. Ogni immagine è espressione della brand identity, trasmette una precisa sensazione all’utente e rende più immediata la fruizione.
Anche da Tiramisù abbiamo lavorato a siti web in cui l’immagine rappresenta il centro focale per esprimere il brand del nostro cliente. È il caso per esempio di Labcare Cosmetics, un brand di skincare per cui le immagini sul sito e-commerce sono fondamentali. In homepage possiamo vedere tramite uno slider le ultime novità dei prodotti e le promozioni, ma anche durante la navigazione, nelle pagine e nelle schede prodotto abbiamo effettuato le migliori ottimizzazioni per mantenere alte performance e qualità di visualizzazione. La difficoltà sta nel far risaltare l’aspetto di un materiale come il vetro, all’interno del quale sono contenuti i prodotti, o nel permettere la lettura di etichette anche molto piccole su schermo. Ciò significa fare un lavoro pixel perfect in fase di scatto, post-produzione e ottimizzazione tramite i più sofisticati plugin.
Un altro sito e-commerce che abbiamo realizzato e per cui la resa visuale delle immagini è stata centrale è quello di Pilot Exclusive, un servizio di merchandisign riservato a soli piloti aeronautici. Per la home page infatti siamo andati a inserire un video direttamente sul sito senza rallentare le prestazioni: ciò è stato possibile grazie innanzitutto alla realizzazione già progettata per il media online e in secondo luogo grazie a una compressione tramite ottimizzazione dei file javascript e l’output del file.
Strategie utilizzate da siti web a elevato traffico per ottimizzare le immagini
Per i siti web più professionali la trattazione e l’ottimizzazione delle immagini è fondamentale. Homepage, blog, newsletter e schede prodotto devono poter essere di alta qualità e allo stesso tempo funzionali e dalle ottime performance. Ma come si può ottenere tutto questo insieme?
Una tecnologica professionale che permette di avere massima velocità e qualità è quella della CDN: si tratta di permettere un caricamento più veloce attraverso la delocalizzazione del contenuto che viene caricato da un network più vicino all’utente.
Se la tecnologia può venirci in aiuto, tuttavia dobbiamo anche pensare di partire con il piede giusto nei confronti di Google: per farlo sarà opportuno progettare le immagini in ottica web, con dimensioni e formato appropriati, oltre a inserire i corretti tag ALT, titoli e keyword. In questo modo CDN e ottimizzazione delle immagini lavoreranno assieme per porre la pagina del sito web nel modo più autorevole possibile agli occhi di Google.
Oltre al lato tecnico inoltre, i siti ad alto traffico tengono sempre presente l’importanza della user experience. In una landing-page per esempio tutti i contenuti, sia testuali che visuali, devono portare a una precisa call to action, mentre per quanto riguarda i prodotti è importante che l’immagine sia fedele alla resa reale, ma anche che le informazioni tecniche siano di facile fruizione e che l’acquisto sia immediato. Un’immagine può cambiare concretamente la fruizione di una pagina: per esempio, avete mai pensato di sfruttare le immagini per la pagina di errore 404 del sito web? Può succedere a tutti che il click al link rimandi a una pagina di errore, e l’utente in questo caso può sentirsi deluso e frustrato per il risultato. Grazie a un’immagine diversa dal solito, ironica o personalizzata, potrete cambiare la percezione dell’utente, rafforzando anzi la brand idenitity e il tone of voice aziendale.
