Pubblicato il 23 Lug 2020 - Aggiornato il 11 Mag 2022

Come ottimizzare le immagini per il web e migliorare le prestazioni online

Questo è un passaggio decisivo per la tua presenza online. Capire come ottimizzare le immagini per il web vuol dire ridurre i problemi legati alle performance in modo esponenziale. Spesso, infatti, possiamo considerare la cattiva gestione del visual come quel 20% delle cause che comporta l’80% del risultato.

Proprio come suggerisce il Principio di Pareto con la regola 80/20: ottimizzare foto e grafici di una pagina web permette di ottenere risultati strabilianti. A volte decisivi per i siti di grandi dimensioni.

Certo, la strada per raggiungere il risultato finale (una pagina veloce e performante in ogni occasione) è più complessa. Ma ottimizzare le immagini è già un buon punto di partenza. Ma guai a pensare solo alla compressione e riduzione del peso, c’è ben altro da fare. Come ottimizzare le immagini per il web?

Iniziamo da una valutazione in grado di prescindere dal CMS. Spesso si parla di ottimizzazione immagini per WordPress, con relativo uso di plugin come Smush. Proviamo a lavorare su un piano universale?

Indice dei contenuti

Perché ottimizzare le immagini

I motivi sono diversi ma, in buona sostanza, lavoriamo su due grandi blocchi. Il primo riguarda l’user experience, migliorare l’esperienza vissuta dall’utente, mentre il secondo interessa l’aspetto SEO.

In poche parole, tutto combacia con un concetto chiave da approfondire con estrema attenzione: la soddisfazione dell’utente che naviga su dispositivi fissi e mobile aspettandosi pagine più veloci.

Come suggerisce la ricerca citata da Google: “One-second delay in mobile load times can impact conversion rates by up to 20%”. Questo significa che basta un secondo in più nel tempo di caricamento della pagina per incidere sul tasso di conversione in modo consistente.

caricamento lento riduce le conversioni di un sito web

Del 20% per la precisione. Sai cosa significa questo? L’ottimizzazione della velocità di caricamento delle pagine web facilita le attività da smartphone, rende un sito web accessibile al pubblico che lavora con connessioni più lente e potrebbe non essere stato in grado di navigare al meglio.

Come ottimizzare le immagini

Voglio partire da un punto chiaro: il miglior modo per migliorare una pagina web dal punto di vista del peso introdotto dalle immagini è l’economia. Questo significa che le foto, le infografiche e le rappresentazioni visual si mettono solo quando servono. E non per semplice estetica.

In molti casi si assiste alla volontà di aggiungere immagini per spezzare il testo, per rompere il muro di parole. Non è così, la leggibilità si migliora con la buona formattazione. Le foto non si aggiungono per questo ma servono a dare maggiori informazioni a chi arriva sulla pagina web. Pensa a:

Ricette.
Tutorial.
Case Study.
Itinerari di viaggio.

In questi casi è fondamentale avere tante immagini per descrivere all’utente luoghi, dati e passaggi operativi. Fa parte della necessità di soddisfare l’intento di ricerca. Ma se le immagini non servono?

Le devi inserire per forza? Perché vuoi appesantire la pagina? Meglio togliere quello che non serve: la prima bussola da seguire è l’essenziale. Poi ci sono una serie di elementi da valutare con estrema cura.

Formati

Il primo punto da affrontare quando si affronta il tema dell’ottimizzazione immagini per il web: qual è il miglior formato? Meglio caricare le foto in JPG o le grafiche in PNG? E le GIF si possono usare?

Il punto di partenza è chiaro: non esiste un peso ideale in termini assoluti. Se la mia professione è quella del fotografo, e il sito web deve essere usato per vendere la mia capacità, non posso pubblicare poche foto e compresse in modo da sminuire la qualità del mio lavoro.

Esiste un equilibrio tra qualità dell’immagine e peso. Il formato aiuta a ottenere questo risultato ma i formati vettoriali non sono pensati per riprodurre scene complicate come può essere una foto. In questo caso dovresti usare PNG, JPEG o WebP. Ma è giusto dare una definizione.

