Ottimizzare le immagini con picture e srcset: guida pratica per performance web

1. Introduzione

Le immagini sono spesso l’elemento più pesante di una pagina web. Più della metà del peso complessivo di un sito può derivare proprio da elementi multimediali. Soprattutto oggi, con l’incremento esponenziale di dispositivi mobili e connessioni variabili (dalle ultraveloci in fibra al 3G in zone rurali), l’ottimizzazione delle immagini è diventata cruciale per:

• Ridurre i tempi di caricamento (page load).
• Migliorare l’esperienza utente (UX).
• Ridurre la bounce rate (tasso di rimbalzo).
• Aumentare il posizionamento SEO (le performance e i Core Web Vitals sono fattori di ranking).
• Rendere il sito più accessibile anche a chi ha limitazioni di banda o utilizza strumenti assistivi.

In questa guida pratica scoprirai come e perché utilizzare i tag HTML <picture> e gli attributi srcset e sizes per gestire immagini responsive in modo professionale. Vedrai anche come integrare questi concetti in WordPress, come testare le performance con PageSpeed Insights e Lighthouse, e quali best practice seguire per evitare errori comuni.

L’ottimizzazione delle immagini in WordPress non si limita a caricare file leggeri: è un insieme di tecniche che toccano accessibilità, SEO tecnica, usabilità e design responsivo. Utilizzando i tag giusti e fornendo immagini nel formato e nelle dimensioni ottimali, il tuo sito non solo caricherà più velocemente, ma sarà anche più apprezzato dai motori di ricerca. Inoltre, se abbini questa strategia con plugin specifici o con la corretta configurazione del tema (ad esempio l’uso di lazy loading), i risultati in termini di performance e punteggio nei tool di analisi saranno ancora più evidenti.

Dopo aver letto questa guida, avrai un quadro completo su:

1. Cos’è il tag <picture> e perché può fare la differenza.
2. Cosa sono srcset e sizes e come usarli per gestire immagini responsive.
3. Quali formati moderni di immagini adottare (WebP, AVIF) e come gestire i fallback.
4. Come implementare queste soluzioni in HTML puro e in un ambiente WordPress.
5. Come testare le performance del tuo sito con Google PageSpeed Insights e Lighthouse.
6. Le migliori pratiche e gli errori più comuni da evitare.
7. Una checklist finale per avere la certezza di aver ottimizzato tutto.

Il risultato? Un sito più veloce, più accessibile e più “amichevole” per i motori di ricerca. Iniziamo!

2. Cos’è il tag <picture> e quando si usa

2.1 Il ruolo del <picture> nella responsive design

Il tag <picture> è un elemento HTML5 che permette di caricare immagini differenti in base alle caratteristiche del device o del browser dell’utente. È stato introdotto per migliorare il concetto di responsive images, offrendo all’autore del sito la possibilità di definire più fonti (<source>) con diverse condizioni (come la risoluzione, le dimensioni del viewport, il supporto a determinati formati) e un’immagine di fallback definita dall’elemento <img> contenuto all’interno di <picture>.

Esempio di utilizzo di <picture> (snippet di codice, non conteggiato nel totale delle parole):

<picture>
  <source srcset="immagine.avif" type="image/avif">
  <source srcset="immagine.webp" type="image/webp">
  <img src="immagine.jpg" alt="Descrizione dell'immagine">
</picture>

In questo esempio, se il browser supporta AVIF, verrà caricata la versione in .avif. Se non la supporta ma supporta WebP, verrà caricata la versione .webp. In tutti gli altri casi, verrà utilizzata la versione .jpg.

2.2 Vantaggi del <picture>

• Pieno controllo sulla scelta del formato: puoi definire più formati e lasciare che il browser scelga il migliore.
• Condizioni personalizzate: puoi impostare gli attributi media per servire immagini diverse a seconda della larghezza minima o massima del viewport, dell’orientamento o di altre feature CSS.
• Flessibilità: combinato con srcset e sizes, <picture> diventa un potente strumento per ottimizzare dimensioni e formato delle immagini.
• Compatibilità: i browser moderni lo supportano quasi universalmente. In caso di browser molto vecchi, la parte interna <img> funge da fallback.

2.3 Compatibilità browser

