Immagini Responsive in WordPress: srcset, sizes e Ottimizzazione

In un mondo dove il traffico web proviene da una moltitudine di dispositivi — smartphone con schermi da 5 pollici, tablet da 10 pollici, laptop da 14 pollici e monitor desktop da 27 pollici — servire un’unica versione di ogni immagine è un compromesso inaccettabile. Un’immagine ottimizzata per un monitor desktop 4K è enormemente sovradimensionata per uno smartphone; un’immagine ottimizzata per mobile è sgranata e poco professionale su un grande schermo. Le immagini responsive risolvono questo problema servendo automaticamente la versione dell’immagine più adatta al dispositivo del visitatore.

In questa guida completa vedremo come funzionano le immagini responsive in WordPress, il ruolo degli attributi srcset e sizes, e come Smush ottimizza ogni variante per garantire le migliori prestazioni su ogni dispositivo.

Il Problema: Un’Immagine Non Va Bene per Tutti

Consideriamo un esempio concreto. Hai un’immagine hero larga 1920 pixel, perfetta per un monitor desktop. Su uno smartphone con viewport di 375 pixel, il browser scarica comunque l’immagine da 1920 pixel (che pesa, diciamo, 400 KB) e la mostra a 375 pixel — sprecando l’80% della banda. Se la stessa immagine fosse servita a 400 pixel di larghezza per lo smartphone, peserebbe solo 50-80 KB.

Questo spreco non è solo teorico. Con il 60% del traffico web proveniente da dispositivi mobili, la maggior parte dei visitatori del tuo sito riceve immagini sovradimensionate. Il risultato è un sito lento su mobile, un consumo eccessivo dei dati dell’utente e punteggi Core Web Vitals penalizzanti.

Le immagini responsive risolvono questo problema elegantemente, permettendo al browser di scegliere la versione dell’immagine più appropriata in base alla dimensione della viewport, alla densità di pixel dello schermo e alla velocità della connessione.

Come Funziona srcset in WordPress

L’attributo srcset è il cuore del sistema di immagini responsive in HTML. Introdotto in HTML5, permette di specificare più versioni della stessa immagine con dimensioni diverse, lasciando al browser la scelta di quale scaricare.

WordPress supporta nativamente srcset dalla versione 4.4, generandolo automaticamente per tutte le immagini inserite nell’editor. Quando carichi un’immagine, WordPress genera diverse miniature (thumbnail, medium, medium_large, large, full) e inserisce automaticamente queste varianti nell’attributo srcset del tag <img>.

Ecco un esempio di come appare un tag immagine con srcset generato da WordPress. Il tag include l’URL dell’immagine principale nell’attributo src, poi un srcset con diverse versioni accompagnate dal loro descrittore di larghezza (ad esempio 300w, 768w, 1024w, 1920w). Il browser confronta queste larghezze con la larghezza effettiva dello slot in cui l’immagine verrà mostrata e sceglie la versione più appropriata.

Il descrittore w indica la larghezza in pixel dell’immagine sorgente. Un’immagine con 800w nel srcset è larga 800 pixel. Il browser confronta questo valore con la larghezza dello slot (determinata da CSS e layout) moltiplicata per la densità di pixel dello schermo. Su un dispositivo Retina 2x con uno slot di 400 pixel CSS, il browser cercherà un’immagine di almeno 800 pixel reali.

L’Attributo sizes: Guidare la Scelta del Browser

Mentre srcset fornisce le opzioni disponibili, l’attributo sizes dice al browser quanto sarà grande lo slot dell’immagine in diverse condizioni di layout. Questo è fondamentale perché il browser deve decidere quale immagine scaricare prima di aver completato il rendering del layout, quindi non conosce ancora la dimensione effettiva dello slot.

