Come ridimensionare le immagini prima di caricarle su WordPress

02 Set Come ridimensionare le immagini prima di caricarle su WordPress

Le immagini sono una parte fondamentale di un sito web, ma possono diventare anche una delle principali cause di pagine pesanti e lente da caricare. Uno degli errori più comuni consiste nel caricare direttamente su WordPress fotografie molto grandi, magari scattate con uno smartphone o una macchina fotografica, senza prima verificarne le dimensioni. Un’immagine può essere perfettamente visualizzata sul sito anche se è larga diverse migliaia di pixel, ma questo non significa che sia necessario caricare un file così grande.

Ridimensionare un’immagine prima di caricarla su WordPress permette di partire da un file più adatto al suo reale utilizzo, riducendo inutilmente dimensioni e peso. Qui vediamo come farlo in modo semplice, quali dimensioni scegliere e quali altri aspetti controllare prima di inserire un’immagine in una pagina o in un articolo.

Perché ridimensionare le immagini prima di caricarle su WordPress?

Immaginiamo di avere una fotografia larga 6000 pixel, sul nostro sito, però, quella stessa immagine viene mostrata all’interno del contenuto a una larghezza di circa 1200 pixel. La domanda quindi è semplice: perché caricare un’immagine larga 6000 pixel se nella pagina ne utilizziamo una molto più piccola?

Non sempre è necessario utilizzare l’immagine originale alla sua massima risoluzione, ridimensionare l’immagine significa quindi modificare le sue dimensioni in pixel, mantenendo possibilmente le proporzioni originali. Ad esempio: 6000 × 4000 px diventano 1600 × 1067 px.

L’immagine continua ad avere lo stesso rapporto tra larghezza e altezza, ma è molto più adatta a essere utilizzata su un sito web. Questo intervento non deve essere confuso con la compressione, ridimensionare significa modificare le dimensioni dell’immagine, mentre comprimere significa invece ridurre il peso del file cercando di mantenere una qualità visiva adeguata.

Le due operazioni possono essere utilizzate insieme e, nella maggior parte dei casi, è proprio questa la soluzione migliore.

Dimensioni dell’immagine e peso del file non sono la stessa cosa

Un errore abbastanza comune è pensare che un’immagine con pochi megabyte sia semplicemente “grande”, in realtà dobbiamo distinguere almeno due caratteristiche:

• Dimensioni: espresse in pixel, ad esempio 1920 × 1080 px;
• Peso del file: espresso normalmente in KB o MB.

Un’immagine può quindi essere molto grande in termini di risoluzione ma avere un peso relativamente contenuto, oppure avere dimensioni più ridotte ma essere comunque molto pesante a causa del formato, della qualità di compressione o dei dati contenuti nel file. Per questo motivo non basta chiedersi “Quanto pesa questa immagine?” ma è utile chiedersi anche “Di quanti pixel ho realmente bisogno?“. Ridurre le dimensioni dell’immagine prima dell’upload permette di partire già da un file adeguato all’utilizzo previsto.

Quanto deve essere grande un’immagine per un sito web?

Non esiste una dimensione valida per tutte le immagini, la misura corretta dipende principalmente da dove verrà utilizzata l’immagine e da quanto spazio occuperà nella pagina. Ad esempio, un’immagine inserita all’interno del testo di un articolo potrebbe non avere bisogno della stessa risoluzione di una fotografia utilizzata come grande immagine di apertura.

Come regola pratica, prima di ridimensionare un’immagine conviene chiedersi quanto spazio occuperà realmente nella pagina. Se il contenitore del contenuto è largo circa 1200 pixel, non ha molto senso utilizzare sistematicamente immagini larghe 5000 pixel o più. Naturalmente bisogna considerare anche gli schermi ad alta densità e il modo in cui il tema WordPress gestisce le immagini responsive. WordPress può infatti generare e utilizzare diverse dimensioni della stessa immagine, mentre il browser può scegliere una versione più adatta alle dimensioni dello schermo.

Per questo motivo non bisogna interpretare valori come “1200 pixel” come una regola assoluta, il concetto più importante è un altro: ossia evitare di caricare immagini enormemente più grandi rispetto alle dimensioni necessarie.

Come ridimensionare un’immagine prima di caricarla su WordPress

Il procedimento è molto semplice, puoi utilizzare praticamente qualsiasi programma di modifica delle immagini che permetta di impostare una larghezza e un’altezza precise, l’importante è mantenere le proporzioni dell’immagine.

Supponiamo di avere una fotografia di 5000 × 3333 pixel e di volerla utilizzare in un articolo, potremmo ridimensionarla, ad esempio, a 1600 × 1066 pixel. Il valore esatto dipenderà dal layout del sito e dall’utilizzo che faremo dell’immagine.

Attenzione alle proporzioni

Quando ridimensioni un’immagine, assicurati che il rapporto tra larghezza e altezza rimanga invariato, in caso contrario potresti ottenere fotografie deformate: un volto potrebbe apparire allungato, un edificio potrebbe risultare schiacciato e un oggetto circolare potrebbe diventare ovale. La maggior parte dei programmi di modifica delle immagini permette di bloccare automaticamente le proporzioni durante il ridimensionamento.

Ridimensionare non significa semplicemente visualizzare l’immagine più piccola