Il tag <picture> è supportato dalla maggior parte dei browser moderni: Chrome, Firefox, Edge, Safari e Opera. Per i browser legacy (es. Internet Explorer 11 o versioni più datate), c’è comunque il fallback sull’<img>. Se si usano librerie di polyfill come Picturefill, si può assicurare retrocompatibilità anche su browser obsoleti, anche se oggi, nella pratica, IE11 è ormai deprecato o quasi scomparso in termini di utilizzo.

3. Uso di srcset e sizes: come servire immagini responsive

3.1 srcset: cos’è e come funziona

L’attributo srcset permette di definire versioni multiple di un’immagine (di solito con dimensioni differenti) e lascia che il browser scelga in autonomia quale versione caricare, in base alla risoluzione del device o al pixel density (DPR).

Esempio semplice:

<img 
  src="immagine-800w.jpg" 
  srcset="immagine-400w.jpg 400w,
          immagine-800w.jpg 800w,
          immagine-1200w.jpg 1200w" 
  alt="Una descrizione efficace" />

In questo modo, se il browser rileva che lo schermo dell’utente è abbastanza grande da mostrare l’immagine in dimensione 1200px, caricherà immagine-1200w.jpg; se invece lo schermo è più piccolo, caricherà la versione a 400 o 800 px, risparmiando banda e migliorando le performance. Il suffisso w indica la larghezza intrinseca in pixel di quell’immagine specifica.

3.2 L’attributo sizes

srcset lavora in tandem con sizes. Quest’ultimo consente di dichiarare a livello HTML lo spazio che l’immagine dovrebbe occupare in diverse condizioni CSS. Il browser, leggendo sizes, riesce a scegliere prima di scaricare l’immagine, quale fonte tra quelle definite in srcset sia la più appropriata.

Esempio più complesso:

<img 
  src="immagine-800w.jpg" 
  srcset="immagine-400w.jpg 400w,
          immagine-800w.jpg 800w,
          immagine-1200w.jpg 1200w" 
  sizes="(max-width: 600px) 400px,
         (max-width: 1200px) 800px,
         1200px" 
  alt="Una descrizione efficace" />

• (max-width: 600px) 400px: se la larghezza massima del viewport è 600px, l’immagine sarà mostrata a 400px di larghezza (verrà preferita la versione 400w).
• (max-width: 1200px) 800px: su schermi fino a 1200px, l’immagine sarà 800px di larghezza (verrà preferita la 800w).
• Se la larghezza del viewport supera 1200px, il browser sceglierà la versione 1200w.

Questa combinazione di srcset e sizes garantisce che l’utente non scarichi mai un’immagine più pesante del necessario (o più piccola, con conseguente perdita di qualità).

3.3 srcset vs <picture>: quando usare l’uno o l’altro

• Usare solo srcset quando vuoi servire la stessa immagine in dimensioni diverse in base al dispositivo.
• Usare il tag <picture> quando vuoi servire immagini potenzialmente in formati diversi (AVIF, WebP, JPEG…) o quando vuoi cambiare completamente l’immagine in base a determinate condizioni (es. immagine in orizzontale vs verticale).

Spesso, la combinazione più comune è <picture> + srcset. All’interno di <source>, infatti, puoi usare un srcset per definire la risoluzione desiderata per ogni formato.

4. Formati immagine moderni: WebP, AVIF e fallback JPEG/PNG

4.1 Perché optare per formati moderni

I formati moderni come WebP e AVIF offrono compressione più efficiente rispetto a JPEG e PNG. I vantaggi principali sono:

• File di dimensioni inferiori a parità di qualità.
• Supporto alla trasparenza (sia WebP che AVIF possono gestirla).
• Supporto all’animazione (WebP animato come sostituto delle GIF).
• Migliore gestione dei colori e degli algoritmi di compressione avanzati (soprattutto AVIF).

4.2 WebP: pro e contro

• Pro: Ampio supporto browser (Chrome, Firefox, Edge, Opera, Safari 14+), ottimo rapporto qualità/dimensioni.
• Contro: Safari ha introdotto il supporto relativamente tardi, quindi su dispositivi più vecchi potrebbe esserci un problema di compatibilità.

4.3 AVIF: pro e contro

• Pro: Compressione ancora più efficiente di WebP, qualità elevata anche con dimensioni molto ridotte, supporto a HDR e a una gamma di colori più ampia.
• Contro: Supporto browser leggermente meno ampio di WebP (al momento di scrivere questa guida, Safari e Chrome lo gestiscono, Firefox lo sta supportando in modo progressivo), tempi di compressione più lenti (richiede più CPU).

4.4 Fallback JPEG/PNG

