Come ottimizzare le immagini per il web

🕐 8 minuti @ Condividi via Email
Aggiornato:
Come ottimizzare le immagini per il web
(Photo by Giuseppe Ruco on Unsplash)

Ottimizzare le immagini per il web spesso è indispensabile, specialmente per formati di grandi dimensioni e con un peso in MB importante.


Quali immagini uso

Sul mio sito, uso solo immagini dove la dimensione massima è di 640 px, che sia altezza o larghezza, con questa soluzione estrema cerco di rendere le pagine il più possibile ottimizzate soprattutto per i dispositivi mobili.

Il mio sito però, non fa delle immagini il suo uso essenziale, come invece può essere per un sito di fotografia, o comunque dove le immagini hanno un ruolo importante.

● Come prima cosa, serve ricordare una volta in più i dispositivi mobili; sebbene molto evoluti e performanti, e non bisogna nemmeno dimenticare la velocità di connessione ad internet, che non è per tutti uguale.

Ciò sul desktop può essere scontato, non è affatto detto che lo sia anche su dispositivo mobile, quindi è sempre importante ricordare questo aspetto.

Ci sono diversi siti di immagini royalty free con licenza CCO 1.0, dove è consentito prelevarle, sia per uso personale che commerciale, e non è nemmeno richiesta l'attribuzione, anche se, almeno la fonte la cito sempre.

Ottimizzare le immagini per il web: le dimensioni

Personalmente, trovo che immagini con dimensione massima di 1280 px sia già particolarmente appetibile, quando di 2400 px è in grado di adattarsi ulteriormente anche per schermi piuttosto grandi.

● Un'immagine che ad esempio ha una misura di 1920 x 1280 px rappresenta un buon compromesso per essere pubblicata sul web, quando di qualità, con una buona risoluzione.

Il peso

Una foto, o immagine per il web, non dovrebbe andare oltre gli indicativi 200 KB di peso, per essere caricata facilmente.

Per ridurre il peso delle immagini, sono disponibili su internet molte risorse gratuite, efficaci, affidabili, basta che le provi e ti rendi conto.

Ti faccio un esempio concreto: ho presto questa immagine da Unsplash, e ho fatto il download nei formati disponibili, questo è il link.

Immagine 640 x 427 px
(Photo by Jarritos Mexican Soda on Unsplash)

1) Quella che vedi qua sopra, è il formato più piccolo disponibile, misura 640 x 427 px e pesa 60,2 KB, non necessita nemmeno di essere ridotta nel peso.

2) Poi ho scaricato quella da 1920 x 1280 px che pesa 397 KB, dopo la compressione arriva a 195,35 KB mantenendo una buona definizione.

3) Quella da 2400 x 1600 px pesa 611 KB, e compressa 303,67 KB, anche in questo caso la metà del peso, per un'immagine di buona definizione, con dimensioni di tutto rispetto.

4) Il formato originale, 5831 x 3887 px la bellezza di 3,73 MB; impensabile caricare file di questo peso su di un sito web, un peso tale non è nemmeno consentito quando si tratta di caricare documenti online, solitamente mai oltre i 2 MB ciascuno, anche perché effettivamente, non c'è nessun bisogno di arrivare a tanto.

La qualità offerta dalle immagini 2 e 3 è decisamente buona, e il peso facilmente aggiustabile, senza perdere la qualità.

Online tool

Questi sono 3 tool on line decisamente interessanti per comprimere le immagini, mantenendo una buona qualità, e portando il peso ad essere facilmente gestibile:

Image Resizer Compressor su imageresizer.com;

Image Compressor su 11zon.com;

TinyPNG tinypng.com

Con l'immagine da 1920 x 1280 px su Image Resizer Compressor ho ottenuto un peso inferiore del 51%, mentre con TinyPNG del 48%, in entrambi i casi decisamente buono.

Con 11zon puoi decidere da te in quale percentuale ridurre il peso dell'immagine, ma non dimenticare che quando la compressione va oltre un certo limite, diciamo oltre il 60%, la qualità tende a peggiorare notevolmente.

Piuttosto che mettere sul sito un'immagine che risulta estremamente leggera nel peso, ma sgranata, sfocata, meglio non mettere nulla, se siamo messi così male, anche perché online ci sono semplici strumenti alla portata di tutti, che permettono di avere foto di buona, alta qualità, e ottimizzate bene.

Un errore che ho fatto io, nella paranoia di non pubblicare foto pesanti, e adesso sto rimediando.

Loading lazy