PNG

Questo formato non applica algoritmo di compressione. Permette di ottenere immagini con una qualità massima ma le dimensioni del file saranno alte in termini di peso. Quindi bisogna fare attenzione.

Deve essere utilizzato per grafici, immagini create con programmi come Canva o Photoshop, infografiche e screenshot del browser. Se la risorsa contiene forme geometriche, considera la possibilità di convertirla in un formato vettoriale tipo SVG. E per le foto? Come mi comporto?

JPG

JPG sfrutta una combinazione di lossy e lossless per ridurre le dimensioni del file dell’immagine. Di sicuro è la soluzione per caricare foto che riprendono immagini reali, meno adeguato per le grafiche.

WebP

Le immagini WebP sono più leggere di JPEG e PNG, si raggiunge una compressione del 25–35% sulle dimensioni dei file. Ciò riduce il peso della pagina e migliora le prestazioni.

Perché non tutti sono convinti rispetto a questa soluzione? Non è un formato semplice da gestire e, aspetto decisivo, non viene accettato da alcuni i browser come Safari (nelle versioni meno recenti) e Internet Explorer.

Bisogna utilizzare infatti stratagemmi per servire il tipo di immagine in base al supporto del browser utilizzato dall’utente.

GIF

Se vuoi aggiungere un’immagine animata sulla pagina web devi affrontare un problema: il peso. L’opinione di Google? Sostituisci la GIF con i video per ridurre il peso della pagina ed evitare problemi.

Non ti convince questa soluzione? Cerchi una soluzione ideale per comprimere le GIF prima di caricare il contenuto sul sito web per arricchire le tue pagine? Puoi usare un tool per comprimere foto online come Ezgif.

SVG

Questo è perfetto per le icone. Su un sito web capita di dover caricare piccole immagini dedicate ai social o indicative di qualche servizio. La regola è chiara: usa SVG per questi contenuti visual perché è scalabile all’infinito, hanno una personalizzazione infinita con il CSS ed è un formato semantico.

In questo video puoi anche approfondire un aspetto fondamentale: meglio usare i file SVG, Scalable Vector Graphics per gli oggetti visuali in grafica vettoriale, o la soluzione icon font?

Per approfondire: strategie per ottimizzare il caricamento dei font

Responsive

Un punto essenziale per capire l’importanza di un approccio responsive (in grado di adattarsi alla dimensione dello schermo) alle immagini: cosa succede se uso immagini desktop per il mobile?

C’è un aumento dell’uso di dati dalle 2 alle 4 volte superiore rispetto a un sito web che ha un unico formato di immagini capace di adattarsi a ogni schermo, dispositivo e device. In questi casi non c’è soluzione migliore di un template in grado di garantire questa caratteristica alle foto che pubblichi.

Come caricare immagini responsive

Per gestire in automatico l’upload di immagini responsive, per essere sicuri di procedere nella giusta direzione, bisogna valutare una serie di elementi molto importanti. Iniziamo dal tag picture.

Si tratta del passaggio che consente di fornire una versione dell’immagine differente in base al dispositivo o al suo orientamento. In sintesi, è il cuore dell’ottimizzazione in termini responsive. La sua applicazione concreta prevede diversi elementi source per indicare differenti file d’immagine.

<picture>
  <source media="(min-width: 800px)" srcset="big.jpg, big-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="small.jpg, small-2x.jpg 2x">
</picture>

Come puoi notare dall’esempio, abbiamo un altro attributo usato per ottimizzare questo passaggio. Vale a dire l’srcset, un elemento che viene inserito per semplificare il lavoro di scelta del file in base al tipo di richiesta effettuata dal dispositivo. In sintesi, srcset indica al browser qual è la migliore immagine.

Ma come comportarsi con le immagini in background? Qual è la soluzione ideale per inserire un visual responsive? Si usa il CSS @media (min-width) per fare in modo che il file venga scaricato e applicato solo se il browser ha una larghezza superiore a quella scelta. Ecco un esempio.

@media (min-width: 400px) {
  body {
    background-image: url(sfondo.png);
  }
}

