Uno dei fattori che più influenzano la velocità di caricamento del tuo sito web è l’ottimizzazione delle immagini. Oggi ti spiegherò i fattori chiave da considerare su come comprimere le immagini su WordPress.

Perché comprimere le immagini su WordPress?

Come ti dicevo, uno dei fattori che più influisce sul peso di una pagina web e quindi sul tempo di caricamento, è il volume delle immagini.

Servire ai tuoi utenti un’immagine salvata correttamente significa evitare di far caricare a loro dati inutili.

Qui c’è un mondo da esplorare fatto di formati, dimensioni e tecniche per minimizzare le immagini. Già, perchè all’interno del file di un’immagine in realtà abbiamo tante informazioni, molte delle quali superflue.

Se vuoi passare direttamente alla pratica allora leggi il mio articolo su Come comprimere le immagini su WordPress

Partiamo!

Formati di immagine

Con formati di immagine intendo le estensioni con cui sono salvate.

Sul web si parla principalmente di 3 formati:

  1. JPG, le più diffuse;
  2. PNG, le migliori quando si vuole offrire un’immagine di qualità e/o con trasparenza;
  3. WebP, un nuovo formato con il miglior rapporto peso / qualità.

Non devi scegliere quale di questi formati utilizzare per tutto il tuo sito web. Dovrai imparare a distinguere in quali occasioni utilizzare quel specifico formato.

Il 99% delle immagini che andrai ad utilizzare potranno essere salvate tranquillamente in JPG. Ancora meglio se in formato WebP. Attento però: occorre utilizzare uno strumento che possa servire le immagini WebP solamente ai browser che sono in grado di leggerlo! Analizzeremo questo discorso più avanti…

Un’altro aspetto interessante del formato JPG è la possibilità di ridurne la qualità per salvare spazio. Qui di seguito un’esempio:

Come comprimere le immagini JPG
Immagine presa da Wikipedia.

I metadati

I metadati sono informazioni ausiliari contenuti nel file di immagine.

Queste informazioni possono descrivere qualunque cosa: dalla fotocamera utilizzata, alla data di creazione, al copyright, ecc.

Ecco un esempio di metadati dalle proprietà di un file immagine JPG

Ogni metadato ha una sua funzione e un suo peso in termini di byte.

La cosa migliore è rimuovere tutti i metadati superflui lasciando solamente quelli essenziali.

Comprimere le immagini: lossless o lossy?

Ora che hai avuto un’infarinatura sulla qualità dell’immagine e sui metadati è giusto che ti spieghi il significati di altri 2 termini che leggerai spesso sul web: lossless e lossy.

  • Lossless significa salvare le immagini senza perdita di informazioni e qualità.
  • Lossy significa ridurre al minimo le informazioni e la qualità dell’immagine.

Comprimere le immagini in formato lossy non è sbagliato per quanto possa sembrare un’eresia ridurne la qualità. Spesso non occorre servire foto ad alta risoluzione e quindi evitiamo un consumo di dati (e di tempo) da parte del nostro utente.

Dimensioni delle immagini

Con dimensioni delle immagini intendo il numero di pixel con cui le salviamo. Ad esempio 600×300 pixel, oppure 1920×1080 pixel.

Il primo pensiero di tutti è quello di salvare le immagini in JPG, magari riducendone la qualità per cercare di risparmiare qualche dato.

Sbagliato!

Il primo pensiero che devi avere è quello di offrire le immagini della giusta dimensione. Secondo te è utile salvare una foto a 1920px x 1080px se poi i tuoi utenti la andranno a visualizzare a 300px x 200px? Non credo proprio…

Quindi analizza le tue esigenze e salva le immagini nelle dimensioni più opportune.

Dato il mio sito è incentrato su guide inerenti a WordPress, entriamo nello specifico analizzando il principale strumento che andrà ad influire su questo aspetto: il tuo tema!

Utilizzare un tema ben fatto significa che avrai a disposizione quelle che sono chiamate Thumbnail (anteprime) del formato più adeguato alla struttura del tema stesso. Quando lo installerai verranno create le oppure configurazioni e rispettive dimensioni.