Un’immagine di fallback in JPEG o PNG (a seconda che si tratti di un’immagine fotografica o di un elemento grafico con trasparenza) va sempre prevista, poiché non tutti i browser potrebbero supportare WebP o AVIF.

Esempio pratico con <picture>:

<picture>
  <source srcset="immagine.avif" type="image/avif">
  <source srcset="immagine.webp" type="image/webp">
  <img src="immagine.jpg" alt="Testo alternativo" />
</picture>

5. Implementazione pratica: HTML + WordPress

5.1 Codice HTML di base

Un esempio di codice “completo”, con formati multipli e responsive images, potrebbe essere:

<picture>
  <source 
    srcset="immagine-400w.avif 400w,
            immagine-800w.avif 800w,
            immagine-1200w.avif 1200w"
    sizes="(max-width: 600px) 400px,
           (max-width: 1200px) 800px,
           1200px"
    type="image/avif">
  <source 
    srcset="immagine-400w.webp 400w,
            immagine-800w.webp 800w,
            immagine-1200w.webp 1200w"
    sizes="(max-width: 600px) 400px,
           (max-width: 1200px) 800px,
           1200px"
    type="image/webp">
  <img 
    src="immagine-800w.jpg" 
    srcset="immagine-400w.jpg 400w,
            immagine-800w.jpg 800w,
            immagine-1200w.jpg 1200w"
    sizes="(max-width: 600px) 400px,
           (max-width: 1200px) 800px,
           1200px"
    alt="Breve descrizione dell'immagine"/>
</picture>

Questo snippet assicura che, se il browser supporta AVIF, caricherà il formato .avif; in caso contrario, proverà con .webp e come ultima opzione userà il .jpg. Inoltre, per ogni formato, caricherà la dimensione più adeguata in base al sizes.

5.2 Integrazione in WordPress

5.2.1 Temi e Page Builder

Molti temi moderni di WordPress (e molti page builder come Elementor, Divi, Beaver Builder) gestiscono in modo automatico un certo livello di responsive images, aggiungendo attributi srcset alle immagini caricate. Tuttavia, spesso è necessario intervenire manualmente o tramite plugin se vogliamo la flessibilità totale offerta da <picture>.

5.2.2 Plugin utili

• Smush, Imagify, ShortPixel: questi plugin si occupano di comprimere le immagini e, in alcuni casi, generare versioni WebP e includerle nel tuo sito. Alcuni offrono anche la funzione di sostituzione automatica .jpg con .webp.
• WebP Express o simili: plugin dedicati a servire formati next-gen, con fallback automatico.
• Adaptive Images: plugin che genera versioni multiple delle immagini e serve quella più appropriata.

5.2.3 Inserimento manuale di <picture>

Se desideri pieno controllo, puoi inserire manualmente il codice <picture> all’interno dell’editor a blocchi (Gutenberg), magari utilizzando il blocco HTML personalizzato. Assicurati di caricare le varie versioni dell’immagine nella Libreria Media di WordPress, copiarti i percorsi (URL) dei file AVIF, WebP e JPEG, e comporre lo snippet <picture> come illustrato.

5.2.4 Titolo immagine di copertina, Alt text, Didascalia, Descrizione

Per massimizzare l’ottimizzazione nel back-end di WordPress:

• Titolo dell’immagine di copertina: “Ottimizzare le immagini con <picture> e srcset: guida pratica”
• Testo alternativo (alt text): “Immagine che illustra l’uso del tag picture per migliorare la performance web”
• Didascalia: “Esempio di immagine responsive con formati AVIF, WebP e JPEG”
• Descrizione immagine: “In questa immagine, mostriamo come utilizzare <picture> e srcset per fornire formati moderni di immagini in WordPress, con fallback automatico.”

Seleziona un formato (ad es. jpg o png se non hai ancora convertito l’immagine) con un’adeguata compressione (intorno al 70-80% in caso di JPEG) per ridurre il più possibile il peso, mantenendo una buona qualità visiva. Se possibile, genera anche versioni .webp e .avif della stessa immagine per un supporto completo.

6. Performance test: come usare PageSpeed Insights e Lighthouse

6.1 Google PageSpeed Insights