L'attributo loading="lazy" da inserire nel tag <img src favorisce in buona misura il caricamento delle immagini, lo rallenta, per facilitare il lavoro del browser durante il caricamento della pagina.

Esempio:

<img src="image.jpg" alt="..." loading="lazy">

Questo attributo, lo si può aggiungere anche negli iframe

<iframe src="video.html" title="..." loading="lazy">

Se usi WordPress, loading="lazy" è presente di default, come gli attributi srcset che permettono ai browser di caricare le immagini più adeguate rispetto al display in uso; questo accade quando carichi sul sito diverse foto, come grande, media, piccola.

Srcset

Questo attributo, mette a disposizione del browser diversi formati, della stessa foto, o immagine.

<img srcset="elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="elva-fairy-800w.jpg"
alt="Elva dressed as a fairy">
fonte codice mozilla.org

In questo modo, secondo le dimensioni del display disponibile, l'attributo srcset permette al browser di individuare il formato migliore, che si possa caricare nel più breve tempo possibile.

Se decidi di avere diversi formati della stessa foto, o immagine, da caricare sul tuo sito web, questa opzione è sicuramente da considerare, l'HTML 5 è ben supportato da diversi browser.

Compressione immagini

I tool che ti ho indicato sopra, permettono anche di comprimere le immagini, risparmiando circa il 50% in termini di peso, ma un riguardo va sempre dato alla qualità della foto una volta compressa, qualità che comincia da quella originale.

È impensabile avere foto di pochissimi KB e pretendere, allo stesso tempo, alta definizione; ma ad un buono, ottimo compromesso, si può facilmente arrivare, riducendo in modo notevole il peso.

Se non vai oltre i 200 KB indicativi, quando carichi una foto sul tuo sito, nei tuoi articoli, non hai di che temere, specialmente se in combinazione alla compressione dell'immagine, o al suo ridimensionamento, usi gli attributi srcset e loading lazy ormai di default sui CMS, e compatibili con HTML.

Ottimizzare le immagini per il web in modo semplice

Queste soluzioni sono semplici, e concrete, in termini di risultati, non serve nemmeno avere software sul PC per modificare, ritagliare, etc. a meno che non devi eseguire lavori di una certa complessità alle fotografie, o alle immagini.

Sono quelle originali, che risultano pesanti, e anche grandi nelle dimensioni, ma penso che nessuno necessiti di pubblicare sul sito immagini così ingombranti.

I siti da cui puoi scaricare foto, ovviamente mettono a disposizione anche quelle nel formato originale; puoi usarle come sfondo del desktop, per altri progetti, ma sarebbe impensabile caricare su di un sito formati così pesanti, i dispositivi mobili, ma anche i desktop, non sarebbero così veloci nel caricare le pagine.

Senza contare il fatto che la connessione ad internet, non è sempre veloce a tal punto da eseguire download immediati, ed anche quando guardi semplicemente una pagina web, senza scaricare nulla da salvare su phone o PC, il download viene di fatto eseguito, in quanto nella cache del dispositivo rimane memorizzata la pagina che stai visualizzando, fino a quando non cancelli la cache.

Ottimizzare le immagini per il web, è un lavoro semplice, che però aiuta molto il sito web nella velocità di caricamento delle pagine, specialmente usando gli attributi lazy loading e srcset, che sono di default nei CMS più usati.

Plugin per WordPress

Uso WordPress, ma non ho mai avuto la necessità di usare plugin per ottimizzare le immagini, ho sempre preferito fare da me, dato che ne uso solo di peso modesto e formato piccolo, dove 640 px sono la dimensione massima, che sia altezza o larghezza.

Uso però Autoptimize plugin, che trovo molto interessante, e può fare diverse cose:

• minifica il codice HTML, Javascript, e CSS;

• permette di inserire il critical CSS;

• aggrega i file .js e .css in un rispettivo file;

• può rimuovere le emoji se non le usi, e poi, lavora anche sulle immagini;

aggiunge una classe ad ogni immagine class="lazyload" dove puoi ulteriormente ottimizzarle;

• offre la possibilità di usare gratuitamente la CDN di shortpixel.com

A questo proposito però va detto che le CDN gratuite (Content Delivery Network), sono piuttosto lente, sarebbe assurdo pretendere il contrario, da usare solo se il proprio hosting web è davvero lento, come spesso accade nelle soluzioni ultra economiche.

 

Felice Amadeo - af1.it
Dal 2006 lavoro con internet, scrivo i contenuti e provvedo alla gestione del sito. Ho conosciuto WordPress tanti anni fa, e dal 2013 uso questo.
Invecchiando, ho scoperto che mi piace portare il cappello.