La sostituzione dell’immagine via Javascript può essere una soluzione dato che puoi verificare il dispositivo ed eseguire l’operazione determinando numero di pixel del device con altezza e larghezza dello schermo. C’è da dire che non è il massimo in termini di ottimizzazione generale dato che si verifica un aumento di peso della pagina e il rallentamento dell’upload immagine.

Manipolazione delle immagini lato backend

Per le immagini responsive conviene avere una struttura capace di gestire i file in modo strutturato? Sì, puoi usare una struttura CDN (Content Delivery Network, rete per la consegna dei contenuti) che prende in carico i tuoi file più impegnativi e li gestisce nel modo migliore in termini di prestazione.

In primo luogo con una compressione adeguata, puntando sui vari WebP e JPEG2000, ma anche permettendo le varie azioni di resize e taglio mantenendo il giusto formato responsive.

Come verificare le immagini responsive?

Puoi utilizzare Lighthouse per assicurarti che tutto lavori al meglio. Avvia il controllo delle prestazioni con il relativo audit e cerca i risultati che si riferiscono al check delle dimensioni immagine o usare il tool di analisi delle immagini di Cloudinary.

Dimensioni

Esiste una dimensione massima? Vale la pena caricare immagini grandi? Quali sono i risultati? La regola da seguire è semplice: bisogna caricare le immagini con dimensioni adeguate alla massima dimensione necessaria determinata dal template. E non oltre. In questo modo si riduce il tempo necessario per caricarla.

Ma si fa anche economia di risorse che vengono impiegate per caricare una foto o un’immagine con delle dimensioni superflue, inutili al fine ultimo. Ovvero quello di servire un contenuto adeguato alla fruizione, senza lesinare sulla qualità del visual sul sito web.

I programmi per ridimensionare e tagliare una foto sono infiniti, ma se non vuoi usare Photoshop o Gimp puoi sfruttare la semplicità di un tool come Befunky che ti consente di modificare un’immagine online in pochi secondi. Ma con la professionalità di un editor di immagini che fa invidia a Prestashop.

LazyLoad

Vale a dire caricamento differito, lento. Con questa soluzione puoi ridurre il carico della pagina nel momento in cui si carica. Il principio è semplice: se una pubblicazione ha 10 foto, ma nel momento in cui si carica l’above the fold ne appaiono 2, perché far attendere l’utente e impegnare il browser?

Meglio caricare le foto e i video solo quando servono. Su questo principio si basa il LazyLoad che sempre più spesso viene integrato di default nei CMS. In realtà oggi l’uso del LazyLoad può essere implementato facilmente su tutte le pagine web con una semplice attribuzione di un tag loading=lazy.

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Con un minimo di impegno in termini di codice è possibile applicare questo passaggio a ogni immagine e video. D’altro canto è inutile caricare elementi che l’utente potrebbe non vedere mai (non conviene).

In questo modo eviti di sprecare dati, un punto particolarmente importante per chi naviga su connessioni lente e limitate. E, soprattutto, hai una pagina che si carica con una velocità superiore.

Compressione

Non dobbiamo pensare che l’ottimizzazione del visual da pubblicare online sia solo una questione di riduzione del peso. Però è anche vero che questa è una componente fondamentale per avere pagine web più veloci

Quindi in grado di caricarsi in meno tempo. Sai bene che questa è una condizione fondamentale per migliorare il posizionamento SEO e l’usabilità. Ma come procedere in modo strutturato?

In primo luogo bisogna comprendere un punto: per le immagini, così come per video e audio, è possibile parlare di compressione con perdita di informazioni senza intaccare il risultato.

Ci riferiamo a un trattamento lossy che consente di eliminare ciò che non serve. Un po’ come quando ridimensioni l’immagine rendendola più piccola e adeguandola alla dimensione massima necessaria.

In base al modo in cui l’occhio elabora le informazioni, possiamo scartare alcune informazioni per ogni pixel al fine di ridurre il peso di una foto. Ma l’immagine può essere elaborata anche con un passaggio lossless che comprime i dati pixel senza eliminare nuove informazioni.