L’attributo sizes utilizza media query CSS per specificare la larghezza dello slot in diverse viewport. Ad esempio, un valore come (max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw dice al browser che su schermi fino a 768 pixel l’immagine occupa il 100% della viewport, su schermi fino a 1200 pixel occupa il 50% e su schermi più grandi occupa il 33%.

WordPress genera automaticamente un attributo sizes di base, ma spesso non è preciso per il layout specifico del tuo tema. Il valore predefinito di WordPress è generalmente (max-width: [larghezza-immagine]px) 100vw, [larghezza-immagine]px, che funziona ma non è ottimale per layout multi-colonna o design complessi.

Per ottenere risultati ottimali, dovresti personalizzare l’attributo sizes in base al layout effettivo del tuo tema. Alcuni temi avanzati lo fanno automaticamente; in caso contrario, puoi utilizzare un plugin o un filtro WordPress per generare valori sizes più precisi.

Le Dimensioni delle Miniature di WordPress

La qualità delle immagini responsive dipende direttamente dalla varietà di miniature disponibili. WordPress genera per default le seguenti dimensioni: Miniatura (150×150, ritagliata), Media (max 300×300), Media Large (max 768px di larghezza), Grande (max 1024×1024). L’immagine originale (full size) è sempre disponibile come opzione aggiuntiva.

Queste dimensioni predefinite coprono una gamma ragionevole di dispositivi, ma potrebbero non essere ottimali per il tuo layout specifico. Se il tuo contenuto è largo 800 pixel, avere miniature a 300, 768 e 1024 pixel lascia un “buco” tra 300 e 768 dove il browser deve scegliere un’immagine più grande del necessario.

Puoi aggiungere dimensioni personalizzate tramite la funzione add_image_size() nel file functions.php del tuo tema. Ad esempio, aggiungere una dimensione a 600 pixel e una a 1200 pixel copre meglio la gamma di dispositivi comuni. Tieni presente che ogni dimensione aggiuntiva aumenta lo spazio su disco e il tempo di caricamento nella Libreria Media.

Il Ruolo di Smush nelle Immagini Responsive

Smush gioca un ruolo fondamentale nell’ottimizzazione delle immagini responsive, perché comprime tutte le varianti generate da WordPress, non solo l’immagine originale. Quando carichi un’immagine e WordPress genera 6-10 miniature, Smush le comprime tutte, garantendo che ogni versione servita al browser sia la più leggera possibile.

Senza Smush, le miniature generate da WordPress vengono salvate con il livello di qualità predefinito di WordPress (82 per i JPEG, configurabile tramite filtro). Questo livello è un buon compromesso ma lascia margine per un’ulteriore ottimizzazione. Smush applica la compressione aggiuntiva (lossless, lossy o Super-Smush) su ogni miniatura, riducendo il peso di un ulteriore 20-60%.

Il CDN di Smush Pro aggiunge un ulteriore livello di ottimizzazione. Quando è attivo, il CDN può servire immagini ridimensionate dinamicamente in base al dispositivo del visitatore, senza dipendere dalle miniature pregenerate da WordPress. Questo significa che ogni dispositivo riceve un’immagine con la dimensione esatta necessaria, non la miniatura preimpostata più vicina.

Il Tag picture per il Controllo Avanzato

Per scenari più complessi, HTML offre l’elemento <picture>, che fornisce un controllo superiore rispetto a srcset. L’elemento <picture> permette di specificare immagini completamente diverse (non solo dimensioni diverse della stessa immagine) in base a media query specifiche.

I casi d’uso più comuni per <picture> sono l’art direction (mostrare un ritaglio diverso dell’immagine su mobile rispetto a desktop), il fallback di formato (servire WebP con fallback JPEG) e la sostituzione completa dell’immagine in base al dispositivo.

Smush utilizza il tag <picture> come metodo opzionale per servire immagini WebP con fallback al formato originale. Quando questa opzione è attiva, Smush avvolge ogni tag <img> in un elemento <picture> che include sia la versione WebP che quella originale. Il browser sceglie automaticamente la versione WebP se supportata.

Densità di Pixel e Schermi Retina

Gli schermi ad alta densità di pixel (Retina, AMOLED) complicano il calcolo della dimensione ottimale delle immagini. Uno schermo Retina 2x ha il doppio dei pixel fisici rispetto alla risoluzione logica, quindi un’immagine mostrata a 400 pixel CSS necessita di 800 pixel reali per risultare nitida. Uno schermo 3x richiede 1200 pixel reali per lo stesso slot da 400 pixel.

Il sistema srcset gestisce automaticamente questo calcolo. Quando il browser valuta quale immagine scaricare, moltiplica la larghezza dello slot per la densità di pixel del dispositivo (device pixel ratio, DPR). Su un dispositivo 2x con uno slot di 400 pixel, cercherà un’immagine di almeno 800 pixel nel srcset.

Questo meccanismo è importante per capire perché le immagini originali devono avere una risoluzione sufficientemente alta. Se la dimensione massima di ridimensionamento di Smush è impostata a 1200 pixel, un dispositivo 3x con uno slot di 500 pixel richiederebbe 1500 pixel — che non sono disponibili. Il browser sceglierebbe l’immagine più grande disponibile (1200 pixel), che potrebbe risultare leggermente meno nitida del possibile.

In pratica, la maggior parte degli utenti non nota la differenza tra un’immagine 2x e una 3x. Impostare il ridimensionamento massimo di Smush a 2048 pixel copre adeguatamente la maggior parte degli scenari, inclusi gli schermi Retina 2x con layout a tutta larghezza.

Ottimizzazione delle Immagini di Sfondo CSS

Un limite del sistema srcset è che funziona solo con le immagini inserite tramite tag <img> nell’HTML. Le immagini di sfondo CSS (definite con background-image) non beneficiano di srcset e vengono sempre caricate nella loro dimensione originale, indipendentemente dal dispositivo.

Per le immagini di sfondo responsive, la soluzione è utilizzare le media query CSS per specificare immagini diverse in base alla dimensione della viewport. Puoi definire un’immagine di sfondo piccola per mobile, una media per tablet e una grande per desktop, ciascuna ottimizzata per la sua dimensione target.

Smush comprime tutte queste varianti di sfondo come qualsiasi altra immagine nella Libreria Media. Il CDN di Smush Pro, inoltre, può servire automaticamente la versione ottimizzata in base al dispositivo, anche per le immagini di sfondo, tramite riscrittura URL.

Problemi Comuni e Soluzioni

L’implementazione delle immagini responsive in WordPress non è sempre priva di problemi. Ecco i più comuni e le relative soluzioni.

srcset non generato: se le tue immagini non hanno l’attributo srcset, le cause più comuni sono miniature non generate (rigenerale con un plugin come Regenerate Thumbnails), immagini troppo piccole (WordPress non genera srcset per immagini con larghezza inferiore a 300 pixel) o un tema che sovrascrive l’output standard delle immagini.

Immagine sbagliata selezionata: se il browser seleziona sistematicamente un’immagine troppo grande o troppo piccola, il problema è probabilmente nell’attributo sizes. Verifica che i valori corrispondano al layout effettivo del tuo tema e personalizzali se necessario.

Immagini sfocate su Retina: se le immagini appaiono sfocate su schermi Retina, le miniature disponibili sono probabilmente troppo piccole. Aumenta la dimensione massima di ridimensionamento di Smush o aggiungi dimensioni di miniature intermedie nel tema.

Testare le Immagini Responsive

Per verificare che le immagini responsive funzionino correttamente, utilizza Chrome DevTools. Apri il pannello Network, seleziona il filtro “Img” e attiva il Responsive Mode (l’icona del dispositivo mobile nella barra strumenti). Cambia la dimensione della viewport e ricarica la pagina: dovresti vedere che il browser scarica immagini di dimensioni diverse in base alla viewport selezionata.

Puoi anche ispezionare il codice HTML dell’immagine per verificare che gli attributi srcset e sizes siano presenti e corretti. Un’immagine responsive ben configurata dovrebbe avere 3-6 varianti nel srcset e un attributo sizes che riflette il layout della pagina.

Conclusioni

Le immagini responsive sono una tecnologia fondamentale per i siti WordPress moderni. Permettono di servire la versione ottimale di ogni immagine a ogni dispositivo, risparmiando banda, migliorando i tempi di caricamento e garantendo un’esperienza visiva di qualità su ogni schermo. WordPress supporta nativamente srcset e sizes, e Smush ottimizza ogni variante per il massimo risparmio di peso.

Se hai bisogno di assistenza per configurare le immagini responsive o per ottimizzare le prestazioni del tuo sito su tutti i dispositivi, contattaci per una consulenza personalizzata.