Questa distinzione è particolarmente importante, supponiamo di avere un’immagine di 5000 pixel di larghezza e di inserirla in WordPress visualizzandola a 1200 pixel. A livello grafico la vedremo effettivamente più piccola, ma questo non significa necessariamente che il file originale sia stato ridimensionato. Il browser e WordPress possono gestire diverse versioni dell’immagine, ma è comunque buona pratica partire da file ragionevoli e utilizzare immagini responsive correttamente configurate.

Google raccomanda infatti di utilizzare immagini responsive attraverso tecniche come srcset e picture, permettendo al browser di scegliere una versione appropriata alle dimensioni e alle caratteristiche del dispositivo. Per questo motivo è meglio non affidarsi all’idea di pensare “Carico sempre l’immagine originale, tanto WordPress la riduce“. È un approccio che può creare inutilmente file pesanti e una libreria media piena di originali sovradimensionati.

Quale formato scegliere per le immagini?

Una volta ridimensionata l’immagine, bisogna scegliere anche il formato più adatto, i formati più comuni sono:

JPEG: è ancora molto utilizzato per le fotografie e per le immagini con molti colori, particolarmente adatto alle fotografie perché permette di ottenere una buona riduzione del peso mantenendo una qualità visiva generalmente elevata.

PNG: è utile soprattutto quando sono necessarie caratteristiche come la trasparenza o quando l’immagine contiene elementi grafici per i quali è importante evitare determinati tipi di perdita di qualità. Non è però automaticamente il formato migliore per tutte le fotografie.

WebP: è un formato moderno supportato dai principali browser e utilizzabile per immagini fotografiche e grafiche, può consentire di ottenere file più leggeri rispetto a formati tradizionali, mantenendo una buona qualità visiva.

AVIF: è un formato più recente che può offrire un’ottima efficienza nella compressione delle immagini, anche Google Search supporta AVIF, insieme a JPEG, PNG, WebP, GIF, SVG e altri formati.

Se il tuo sistema WordPress, il tema o il servizio di ottimizzazione delle immagini gestisce automaticamente i formati moderni, può essere preferibile lasciare che sia il sistema a occuparsene.

Dopo il ridimensionamento comprimi l’immagine

Ridimensionare l’immagine è solo uno dei passaggi, dopo aver scelto le dimensioni corrette, è possibile intervenire anche sulla compressione. Il risultato ideale è trovare un equilibrio tra:

• Qualità visiva
• Dimensioni in pixel
• Peso del file
• Velocità di caricamento

Non bisogna infatti cercare di ottenere l’immagine più piccola possibile a qualsiasi costo, un’immagine troppo compressa può presentare artefatti, perdita di dettaglio e una qualità visiva evidente. Google stessa sottolinea l’importanza di trovare un equilibrio tra qualità e velocità: immagini troppo pesanti possono contribuire a rendere lenta una pagina, ma immagini sfocate o di scarsa qualità peggiorano l’esperienza utente. La soluzione migliore è quindi ridurre il peso senza compromettere visibilmente la qualità.

E se le immagini sono già state caricate su WordPress?

Se hai già un sito WordPress con centinaia o migliaia di immagini, non è necessario ricominciare da zero, puoi individuare le immagini più pesanti e valutare quali siano realmente sovradimensionate rispetto al loro utilizzo. Per le nuove immagini, invece, è molto più semplice adottare una procedura corretta fin dall’inizio, in questo modo eviti di continuare ad accumulare nella Libreria Media file inutilmente grandi.

WordPress permette inoltre di configurare le dimensioni utilizzate per alcune delle versioni delle immagini generate dal sistema attraverso le impostazioni dei media. È comunque importante ricordare che queste impostazioni non sostituiscono necessariamente un’adeguata preparazione dell’immagine originale.

Come capire se le immagini stanno rallentando il sito?

Dopo aver ottimizzato le immagini, puoi verificare le prestazioni delle tue pagine attraverso strumenti di analisi come Google PageSpeed Insights. Questi strumenti possono aiutarti a individuare risorse che incidono sul caricamento della pagina e a capire se le immagini rappresentano uno dei problemi da risolvere.

È importante però non fissarsi esclusivamente sul punteggio, un sito non diventa automaticamente veloce perché raggiunge un determinato numero in un test. L’obiettivo dovrebbe essere offrire all’utente una pagina che si carichi rapidamente e che sia piacevole da utilizzare anche da smartphone e con connessioni meno performanti.

Non dimenticare il nome del file e il testo alternativo

Ridurre il peso delle immagini non significa occuparsi esclusivamente delle prestazioni, prima di caricare un’immagine su WordPress è utile controllare anche il nome del file. È meglio avere un file chiamato “ottimizzare-immagini-wordpress.webp” piuttosto che “IMG_4587.webp”.

Un nome descrittivo aiuta i motori di ricerca a comprendere meglio il contenuto dell’immagine, Google consiglia infatti di utilizzare nomi di file brevi e descrittivi e di fornire un testo alternativo utile e coerente con il contesto. Anche il testo alternativo, però, non dovrebbe essere utilizzato per inserire artificialmente parole chiave, deve soprattutto descrivere l’immagine quando quella descrizione è utile all’utente, contribuendo anche all’accessibilità della pagina.