Più leggero è il tuo sito web, più sostenibile e veloce sarà. Meglio per il pianeta e più veloce per i tuoi visitatori.
Uno dei principali impatti che dobbiamo sorvegliare nella realizzazione delle pagine del nostro sito è la dimensione delle immagini del sito web. Con l’avvento dei cellulari e la corsa dei MBpixel nelle fotocamere, spesso carichiamo le nostre immagini molto più grandi del necessario. Qual è la conseguenza? Tempi di caricamento più lunghi e molto spreco di energia. È ora di fare qualcosa al riguardo!
Perché la dimensione del sito web è importante
I visitatori (e Google) apprezzano i siti veloci
Come ti ho accennato all’inizio, le tue foto alla massima risoluzione non vanno bene per essere caricate su uno spazio web.
Scattare immagini ad una risoluzione altissima è ottimo se vuoi stampare poster giganteschi. Su internet, invece, è tutta un’altra storia.
Immagini da 10 Mbyte e oltre, impiegherebbero un tempo interminabile per essere caricate (e visualizzate) su una pagina web. Questo provocherebbe un tempo di navigazione lentissimo.
Il visitatore medio non ha pazienza. Se una pagina impiega più di 3 secondi per caricarsi, viene immediatamente abbandonata. Ogni secondo di ritardo riduce la soddisfazione del visitatore del 16%.
Inoltre anche Google apprezza i siti veloci. Un sito veloce, infatti, verrà indicizzato meglio. Al contrario, un sito molto lento, verrà penalizzato. Tradotto: se hai un sito ottimizzato, ti posizionerai più in alto nelle ricerche su Google.
Siccome il testo pesa pochi kbyte, ciò che può rallentare il tuo sito sono proprio le foto pesanti. Prima di caricarle sul server, quindi, è necessario che ottimizzi i tuoi file.
Per farlo, devi trovare il giusto compromesso tra peso e qualità dell’immagine.
Come misurare le dimensione delle immagini di un sito web?
-
Dimensioni in pixel
Quanti pixel ha un’immagine? Più grande è una foto, maggiore è il numero di pixel. Pertanto, maggiore è il numero di dati e più grande è il file. Non c’è quindi una risposta corretta ma bisogna capire qual’è lo scopo della tua immagine. Se si tratta di immagini decorative possiamo avere una risoluzione inferiore (ad esempio, 640×480 pixel) rispetto alle immagini utilizzate per scopi informativi.
Invece immagini informative: come grafici o diagrammi, potrebbero necessitare di una risoluzione più elevata (ad esempio, 1280×960 pixel) per mantenere la nitidezza. Non perdiamo di vista però la posizione dell’immagine. Immagini a tutta larghezza: possono essere di 1920 pixel, a seconda del layout che si sceglie per il sito web. Mentre immagini all’interno di un articolo: in genere hanno una larghezza di 600-800 pixel.
-
Formato immagine
Con questo intendo il tipo di file. È un JPG, PNG, BMP, WEBP o AVIF? Alcuni tipi d’immagine memorizzano le informazioni per ciascun pixel separatamente. Altri comprimono tali informazioni in modo più o meno efficiente. In alcuni casi è anche possibile archiviare metadati. Se vuoi utilizzare il formato ottimale per una immagine di un sito web utilizza il “WebP”.
Qui puoi trovare ulteriori informazioni sulle immagini WebP.
-
Dpi
Molti dei miei clienti mi chiedono quanti dpi dovrebbero avere le foto per il loro sito web. La risposta corretta è 72 Dpi. C’è anche un motivo tecnico per utilizzare questo valore. I monitor visualizzano le immagini a 72 dpi. Anche se la maggior parte dei monitor ha una risoluzione di 96 dpi, non significa che le immagini debbano essere a 96 dpi. I monitor visualizzano le immagini a 72 dpi interpolando i pixel, quindi una risoluzione di 72 dpi è sufficiente per una visualizzazione nitida.
Le immagini a 72 dpi hanno dimensioni in byte inferiori rispetto alle immagini a risoluzioni più elevate quindi file più piccoli. Questo significa che le pagine web si caricheranno più velocemente e si consumerà meno banda. La qualità visiva è indistinguibile per la maggior parte delle immagini perché la differenza di qualità visiva tra 72 dpi e risoluzioni più elevate è impercettibile per l’occhio umano.
Un Dpi più elevato è rilevante solo per la stampa. Dpi sta per “punti per pollice” e indica quanti pixel devono essere stampati in un pollice (2,5 cm). Se stampi la tua foto a 150 dpi, su quel pollice verranno stampati 150 pixel. Con 300 dpi puoi stiparne 300 nello stesso pollice. In stampa, ciò rende la tua foto più chiara ma anche più piccola.
Come ottimizzare le dimensione della pagina web?
Ridimensionare
Ridurre le immagini ha un effetto maggiore di qualsiasi altra cosa per rendere le immagini del tuo sito web più sostenibili.
Non so voi, ma il mio telefono può scattare foto da 50 MP (megapixel). Sono 8165 x 6124 pixel. Bello scattare foto in alta definizione durante un’escursione, senza dover portare una pesante reflex nello zaino. Ottimo se vuoi realizzare un bel fotolibro. Ma troppo per un sito web.
Una risoluzione così alta può essere apprezzata solo per la stampa (e negli ingrandimenti). Un monitor, anche in formato full HD, ha dimensioni massime di 1920 x 1080 pixel e una risoluzione massima di 96 dpi. Come vedi, tutto il resto è superfluo.
In molte altre situazioni 1280, 768, 600, 400, 300, 100, 50 pixel o qualsiasi altra via di mezzo sarà sufficiente, a seconda dello scopo dell’immagine, della sua posizione e delle dimensioni finali sul tuo sito web.
Tipo di file
Scegli il tipo di file più leggero possibile. JPG va bene, ma se vuoi fare un ulteriore passo avanti, dai un’occhiata a WEBP. È adatto anche per immagini con uno sfondo trasparente, così non dovrai più avere a che fare con giganteschi file PNG.
Qualità dell’esportazione
Alcuni tipi di file, inclusi JPG e WEBP, potrebbero omettere o unire determinate informazioni durante la compressione, in base alla qualità di esportazione scelta. A seconda della qualità e delle dimensioni della tua immagine, difficilmente potresti notarlo.
Quindi sentiti libera di sperimentare una qualità di esportazione del 90% o anche dell’80% e vedere cosa va bene per il tuo sito web. Trova un buon equilibrio tra dimensioni ridotte del file e un’immagine che sia comunque presentabile e attraente per il tuo pubblico. Ricorda di mantenere sempre l’originale sul tuo disco rigido.
Metadati
Al giorno d’oggi puoi davvero allegare una marea di metadati alle tue immagini. Data e ora sono probabilmente i più conosciuti, ma anche copyright, coordinate GPS, tag ecc. Ha senso per quell’immagine sul tuo sito web? Pensa a questo e decidi quali metadati vuoi conservare quando esporti la tua immagine e cosa puoi tralasciare.
Suggerimento da professionista: ridimensiona le tue immagini prima di caricarle sul tuo sito web ed esportale immediatamente nel tipo di file desiderato e nella giusta qualità.
- WP Optimize
Uno dei plugin di ottimizzazione più utilizzati. WP Optimize ti consente di convertire automaticamente tutte le immagini caricate sul tuo sito web in WEBP. La versione premium dispone anche del caricamento lento e della possibilità di trovare ed eliminare facilmente file e formati non utilizzati.