Ad esempio il tema di un blog potrà avere una dimensione ben definita per le anteprime degli articoli nella home page, oppure delle immagini del post o ancora per l’immagine di testata dell’articolo. 3 scopi diversi, 3 dimensioni diverse.

Un buon tema sfrutta varie dimensioni ma delle stesse proporzioni (ad esempio un’immagine di dimensioni 1000x1500px ha un rapporto di proporzioni pari a 1:1.5, come le “vecchie” foto 10x15cm). Questo ti aiuterà a semplificare il lavoro di ridimensionamento dato che non dovrai far altro che salvare le tue immagini nelle dimensioni più grandi e verranno adattate perfettamente a tutti gli altri scopi senza che vengano tagliate parti di esse.

Risoluzione delle immagini

La dimensione di un’immagine spesso viene confusa con la risoluzione. In realtà la risoluzione può essere chiamata anche densità di pixel, ovvero la quantità di pixel concentrate in una superficie.

Avrai sentito sicuramente parlare di densità di pixel nelle caratteristiche dei display dei computer o degli smartphone. Questo aspetto è molto importante anche per le immagini, soprattutto se dovrai stamparle.

Sul web però non ci sono particolari necessità e utilizzare risoluzioni troppo alte comporta solamente ad uno spreco di dati.

Ecco perchè dovrai salvare tutte le tue immagini con una densità di pixel pari a 72 ppi (pixel per inch – pixel per pollice).

Una corrente di pensiero dice che sarebbe meglio utilizzare una risoluzione pari a 150 ppi per fornire immagini ottimizzate per i display retina di Apple. Dato che si tratta di una quota di mercato ridotta, non trovo sensato raddoppiare la risoluzione di un’immagine per una differenza di qualità molto risicata…

Profilo colore

Un altro aspetto poco conosciuto è il profilo colore delle immagini.

Il profilo colore è la gamma di colori a disposizione per visualizzare la nostra immagine.

Un profilo colore evoluto ha una gamma più vasta ma carica di informazioni il nostro file.

Inoltre la possibilità di interpretare o meno un profilo colore cambia a seconda del dispositivo che utilizziamo.

Anche in questo caso non abbiamo necessità particolari sul web ed è meglio usare un profilo colore diffuso e leggero, ovvero il profilo sRGB.

Utilizzare altri formati può causare non solo un eccessivo consumo di dati ma anche una rappresentazione errata dei colori!

Comprimere le immagini sui social

Tutti questi aspetti di ottimizzazione delle immagini sono tenuti in considerazione e applicati anche dai maggiori social network in circolazione.

Non pensare che Facebook visualizzi le immagini così come le hai caricate…

Comprimere correttamente le immagini in funzione delle caratteristiche del social network in andremo a caricare la nostra immagine ci permetterà di evitare che i loro sistemi automatici rovinino la nostra immagine.

Noi abbiamo criterio e giudizio nell’applicare le giuste modifiche, i computer un po’ meno…

Se ti interessa ecco una guida sulle dimensioni delle immagini perfette per Facebook!

Come comprimere le immagini: riassumiamo

I 5 aspetti che influiscono sull’ottimizzazione delle immagini sono:

  1. Formato
  2. Metadati
  3. Dimensione
  4. Risoluzione
  5. Profilo colore

Per quanto riguarda risoluzione, metadati e profilo colore abbiamo dei punti fissi: 72ppi, zero metadati e profilo sRGB.

Per quanto riguarda dimensioni e formato dovrai ponderare sull’utilizzo delle immagini e le tue necessità.

In generale:

  • prediligi il formato JPG se non hai necessità di immagini con sfondo trasparente;
  • ancora meglio è il formato WebP che però non è supportato dai vecchi browser e dovrai quindi applicare un sistema per selezionare l’utente e offrirgli in automatico un’immagine in JPG o WebP;
  • usa la dimensione giusta, ovvero quella che più si avvicina alle tue necessità, sia sul tuo sito web che sui social.

Hai domande, dubbi o perplessità? Scrivimi nei commenti!

Autore

Francesco Maietti

Ciao, mi chiamo Francesco e sono un consulente web marketing. Il mio lavoro consiste nel portare online aziende per far crescere il loro brand ed aiutarle a vendere i loro prodotti e a trovare nuovi clienti.

Scrivi un commento

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.