Ottimizzare le immagini per il web: come fare e quanto incide sulle performance di un sito​

Se volete che il vostro sito web possa indirizzare traffico, fidelizzare i visitatori e aumentare le conversioni, è necessario che il design e i contenuti siano coinvolgenti. Un grande supporto può essere fornito dalle immagini. La sfida risiede nella dimensione delle stesse: più grandi saranno più potrebbero impattare sui tempi di caricamento. Per contrastare problemi di questo tipo possiamo utilizzare delle tecniche con le quali è possibile ottimizzare le immagini migliorando, quindi, la velocità di navigazione del sito.

Peso delle immagini e user experience: perché è importante ottimizzare le immagini

Secondo HTTP Archive, le immagini rappresentano un quarto del peso totale delle pagine web. Inutile dire che quando parliamo di tempi di caricamento della pagina del vostro sito, ogni secondo è importante. I siti lenti offrono un’esperienze utente di bassa qualità, e questo può ripercuotersi negativamente andando ad aumentare la frequenza di rimbalzo.

Ma non sono solo gli utenti a mal sopportare un’eventuale lentezza di caricamento. Anche i motori di ricerca non apprezzano i siti lenti. Considerando che le immagini ottimizzate non solo permettono una navigazione più fluida, sono anche più semplici da scansionare e indicizzare. Per cui se il vostro sito sarà veloce, allora sarà più probabile che si posizionerà meglio in SERP.

Quando si parla di immagini, grafici o fotografie e della loro influenza sulla velocità e le prestazioni di un sito web, è importante trovare un giusto equilibrio tra la qualità, il numero delle immagini e la loro altezza e grandezza. 

I vantaggi di ottimizzare le immagini per il web

Le immagini di alta qualità sono una parte fondamentale del tuo sito. Sfortunatamente, possono appesantire le pagine del vostro sito, peggiorando le prestazioni e danneggiare la user experience e l’ottimizzazione SEO.

Navigando in rete è molto probabile che gli utenti vengano catturati da particolari contenuti multimediali e che vogliano conoscere più informazioni a riguardo. L’ottimizzazione delle immagini non solo permette di aumentare il traffico sul sito web, ma anche di posizionarvi tra i migliori risultarti dei motori di ricerca. Ottimizzare le immagini vuol dire quindi migliorare la user experience e il tasso di conversione, evitando rallentamenti nel caricamento delle sezioni della vostra pagina, e contribuire alla crescita del vostro sito.

Quando avrete ottimizzato le immagini, non solo otterrete delle prestazioni migliori per il vostro sito, ma risulterà anche più apprezzato dai motori di ricerca, i browser e le reti. I vostri lettori, quindi, si imbatteranno con un caricamento dei contenuti più veloce.

Ridurre il peso delle immagini vi permetterà di utilizzare meno banda e spazio su disco del server dove il vostro sito viene ospitato, a beneficio dei costi di hosting ma prima di tutto dei vostri utenti.

Come ridurre il peso delle immagini quindi? Ridurre la qualità non può essere considerata la soluzione migliore per garantire migliori performance, in quanto andrebbe ad impattare sulla qualità stessa dei contenuti. Ci sono però dei software e delle tecniche che possono aiutarvi nel ridurre il peso delle immagini con un compromesso più che accettabile fra dimensioni e qualità. Vediamoli nel prossimo paragrafo.

Ottimizzare le immagini per il web: tipologie di immagini e come ottimizzarle

Come abbiamo accennato in precedenza l’ottimizzazione delle immagini può impattare in maniera negativa o positiva sulle performance del vostro sito. Per far sì che il loro impatto sia minimo, potete utilizzare alcuni tool e tecniche che possono essere seguite anche dagli utenti meno esperti.

Ecco alcune delle tecniche più utili per poter raggiungere gli obiettivi di ottimizzazione delle immagini presenti sul vostro sito, vediamole una ad una.

Ridimensionamento

Ridimensionare le immagini: la riduzione delle immagini di grandi dimensioni prima del caricamento nelle librerie multimediali comporta un ridimensionamento delle dimensioni e la regolazione della risoluzione tramite la compressione. L’ideale è fornire immagini della dimensione perfetta per ogni dispositivo: troppo piccole di degraderebbero creando il brutto effetto di “sgranatura” che tutti conosciamo; troppo grandi appesantiscono il caricamento inutilmente;

Compressione

