Nel web ottimizzare le immagini è fondamentale: un sito deve essere prima di tutto veloce a caricare e per farlo deve pesare il meno possibile.
Gli elementi che incidono maggiormente sul peso di un sito sono senza dubbio le immagini. Anche Google, tramite il suo Google Pagespeed Insight fa presente che una delle soluzioni per migliorare la velocità di caricamento di una pagina web è quella di ottimizzare le immagini.
Ma cosa vuol dire ottimizzare le immagini? Vuol dire diminuire il peso di un’immagine, senza però incidere sulla sua qualità visiva. Per farlo abbiamo 2 strade da percorrere: Risoluzione e Formato.
Risoluzione dell’immagine
La risoluzione è sicuramente la prima ottimizzazione da fare per un’immagine. Nel web avere un’immagine troppo grande è inutile perchè la risoluzione disponibile su uno schermo è fissa.
Se ad esempio ho un’immagine con larghezza 5000 pixel sto caricando un contenuto inutilmente grande, in quanto ad oggi, gli schermi nella maggior parte dei casi hanno una risoluzione massima di 1920px (Full HD) e in rari casi si arriva ad usare i famosi 4K (3840 pixel) che sono comunque meno della larghezza iniziale dell’immagine di esempio.
Quindi prima di tutto impariamo a ridimensionare le immagini, a seconda dell’uso che ne facciamo. Ad esempio, per le immagini a tutto schermo non andrei oltre il 1920px.
Altro caso da evidenziare sono le gallerie d’immagini. Anche qui evitate di caricare come miniatura l’immagine originale, ma createvi un’immagine di miniatura ad-hoc. Lo so, può sembrare una rottura, ma ne guadagnerete davvero tanto in termini di prestazioni.
Compressione e formato dell’immagine
Oltre alla dimensione dell’immagine, un altro aspetto risulta fondamentale per ottimizzare un’immagine: il formato e relativa compressione. Ad oggi i formati immagini sicuramente più compatibili e usati nel web sono 2: PNG e JPG (o JPEG).
PNG è un formato che garantisce un’ottima qualità visiva e soprattutto permette di avere la trasparenza. L’aspetto negativo è che risulta un formato pesante e spesso sconsigliato se non si hanno esigenze particolari. Viene usato su elementi grafici come icone, bottoni o elementi grafici che richiedono trasparenza.
Sulle foto invece è altamente consigliato l’uso di JPG. Questo formato infatti ha un peso decisamente minore rispetto alla controparte PNG. Ok, qui non abbiamo la trasparenza, ma in una foto non è necessaria.
Il grosso vantaggio di questo formato è la possibilità di ridurre la resa grafica migliorando notevolmente il peso (cosa che PNG non può fare). Un file JPG infatti può avere una qualità che può andare da 100% (massima qualità, zero compressione) a 0% (massima compressione, zero qualità).
Se porto un file all’80% avrò un’immagine decisamente più leggera in termini di peso e la cui perdita di qualità non sarà visibile ad occhio nudo. C’è chi dice che ci si può spingere anche al 70%, ma non spingerei troppo la compressione.
Come ottimizzare un’immagine
Per migliorare un’immagine esistono diverse strade. La prima è quella di usare un classico programma di grafica, come Photoshop o Affnity photo. Questi programmi infatti permettono di ridimensionare e ottimizzare le immagini, anche con operazioni di massa.
Un’alternativa è quella di usare applicazioni nate esclusivamente per l’ottimizzazione delle immagini. Alcuni esempi sono: Imageoptim (Mac, gratuito), Riot (Win, gratuito), XNConverter (Win/Mac, a pagamento), ecc..
Infine, esistono diversi siti che vi ottimizzano le immagini on-line. Tra questi, lo strumento che vi consiglio di provare è Squoosh di casa Google.
Una volta aperta la pagina web vi chiederà di trascinare l’immagine da ottimizzare o di sceglierla tra le vostre cartelle. Una volta fatto vi troverete la vostra immagine a schermo intero con una barra di scorrimento a metà. Questa divide l’originale (a sinistra) dalla versione ottimizzata (destra). E potete scorrerla per vedere la differenza.
Potrete inoltre vedere nei 2 angoli in basso il peso della versione originale e modificata, così d’avere un’idea del guadagno in termini di peso.
Sulla parte di destra potete Modificare l’ottimizzazione indicando un ridimensionamento dell’immagine, il tipo di compressione e la qualità (in una scala da 1 a 100).
Infine, cliccando sul pulsante blu in basso a destra, scaricherete la versione ottimizzata.
Questa è sicuramente la soluzione più veloce se dovete ottimizzare un’immagine solamente. Mentre se avete da fare un lavoro su più immagini, l’uso dei programmi sopra descritto diventano le scelte migliori e quelle che vi consiglio.
Il futuro… già presente
Il futuro del web sta spingendo su un’altra tipologia di formati immagini, soprattutto per le foto, quindi in sostituzione del caro JPG. Sono formati più recenti che garantiscono una maggiore compressione, senza però perdere in qualità rispetto ai classici formati.
Tra questi abbiamo JPEG 2000, JPEG XR e soprattutto WebP. Quest’ultimo sembra essere il vero candidato a spodestare nel prossimo futuro il formato JPG, ma che ad oggi presenta ancora grossi problemi di compatibilità. Infatti, non è ancora un formato supportato da browser come Safari e Internet Explorer (Edge dalla versione 18 però sì).
Ancora nessun commento