Oggi parleremo delle immagini web responsive, un argomento molto popolare e piuttosto problematico.

Se cercate questo argomento troverete innumerevoli articoli con ogni tipo di spiegazione, tuttavia io non ripeterò quelle e vi insegnerò in modo diverso.

Caricate le immagini correttamente, aumentate il vostro ranking SEO e offrite una migliore esperienza utente per il vostro sito web.

Cosa sono le immagini responsive?

Le immagini responsive si adatteranno (dovrebbero) automaticamente alla dimensione dello schermo. Ma… è il modo corretto di farlo? Beh, sì e no. Se cercate su Google o guardate framework moderni come Bootstrap, noterete che la loro definizione di “immagini responsive” è un semplice CSS simile a:

1max-width: 100%;
2height: auto;

Sebbene questo “funzioni”, non è del tutto corretto. Ci sono diverse ragioni, ma la più importante è la dimensione dell’immagine. Non sto parlando della “larghezza/altezza” dell’immagine, sto parlando della dimensione effettiva dell’immagine in kilobyte/megabyte.

La maggior parte dei siti web (circa l'80% dei siti che ho visto in tutti questi anni) usa immagini incredibilmente grandi e semplicemente le “scala” su e giù. Un’immagine del genere va di solito da 1000px fino a 4000px e ho persino visto 8000px!!! (quanto è folle).

Queste immagini tendono ad essere molto grandi in dimensione, da 1 MB a 10 e persino 20 MB. Ho visto molto raramente persone comprimere le loro immagini quando le esportano. Detto questo, immaginatevi quando avete un sito web ricco di immagini composto da 5, 10, 20 o più immagini e un utente visita il vostro sito su Mobile. Anche con il 5G, sono molti dati da scaricare solo per le immagini, senza contare il resto.

Come creare immagini responsive?

I browser ci aiutano con il supporto degli image source set (srcset). Con questa funzionalità possiamo effettivamente avere diverse versioni dell’immagine in dimensioni diverse e il browser sceglierà quella giusta in base alla dimensione dello schermo. Questo sì che è responsive!

Tuttavia, la maggior parte delle persone non riesce a gestire gli image source set per diversi motivi, da “Non ho idea” a “Non capisco” e molti altri.

Con l’evoluzione della tecnologia, ora possiamo usare strumenti online e API per creare automaticamente questi source set. Ma non così in fretta, crearli automaticamente non significa che potete semplicemente copiare e incollare il risultato e aspettarvi che funzioni correttamente.

Da tutto il mio lavoro e test svolti, non esiste una soluzione “taglia unica” e serve sempre del lavoro extra.

Scegliere i tag HTML giusti per le immagini

Questa è la prima e più importante cosa che dovete capire. Potete usare il tradizionale <img /> o il moderno tag <picture>.

Ognuno ha le sue insidie, ma dalla mia esperienza <picture> vince sempre. Questo tag è ampiamente supportato dai browser quindi non dovrebbe essere un problema.

Non c’è un modo automatico per generare le dimensioni corrette (per quanto ne so) per un sito web dinamico. Prendete per esempio il ben noto WordPress, genererà dimensioni erratiche e sbagliate a seconda dell’immagine caricata e dove la posizionate.

Uso dei tag img

I tag img sono sulla maggioranza dei siti web; per immagini responsive i tag <img /> sono combinati con l’attributo srcset, ma posso dirvi con sicurezza che nessuno di essi funziona correttamente.

Uno dei problemi è che il tag <img /> non funziona correttamente su alcuni browser, per esempio Chrome. Ho effettivamente una domanda aperta su stackoverflow.com al riguardo senza spiegazione del perché.

Un altro problema è che ottenere l’attributo sizes giusto è una sofferenza. Ci sono moltissimi articoli con spiegazioni molto vaghe e incomplete che francamente ho trovato molto frustranti.

Detto questo, non discuterò l’uso di <img /> per immagini responsive perché è inutile (secondo me).

Uso dei tag picture

I tag picture sono i migliori secondo me, ci permettono di manipolare e istruire il browser a caricare l’immagine che vogliamo.

Supporta anche molte altre funzionalità come specificare l’art direction, formati di immagine alternativi e altro. Con questo bel set di capacità possiamo raggiungere il nostro obiettivo.

Nessun problema comunque, era ora che questo browser morisse quest’anno .

Generare dimensioni di immagini responsive

Come menzionato sopra, possiamo usare molti strumenti online per ridimensionare e generare le immagini corrette e il codice sorgente con pochi clic.

Vi consiglio di usare questo: https://responsivebreakpoints.com/ come punto di partenza. Lo strumento ridimensionerà le vostre immagini e genererà i breakpoint per avere immagini responsive.

Per esempio la foto del cane sul loro sito avrà diverse immagini ridimensionate e il rispettivo codice HTML:

 1<picture>
 2
 3<source
 4		media="(max-width: 767px)"
 5		sizes="(max-width: 1534px) 100vw, 1534px"
 6		srcset="
 7		dog_ar_1_1,c_fill,g_auto__c_scale,w_200.jpg 200w,
 8		dog_ar_1_1,c_fill,g_auto__c_scale,w_493.jpg 493w,
 9		dog_ar_1_1,c_fill,g_auto__c_scale,w_707.jpg 707w,
10		dog_ar_1_1,c_fill,g_auto__c_scale,w_877.jpg 877w,
11		dog_ar_1_1,c_fill,g_auto__c_scale,w_1032.jpg 1032w,
12		dog_ar_1_1,c_fill,g_auto__c_scale,w_1108.jpg 1108w,
13		dog_ar_1_1,c_fill,g_auto__c_scale,w_1259.jpg 1259w,
14		dog_ar_1_1,c_fill,g_auto__c_scale,w_1353.jpg 1353w,
15		dog_ar_1_1,c_fill,g_auto__c_scale,w_1468.jpg 1468w,
16		dog_ar_1_1,c_fill,g_auto__c_scale,w_1534.jpg 1534w">
17<source
18		media="(min-width: 768px) and (max-width: 991px)"
19		sizes="(max-width: 1983px) 70vw, 1388px"
20		srcset="
21		dog_ar_4_3,c_fill,g_auto__c_scale,w_538.jpg 538w,
22		dog_ar_4_3,c_fill,g_auto__c_scale,w_793.jpg 793w,
23		dog_ar_4_3,c_fill,g_auto__c_scale,w_1004.jpg 1004w,
24		dog_ar_4_3,c_fill,g_auto__c_scale,w_1198.jpg 1198w,
25		dog_ar_4_3,c_fill,g_auto__c_scale,w_1238.jpg 1238w,
26		dog_ar_4_3,c_fill,g_auto__c_scale,w_1384.jpg 1384w,
27		dog_ar_4_3,c_fill,g_auto__c_scale,w_1388.jpg 1388w">
28<source
29		media="(min-width: 992px) and (max-width: 1199px)"
30		sizes="(max-width: 2400px) 60vw, 1440px"
31		srcset="
32		dog_ar_16_9,c_fill,g_auto__c_scale,w_596.jpg 596w,
33		dog_ar_16_9,c_fill,g_auto__c_scale,w_877.jpg 877w,
34		dog_ar_16_9,c_fill,g_auto__c_scale,w_1086.jpg 1086w,
35		dog_ar_16_9,c_fill,g_auto__c_scale,w_1314.jpg 1314w,
36		dog_ar_16_9,c_fill,g_auto__c_scale,w_1440.jpg 1440w">
37<img
38		sizes="(max-width: 7000px) 40vw, 2800px"
39		srcset="
40		dog_c_scale,w_480.jpg 480w,
41		dog_c_scale,w_713.jpg 713w,
42		dog_c_scale,w_1036.jpg 1036w,
43		dog_c_scale,w_1180.jpg 1180w,
44		dog_c_scale,w_1313.jpg 1313w,
45		dog_c_scale,w_1433.jpg 1433w,
46		dog_c_scale,w_1606.jpg 1606w,
47		dog_c_scale,w_1748.jpg 1748w,
48		dog_c_scale,w_1884.jpg 1884w,
49		dog_c_scale,w_2015.jpg 2015w,
50		dog_c_scale,w_2133.jpg 2133w,
51		dog_c_scale,w_2260.jpg 2260w,
52		dog_c_scale,w_2377.jpg 2377w,
53		dog_c_scale,w_2345.jpg 2345w,
54		dog_c_scale,w_1871.jpg 1871w,
55		dog_c_scale,w_2800.jpg 2800w"
56		src="dog_c_scale,w_2800.jpg"
57		alt="">
58</picture>

Notate quante dimensioni di schermo copre per noi, bello vero? Ma è abbastanza buono per copiarlo e incollarlo sul vostro sito? NO.

Il problema più grande con questi image source set sono gli attributi sizes e media. È piuttosto complicato da capire e ancora più complicato farlo funzionare correttamente.

Detto questo, quello che dovete fare è rendere il codice più breve e comprensibile. Sul mio sito web (quello che state leggendo) ho usato i breakpoint responsive generali forniti da Bootstrap e ho creato i miei set.

Create le dimensioni responsive delle immagini voi stessi

La soluzione migliore (e francamente l’unica) è creare i tag delle immagini voi stessi.

Questo funziona bene quando sviluppate un sito web personalizzato da zero, ma quando avete qualcosa come WordPress in uso è un’altra storia e ci sarà un altro articolo al riguardo.

Come punto di partenza, avevo bisogno di un modo chiaro e semplice per capire i breakpoint dei dispositivi; quindi ho usato quelli forniti da Bootstrap che sono estremamente affidabili:

BreakpointDispositivoDimensione
X-SmallPiccoli dispositivi (telefoni verticali, sotto 576px)<576px
SmallPiccoli dispositivi (telefoni orizzontali, da 576px)≥576px
MediumDispositivi medi (tablet, da 768px)≥768px
LargeGrandi dispositivi (desktop, da 992px)≥992px
Extra largeGrandi dispositivi (desktop grandi, da 1200px)≥1200px
Extra extra largeGrandi dispositivi (desktop più grandi, da 1400px)≥1400px

Con i breakpoint sopra ho creato i miei “propri” image source set che caricano l’immagine appropriata secondo le dimensioni del dispositivo:

 1<picture>
 2
 3<source srcset="" media="(min-width: 1400px)">
 4<source srcset="" media="(min-width: 1200px)">
 5<source srcset="" media="(min-width: 992px)">
 6<source srcset="" media="(min-width: 768px)">
 7<source srcset="" media="(min-width: 576px)">
 8<source srcset="" media="(min-width: 320px)">
 9<img src="" width="" height="" class="" alt="" >
10</picture>

Questo mi dà una visione chiara e comprensione di cosa dovrebbe succedere e come. In altre parole, so quale immagine dovrebbe caricarsi su ogni dispositivo e lo farà.

Sebbene questo sembri pronto all’uso, non è ancora del tutto pronto. Caricare queste immagini su un dispositivo specifico non è sufficiente perché l’immagine potrebbe essere ancora troppo grande.

Esempio 1:

  • Su un grande dispositivo (desktop grandi, 1200px in su) il vostro container dove incorporate il set di immagini ha una dimensione fissa di 800px
  • Il browser guarderà il vostro viewport che è ad esempio 1920px, caricherà l’immagine da 1400px (quando in realtà avreste bisogno dell’immagine da 768px…)

Esempio 2:

  • Su qualsiasi dispositivo, il vostro container dove incorporate il set di immagini ha una dimensione fissa di 400px (potrebbe essere una card o una semplice box)
  • Il browser guarderà il vostro viewport che è ad esempio 1920px, caricherà l’immagine da 1400px (quando in realtà avreste bisogno dell’immagine da 320px…)

Detto questo, state caricando l’immagine sbagliata, questo costa a voi e al vostro utente. Prima perdete velocità (che tra l’altro influisce sul vostro ranking SEO) e poi il vostro utente aspetta un’eternità per il caricamento dell’immagine se è su mobile o con banda lenta.

La soluzione corretta è investigare il vostro container dove incorporate l’immagine e determinare la dimensione giusta.

Potete farlo molto facilmente ispezionando la pagina ed emulando diversi dispositivi, di solito i container rimangono più o meno gli stessi.

Quindi per il precedente Esempio 1, ho modificato il mio codice come segue:

1<picture>
2
3<source srcset="" media="(min-width: 1200px), (min-width: 1400px), (min-width: 2500px)">
4<source srcset="" media="(min-width: 992px)">
5<source srcset="" media="(min-width: 768px)">
6<source srcset="" media="(min-width: 576px)">
7<source srcset="" media="(min-width: 320px)">
8<img src="" width="" height="" class="" alt="">
9</picture>

Cosa significa? È piuttosto autoesplicativo ma spiegherò comunque:

  • Su un dispositivo con larghezza minima 320px, carica l’immagine da 320px
  • Su un dispositivo con larghezza minima 576px, carica l’immagine da 576px
  • Su un dispositivo con larghezza minima 768px, carica l’immagine da 768px
  • Su un dispositivo con larghezza minima 992px, carica l’immagine da 992px
  • Su un dispositivo con larghezza minima 1200px O 1400px O 2500px carica l’immagine da 1200px

L’ultima riga assicura che il browser non carichi un’immagine più grande quando la dimensione del container è solo 800px (o 1200px nel mio caso quando cliccate espandi articolo)

Trovo il metodo sopra quasi perfetto in termini di caricamento della giusta dimensione dell’immagine. Persino Google Pagespeed lo apprezza e non genera avvisi poiché stiamo caricando la dimensione corretta.

Testare le vostre immagini responsive

Sono abbastanza sicuro che dopo aver letto quanto sopra avete un’idea generale di come testare se le vostre immagini si caricano correttamente, tuttavia spiegherò comunque.

Il processo di test può essere scoraggiante se avete molte immagini, ma ne vale la pena.

Quello che dovete fare è semplice, richiede solo un po’ di tempo:

  • Aprite il vostro browser preferito e caricate la vostra pagina
  • Aprite gli strumenti per sviluppatori e andate alla scheda Network e selezionate solo il filtro “Immagini”
  • Aggiornate la vostra pagina su diversi dispositivi (mobile, tablet, ecc.) e vedete quali immagini si caricano

Questo è tutto, niente di speciale.

Consigli e trucchi

  • Se avete molte immagini (più di un header), usate l’attributo loading=lazy. Potete leggere di più qui .
  • Se non potete esportare/ridimensionare le immagini voi stessi, potete usare servizi online. Offrono anche CDN che caricherà le vostre immagini incredibilmente veloce. Vi consiglio Cloudflare Images .
  • Nominate le vostre immagini correttamente, questo è molto importante. Se non nominate le immagini correttamente (tipo image-small.jpg o image-320.jpg), non potete facilmente capire quale immagine si sta caricando durante i test.

Questo è tutto, spero che questo articolo vi sia stato utile.