1. Analisi del caricamento iniziale: PageSpeed Insights valuta Largest Contentful Paint (LCP), First Input Delay (FID) e Cumulative Layout Shift (CLS).
2. Ottimizzazione delle immagini: Se un’immagine è troppo grande o non compressa, PageSpeed Insights ti segnalerà la voce “Serve images in next-gen formats” (per esempio WebP) o “Properly sized images” (se l’immagine è caricata a una dimensione maggiore rispetto a quella che occorre).
3. Sfrutta i suggerimenti: Google fornisce indicazioni puntuali, come “Ridurre i tempi di risposta del server” o “Attivare la compressione”.

6.2 Lighthouse (Chrome DevTools)

• Audit: Apri Chrome, premi F12, vai nella sezione Lighthouse, seleziona “Performance” e avvia l’audit.
• Sezione “Performance”: simile a PageSpeed, ma con più dettaglio sulle metriche di caricamento.
• Sezione “Best Practices”: evidenzia potenziali problemi di sicurezza e di aderenza agli standard web.

6.3 Verifica post-implementazione

Dopo aver introdotto <picture> e srcset:

• Carica la pagina con la console di rete aperta (Chrome DevTools → Network) per controllare quali versioni dell’immagine vengono effettivamente scaricate.
• Ripeti i test su PageSpeed Insights e Lighthouse per confermare il miglioramento.
  • In genere, se hai fatto tutto correttamente, la sezione “Serve images in next-gen formats” dovrebbe scomparire (se stai usando WebP/AVIF con fallback).
  • Anche il punteggio LCP dovrebbe migliorare se le immagini pesavano molto.

7. Best practice e errori comuni da evitare

7.1 Best practice

1. Usa sempre un testo alternativo descrittivo: l’attributo alt è fondamentale per l’accessibilità e migliora la SEO.
2. Riduci il peso delle immagini prima dell’upload: usa strumenti come Photoshop, GIMP o servizi online (TinyPNG, Squoosh) per comprimere le immagini.
3. Sfrutta la CDN: se il tuo hosting non è veloce, una CDN (Content Delivery Network) come Cloudflare o KeyCDN aiuta a erogare le immagini da server geograficamente vicini all’utente.
4. Lazy loading: abilita il lazy loading (spesso integrato in WordPress 5.5+ di default o tramite plugin come Smush). Questo caricherà le immagini solo quando entrano nell’area visibile dello schermo.
5. Formato corretto per il tipo di contenuto: usa JPEG o WebP per fotografie, PNG/WebP per grafica con trasparenza, AVIF per ottimizzare al massimo, GIF o WebP animato per animazioni brevi (possibilmente usando video se le animazioni sono lunghe).

7.2 Errori comuni

1. Non mettere un fallback: Servire solo .webp o .avif a volte crea problemi di compatibilità con browser vecchi.
2. Caricare immagini giganti e ridimensionarle via CSS: Questo aumenta i tempi di caricamento e spreca banda. È la ragione principale per cui srcset è fondamentale.
3. Dimenticare l’attributo sizes: Senza sizes, il browser rischia di dover scaricare la versione più grande dell’immagine, anche quando non serve.
4. Dimenticare di impostare width e height nell’HTML: in HTML5 è consigliato impostare width e height corrispondenti al rapporto di aspetto (o usare la formattazione CSS opportuna) per ridurre il layout shift.
5. Non testare su dispositivi reali: Relying solo su simulazioni può farti perdere problemi di resa su particolari schermi o browsers.

8. Checklist finale per frontend dev

1. Compressione immagini (JPEG/WebP/AVIF) → riduci peso prima dell’upload.
2. Inserimento <picture> + srcset + sizes → se necessario, differenziare formati e dimensioni.
3. Fallback per browser legacy → .jpg o .png come ultima risorsa.
4. Test con PageSpeed Insights e Lighthouse → verifica metriche LCP e segnalazioni di “next-gen format”.
5. Alt text e attributi SEO → completare i campi in WordPress (titolo, didascalia, descrizione).
6. Lazy loading → abilitare la funzione nativa o tramite plugin.
7. Verifica dimensioni CSS → controlla la resa su mobile, tablet e desktop.
8. Aggiornamento plugin/tema → assicurarsi che non ci siano conflitti.
9. Internal linking → collega articoli correlati in modo da migliorare la navigazione e la SEO.
10. CDN → Valuta di integrare una CDN per servire le immagini in maniera ancora più veloce.

Siti utili:

• Compressione immagini: https://imagecompressor.com/
• Convertire JPG in WEBP: https://anyconv.com/it/convertitore-da-jpg-a-webp/
• Convertitore PNG: https://anyconv.com/it/png-convertitore/