Il peso ideale delle immagini per il Web

Ottimizzare le immagini per un sito web prima di caricarle e pubblicarle online è un’attività che fondamentale che chiunque disponga di un sito web e voglia aumentare le sue performance deve intraprendere. Caricare immagini sul proprio sito senza ridurre le dimensioni, inserire i tag alt, o impostare prestare attenzione al nome del file comporta infatti non solo una perdita di qualità degli elementi visivi del sito, ma anche un peggioramento delle performance dal punto di vista SEO e di esperienza utente.

Ma ottimizzare le immagini del proprio spazio web è un’attività molto ampia, che spazia dal lavorare sulla SEO delle immagini all’editing degli elementi per ridurre il peso delle immagini scelte senza perdita di qualità (per alleggerire e facilitare la navigazione).

Vediamo quindi in primis cosa si intende e qual è il peso ideale di un’immagine web.

Nel caso delle pagine Internet questa variabile deve essere tenuta in considerazione almeno per 3 ragioni:

1. influisce sulla velocità di caricamento dei contenuti;
2. può contribuire in positivo o in negativo sulla qualità della navigazione;
3. viene utilizzata come criterio di posizionamento dai motori di ricerca.

In base ai punti precedentemente elencati viene spontaneo chiedersi quanto debba pesare un’immagine perché possa essere inserita in un sito Web. La risposta più immediata a questa domanda è: il meno possibile ma senza sacrificare la qualità.

Prestazioni e resa grafica hanno infatti una rilevanza pressoché equivalente, cerchiamo di capirne i motivi in modo da disporre di parametri utili da utilizzare nelle nostre scelte.

Il fatto che oggi siano disponibili connessioni in banda larga e ultralarga non significa che tutti abbiano la possibilità di usufruire di una connessione veloce, si pensi per esempio a chi naviga tramite un dispositivo mobile, non può accedere ad un collegamento via Wi-Fi e non sempre ha a disposizione un segnale abbastanza potente.

Le connessioni mobile si basano inoltre su piani tariffari che mettono a disposizione una precisa quantità di traffico, quindi immagini troppo pesanti si traducono anche in un maggior consumo di dati.

Un sito Web che si carica lentamente viene abbandonato più facilmente, proprio perché gli utenti ricercano velocità e desiderano risparmiare traffico.

Il discorso relativo alla qualità dell’esperienza utente è legato a quello delle prestazioni. Perché spendere tempo prezioso in attesa che un’immagine e la pagina che la contiene finiscano di caricarsi se sul Web non mancano le alternative?

Un e-commerce le cui schede prodotto richiedono troppo tempo per essere visualizzare (e spesso per “troppo tempo” s’intendono pochi secondi) potrebbe vendere molti più articoli se gli utenti non lo abbandonassero in favore della concorrenza.

Caricamenti troppo lunghi determinano infatti frequenze di rimbalzo e tassi di uscita elevati. Con le prime misuriamo quante volte una pagina è stata l’unica visualizzata durante la navigazione su un sito, con i secondi scopriamo invece quante volte una pagina è stata l’ultima ad essere visualizzata.

Google considera le prestazioni e la qualità della user experience dei siti Web come dei fattori di ranking, questo significa che si tratta di metriche in grado di influire sul posizionamento delle pagine Internet all’interno dei risultati di ricerca.

L’introduzione di tali criteri, tra i tanti che vengono valutati dall’algoritmo del motore di ricerca, è dovuta al fatto che Google ha rilevato che gran parte della navigazione Web avviene ormai tramite smartphone. I contenuti devono essere quindi veloci da caricare e sviluppati secondo un approccio mobile first anche per comparire tra i primi posti della SERP  (Search Engine Results Page).

Oltre che leggere dal punto di vista del peso, le immagini devono essere poi di buona qualità per permetterne l’utilizzo nella ricerca per immagini. Se gli elementi rappresentati in esse non sono facilmente riconoscibili, difficilmente potranno essere utilizzate per soddisfare le query.

Il formato delle immagini per il Web influisce sul loro peso, per capirne le ragioni è utile fare riferimento alle modalità di compressione utilizzate che possono essere di 2 tipi:

1. lossy: determina delle perdite di dati, quindi consente di alleggerirle ma può comportare anche una qualità inferiore;
2. lossless: tutti i dati vengono compressi senza rimozioni, la qualità non viene compressa ma con una minore perdita di peso.

I formati disponibili per Internet non sono tantissimi e possiamo introdurli tutti in una breve lista:

• GIF: permette unicamente la compressione lossless e supporta soltanto 256 colori;
• PNG: pensato per la modalità lossless supporta comunque anche quella lossy, permette di ottenere immagini di alta qualità anche se di solito più pesanti di quelle che si possono ottenere con i formati alternativi;
• JPEG: consente di utilizzare entrambe le modalità di compressione e permette di raggiungere un buon compromesso tra peso e qualità;
• WebP: può garantire un risparmio in termini di peso fino al 30% rispetto a JPEG e PNG ma non è supportato da tutti i browser.

Quali criteri utilizzare per la scelta dei formati? Non esistono risposte valide in senso assoluto ma in generale è possibile fare riferimento a queste buone pratiche:

• utilizzare GIF soltanto per le immagini animate, i pochi colori utilizzabili non garantiscono infatti una resa grafica elevata ma le animazioni possono essere anche molto pesanti e con le GIF si ha un risparmio in termini di peso;
• utilizzare PNG per immagini non troppo ricche di colori come per esempio un logo aziendale;
• utilizzare JPEG per le immagini più ricche di colori perché offre un maggior controllo sul loro bilanciamento;
• utilizzare WebP quando si ha la possibilità di intercettare il browser corrente e di rilevarne il supporto a questo formato.

Alcune applicazioni standard per la grafica e il fotoritocco come Adobe Photoshop integrano degli strumenti con cui esportare delle immagini per il Web da file originali molto più pesanti. I loro output possono essere considerati dei riferimenti ideali per stabilire quale debba essere il peso di un’immagine da pubblicare in un sito Internet.

In ogni caso una regola efficace, sia dal punto di vista delle prestazioni che da quello della qualità, potrebbe essere quella di non considerare ottimizzate per il Web le immagini il cui peso supera il MB. Una connessione in fibra ottica permetterebbe di caricare velocemente anche file più pesanti ma è meglio non prendere come riferimento il migliore degli scenari possibili, anzi, le esigenze di chi dispone di connessioni lente dovrebbero essere prioritarie.

Un’immagine del peso di 1 MB può essere alleggerita dalle 2 alle 4 volte senza rilevare una perdita significativa in termini di qualità.  E’ vero che applicazioni per l’ottimizzazione come TinyPNG e Kraken consentono anche perdite di peso superiori, ma è bene tenere presente che output pixelati o sfocati non sono l’ideale né per la resa grafica né per la ricerca basata sulle immagini.

Da non dimenticare infine che in buona parte dei casi le immagini ad alta definizione presentano dimensioni notevoli in termini di larghezza e altezza, ridimensionarle prima dell’ottimizzazione per il Web può quindi aiutare a risparmiare ulteriore peso.

Proporre un valore preciso per il peso delle immagini destinate ad Internet non è un compito facile, molto dipende dalle caratteristiche del file originale e dal formato che si intende utilizzare.

In linea generale è però possibile affermare che un’immagine ottimizzata per il Web è un’immagine che non sacrifica la velocità di caricamento a favore della qualità e viceversa. E’ quindi buona norma saper mediare tra questi 2 fattori.