Ottimizzare le immagini per il Web

Per chi ha avuto a che fare con Google Speed Insight la tematica non sarà nuova e probabilmente sarà già ricorso alla pratica di ottimizzare le immagini per il web.

Per avere un sito con un tempo di caricamento ottimale la prima cosa da fare è dare un’occhiata alle immagini e verificare se siano conformi ai requisiti necessari per il web.

5 regole da seguire per ottimizzare le immagini per il web

Esistono svariati standard che devono essere soddisfatti affinché un’immagine possa essere considerata adeguata alla pubblicazione online. Scopriamone 5 regole indispensabili.

1. Immagini Rgb o Cmyk?

I sistemi di codifica del colore più diffusi sono quelli di RGB (red, green, blue) e CMYK (cyano, magenta, yellow, black). Essi sono dedicati a due ambiti ben diversi essendo l’Rgb per il video, mentre il CMYK per la stampa.

La somma dei colori RGB è di sintesi additiva: se per esempio sovrapponiamo luci di diversi colori arriveremo ad ottenere una luce bianca o comunque più chiara (come avviene negli schermi).
La somma dei colori CMYK invece è una sintesi sottrattiva, se quindi dovessimo mischiare colori di diverse vernici (escluso il bianco) otterremo sempre un colore più scuro, fino a tendere al nero.

Non esistendo per gli schermi un colore nero, ma solo l’assenza di luce, verrà applicato il criterio del registro RGB, quindi nel nostro editor di immagini, che potrebbe essere Photoshop o Photopea, dovremo verificare che l’immagine sia Rgb o convertirla in questo registro.

2. Risoluzione in dpi di immagini ottimizzate per il web

Il Dpi (dot per inch e cioè :punto per pollice) è l’unità di misura che rappresenta la densità di risoluzione di uno schermo. Contrariamente a quello che ci ha insegnato l’esperienza che avremo di sicuro avuto tutti con la stampa, le immagini per il web NON DEVONO ESSERE DI ALTA RISOLUZIONE. La risoluzione consigliata è infatti di : 72 Dpi.

Attenzione quindi a quando decidiamo di utilizzare la nostra macchina fotografica per creare contributi, che normalmente è settata su 300 Dpi, dovremo quindi verificare e magari abbassare la risoluzione in Dpi per evitare di avere immagini ingiustificatamente enormi sul nostro sito.

3. Le dimensioni fisiche per un’immagine ottimizzata

Non esiste solo la risoluzione di Dpi di un’immagine, ma anche la sua effettiva grandezza, l’unità di misura è quella del pixel (px). È importante capire in quali “contenitori” della nostra pagina andranno poste le immagini e ridimensionarle nella misura corretta, affinché non vengano caricati media troppo grandi e quindi di peso inutile o troppo piccoli e non adeguati agli standard visivi di qualità.

4. Scegliere il formato corretto di salvataggio per ottimizzare le immagini per il Web

Scegliere il formato corretto di esportazione di un’immagine è fondamentale. Impariamo a capire quale sia la differenza tra i 3 formati principali di immagini, che tradizionalmente vengono impiegati per le pubblicazioni sul web:

• gif ( il famoso file delle gif animate)
• jpg o jpeg
• png

Gif

Il formato Gif è uno dei formati antesignani del mondo del web. Di tutti i colori disponibili per uno schermo (16,4 milioni), la palette colori del file gif automaticamente seleziona solo 256 colori. Questo farà abbattere considerevolmente il peso del file, a discapito della qualità dell’immagine, che se molto sfumata o poco definita risentirà visivamente e in maniera negativa il trattamento subito.

Il gif non ha il canale Alpha e tuttavia conserva informazioni di trasparenza, sarà quindi utile utilizzarlo per loghi di pochi colori o elementi grafici che vivono su sfondi non omogenei e necessitano di non avere un fondo.

Jpeg

La potremmo definire un’ immagine piena: cioè senza informazioni di trasparenza al suo interno (non ha un canale alpha). Il jpeg può arrivare a contare fino a 16,4 milioni di colori, quindi è un buon veicolo per mostrare anche immagini di alta qualità, ma di poco peso.

Png

Immagine con informazioni di trasparenza (canale alpha) e tanti colori a differenza del gif, con un peso considerevolmente maggiore, ma ad una qualità incomparabile.

5. Il peso di un’immagine ottimizzata

Una volta definite la risoluzione in dpi e la dimensione in px, potremo ancora intervenire sul peso in Byte o MB delle nostre immagini. Infatti gli editor di immagini più comuni in fase di salvataggio dell’estensione Jpg offrono la possibilità di scegliere la percentuale di qualità desiderata del file desiderato. Questa opzione ci dà la possibilità di risparmiare un considerevole peso del file a discapito di una cercata perdita di informazioni relativa all’immagine, che la semplifica, ma la rende accettabile da un punto di vista visivo.

Per il file png si può optare invece per il salvataggio in formato o png/24 o png/8, i risultati cambieranno considerevolmente.

Invece, se vogliamo ridurre il peso di un gif, sarà necessario ridurre il numero di colori da 256 ad un numero minore.

Conclusioni su : ottimizzare le immagini per il Web

Seguire queste cinque regole è sicuramente un buon punto di inizio per garantire un sano sviluppo di un sito. Come avrete intuito anche il mondo delle immagini grafiche è infinito, ma seguendo queste piccole regole otterremo sicuramente dei buoni risultati. Il tutto è sempre da verificare e con il sistema di controllo offerto da Google Speed Insight che offre report sulla velocità delle pagine e che, come prima voce, ci indicherà le immagini inadeguate e da modificare.