Comprimere le immagini è un altro metodo impiegato da anni per ridurre il peso delle immagini. Negli anni sono nati algoritmi di compressione sempre più sofisticati, in gradi di ridurre il peso delle immagini con un degrado sempre minore di qualità. I metodi di compressione delle immagini possono essere di due tipologie differenti:

  • Compressione con perdita dei dati (lossy): in questo caso la riduzione della dei pixel degli elementi grafici si ottiene tagliando una parte dei dati proporzionale al livello di compressione. Nel tempo lo sviluppo di questi algoritmi è andato raffinandosi e permettendo di eliminare le informazioni meno significative per la percezione umana;
  • Compressione senza perdita di dati (loseless): in questo caso quando si comprime l’immagine non viene smarrito alcun dato e la qualità dell’immagine non ne risente. Questo tipo di compressione è ottenuto andando a utilizzare un sistema più efficiente di salvataggio delle immagini sul disco.

I formati immagine più diffusi

A giocare un ruolo fondamentale nel determinare peso e qualità delle immagini sono anche i formati dei file. Per le immagini web esistono quattro principali formati di file utilizzati:

  1. PNG (portable network graphic): questo tipo di formato si rifà utilizza una compressione senza perdita, ha il vantaggio di poter gestire le trasparenze ma non è certamente il più efficiente in termini di peso;
  2. JPEG (Joint Photographic Experts Group): tendenzialmente le immagini jpeg sono di qualità inferiore rispetto alle immagini PNG, sono di conseguenza più piccole. Se volete ridurne la dimensione la compressione con perdita di dati sarà il metodo più comune, anche perché consente un buon rapporto fra riduzione del peso e qualità delle immagini;
  3. GIF (Graphics Interchange Format): si tratta di un formato “antico” per quelli che sono i tempi del web e utilizza un metodo di compressione senza perdita di dati. Riservato principalmente alle immagini animate, grazie alle sure dimensioni ridotte viene generalmente utilizzato per i social media o i blog;
  4. webP: si tratta di un formato che offre file di dimensioni minime con la massima qualità. Più piccole del 26% rispetto al formato PNG e fino al 34% rispetto al formato JPEG. Questo formato non è ancora supportato da tutti i browser ma si sta imponendo come formato più apprezzato da webmaster e SEO expert.

Come abbiamo visto ci sono delle scelte che andranno fatte quando decideremo la tipologia di immagine che vorremmo utilizzare. Ci sono diversi fattori da tenere a mente ma in linea di massima per le immagini fotografiche JPEG e webP sono i formati più indicati. Se si tratta invece di immagini vettoriali o con trasparenza la scelta ricade su PNG, sia per la capacità di gestire le trasparenze tramite il canale alpha, sia perché sui vettoriali consente un importante risparmio di peso. Quando invece vengono prese in considerazione le immagini GIF per le animazioni, sarà importante utilizzarle con parsimonia in quanto le queste tendono a rallentare la velocità dei siti.

Il tipo di compressione e il formato dei file sono comunque fattori importanti quando di tratta di ottimizzare le immagini. La scelta giusta può ridurne il penso e, conseguentemente, velocizzare il vostro sito.

Ottimizzazione delle immagini: ottimizzare la distribuzione

Dopo aver visto alcune regole utili su come si può lavorare all’ottimizzazione delle immagini agendo sulla fonte – i file immagine – vediamo come ottimizzare anche la distribuzione delle immagini, altro fattore fondamentale per migliorare la velocità di caricamento. Ecco altri due step fondamentali oltre ridimensionamento e alla compressione:

  • Lazy loading: è una tecnica che permetterà di caricare le immagini poste nella parte inferiore di una pagina solo quando gli utenti inizieranno a scorrere la pagina. In questo caso i contenuti multimediali saranno visibili man mano che verranno visualizzati e si eviterà il caricamento in contemporanea di più immagini.
  • CDN immagini (image content delivery network): la CDN è un sistema di nodi server distribuiti in tutto il mondo e collegati con il server origine. Ogni volta che un utente richiede dei contenuti il server origine li distribuisce e ne crea una copia nella memoria cache del nodo di CD. L’utente successivo che richiederà il contenuto lo riceverà dal nodo vicino anziché dal server origine, magari lontano migliaia di chilometri. Dal momento che le immagini sono spesso l’elemento più impattante per le performance di un sito, siti con un numero importante di immagini non possono fare a meno di una CDN per distribuirle.