Quindi, come comprimere le immagini? Il modo più semplice, secondo Google, è usare il formato WebP che già offre un peso molto ridotto. Per gli altri formati si può lavorare con passaggi differenti:

Scegli il formato ideale tra PNG, SVG e JPG.
Elimina tutti i meta dati non necessari.
Carica immagini già compresse sul sito web.

Questo avviene attraverso strumenti differenti. Uno dei più efficaci è Optimizilla, un tool per comprimere più immagini contemporaneamente. Qui puoi aumentare la compressione e monitorare con estrema cura la qualità dell’immagine: se perde il buon risultato puoi sempre tornare indietro.

Poi c’è Squoosh, uno strumento di Google per comprimere foto e grafiche. come ottimizzare le immagini con questa soluzione? Semplice, trascina il contenuti a cui vuoi far perdere peso e scegli le opzioni: puoi anche ridimensionare l’immagine e tagliarla o ridurla in termini di dimensioni.

Ricorda questo non deve essere inteso solo per le immagini. C’è grande necessità di ottimizzazione delle dimensioni e del codice per caricare velocemente i video che inserisci nelle tue pubblicazioni.

Ricordati dell’ottimizzazione SEO

Tra i principali fattori SEO spunta la velocità di caricamento delle pagine web. Il motivo è semplice: Google ha come obiettivo la necessità di offrire il miglior contenuto possibile, e non solo dal punto di vista del contenuto definito in termini creativi. Ma non bisogna perdere di vista la qualità tecnica che consente all’utente di fruire una pagina web nel miglior modo possibile.

Ecco perché Google ha definito, sempre con maggior cura, il ruolo della velocità nel posizionamento SEO, suggerendo sempre nuovi tool per avere informazioni concrete: Pagespeed Insight, Lighthouse e Search Console sono strumenti per questo lavoro. Anche per avere sotto controllo il peso delle foto.

Ricorda, però, che qualsiasi strumento preso in esame deve essere sempre contestualizzato. I dati possono variare ed essere piuttosto diversi in base a diverse condizioni, non a caso i tool di Google cercano di riprodurre condizioni quanto più simili all’uso reale riportando i dati di laboratorio.

Ovvero informazioni raccolte in un ambiente controllato con impostazioni predefinite rispetto al device e alla connessione. Poi ci sono i dati registrati sul campo che completano lo scenario.

Quest’ultimi descrivono le prestazioni raccolte rispetto all’uso delle pagine reali. Ogni prospettiva ha i suoi punti di forza e debolezza, osservarli insieme con la giusta prospettiva aiuta a capire come ottimizzare le immagini. Ma anche a migliorare tutto il resto per raggiungere la massima performance.

Vuoi ottimizzare le foto per il web?

L’opera riguarda la continuità e non l’operazione da svolgere una tantum, ovvero un’unica volta nella storia del portale. Magari quando si fa il restyling del sito web e si riorganizzano le sezioni e le pagine.

Chi conosce bene le dinamiche delle performance online sa bene che bisogna definire delle fasi. Il lavoro dell’esperto di web performance si organizza in un’ottica molto vicina al ciclo di Deming:

Osserva la situazione.
Metti in pratica le operazioni.
Misura i risultati.
Lavora verso una nuova ottimizzazione.

Tutto questo per raggiungere una sorta di perfezione che però dovrà essere sempre messa in discussione. Perché il lavoro di ottimizzazione delle immagini online deve essere continuo, ben strutturato e pensato per essere sempre allineato con le necessità di un sito web performante.

Ottimizza il tuo sito

C’è bisogno di individuare un budget per gestire un’ottimizzazione continua e costante, non esiste un lavoro chiuso per sempre.

Fonti e link da approfondire

Mirko Ciesco

Web Performer

Mi piace raccogliere dati dai siti per comprendere come portarli ad un livello superiore! 🚀
Sono esperto in web performance, ottimizzo la SEO tecnica e miglioro l’usabilità dei siti internet attraverso la web analytics. Creo strategie vincenti partendo dai problemi delle Startup e delle aziende. Infine tengo corsi personalizzati online e in tutta Italia con la mission di rendere il web un posto migliore.