{"id":164055,"date":"2025-07-28T09:00:00","date_gmt":"2025-07-28T07:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/immagini-responsive-html-srcset-sizes-picture\/"},"modified":"2025-07-28T09:00:00","modified_gmt":"2025-07-28T07:00:00","slug":"immagini-responsive-html-srcset-sizes-picture","status":"publish","type":"post","link":"https:\/\/nuovosito.gtechgroup.it\/blog\/immagini-responsive-html-srcset-sizes-picture\/","title":{"rendered":"Immagini Responsive in HTML: srcset, sizes e il Tag picture"},"content":{"rendered":"

Nel web moderno, le immagini rappresentano mediamente oltre il 50% del peso totale di una pagina. Con la variet\u00e0 di dispositivi che gli utenti utilizzano \u2014 dagli smartphone con schermi da 4 pollici ai monitor 4K da 32 pollici \u2014 servire la stessa immagine a tutti \u00e8 uno spreco enorme di banda e un danno alle performance. HTML offre strumenti nativi potenti per gestire le immagini responsive<\/strong>: gli attributi <srcset><\/code> e <sizes><\/code>, e il tag <picture><\/code>. In questa guida completa vedremo come utilizzarli al meglio per creare siti web veloci e ottimizzati.<\/p>\n

Perch\u00e9 le Immagini Responsive sono Essenziali<\/h2>\n

Un’immagine pensata per uno schermo desktop da 1920 pixel di larghezza pu\u00f2 pesare 500 KB o pi\u00f9. Servire questa stessa immagine a uno smartphone con uno schermo da 375 pixel \u00e8 inutile: l’utente scarica dati che non potr\u00e0 mai apprezzare visivamente. Le immagini responsive<\/strong> risolvono questo problema permettendo al browser di scegliere automaticamente la versione pi\u00f9 adatta dell’immagine in base alle caratteristiche del dispositivo.<\/p>\n

I vantaggi sono molteplici. Innanzitutto, le performance migliorano drasticamente<\/strong>: meno dati da scaricare significano pagine pi\u00f9 veloci. Questo impatta direttamente sui Core Web Vitals<\/a>, in particolare sulla metrica LCP (Largest Contentful Paint). In secondo luogo, il risparmio di banda<\/strong> \u00e8 significativo, soprattutto per gli utenti con connessioni mobili limitate. Infine, un sito veloce offre una migliore esperienza utente<\/strong> e viene premiato dai motori di ricerca nel posizionamento.<\/p>\n

L’Attributo srcset: Descrittori di Larghezza e Densit\u00e0<\/h2>\n

L’attributo <srcset><\/code> si aggiunge al tradizionale tag <img><\/code> e permette di specificare una lista di immagini alternative tra cui il browser pu\u00f2 scegliere. Esistono due tipi di descrittori: quelli basati sulla larghezza<\/strong> (w) e quelli basati sulla densit\u00e0 di pixel<\/strong> (x).<\/p>\n

I descrittori di larghezza<\/strong> (w) indicano la larghezza reale dell’immagine in pixel. Ecco un esempio pratico:<\/p>\n

<img src=\"foto-800.jpg\"\n     srcset=\"foto-400.jpg 400w,\n             foto-800.jpg 800w,\n             foto-1200.jpg 1200w,\n             foto-1600.jpg 1600w\"\n     sizes=\"(max-width: 600px) 100vw,\n            (max-width: 1024px) 50vw,\n            33vw\"\n     alt=\"Descrizione dell'immagine\"><\/code><\/pre>\n
In questo codice, il browser conosce le dimensioni di ogni file e, grazie all’attributo <sizes><\/code>, sa quanto spazio occuper\u00e0 l’immagine nel layout. Combinando queste informazioni con la densit\u00e0 di pixel del dispositivo e la larghezza della viewport, il browser seleziona automaticamente il file pi\u00f9 appropriato.<\/p>\n
I descrittori di densit\u00e0<\/strong> (x) sono pi\u00f9 semplici ma meno flessibili. Si usano principalmente per distinguere tra schermi standard e schermi Retina:<\/p>\n
<img src=\"logo.png\"\n     srcset=\"logo.png 1x,\n             logo@2x.png 2x,\n             logo@3x.png 3x\"\n     alt=\"Logo aziendale\"><\/code><\/pre>\n
Questo approccio \u00e8 ideale per immagini a dimensione fissa come loghi e icone, dove la larghezza non cambia ma la risoluzione s\u00ec. Per immagini che si adattano al layout, i descrittori w sono la scelta migliore.<\/p>\n
L’Attributo sizes: Guidare la Scelta del Browser<\/h2>\n
L’attributo <sizes><\/code> \u00e8 fondamentale quando si usano i descrittori di larghezza. Senza di esso, il browser assume che l’immagine occupi l’intera larghezza della viewport (100vw), il che porta a scelte subottimali. L’attributo accetta una lista di media condition<\/strong> seguite dalla larghezza che l’immagine occuper\u00e0 in quella condizione.<\/p>\n
La sintassi segue un pattern preciso: ogni condizione viene valutata nell’ordine in cui appare, e la prima che corrisponde determina la larghezza usata. L’ultimo valore, senza condizione, funge da default. Ad esempio, sizes=\"(max-width: 600px) 100vw, (max-width: 1024px) 50vw, 33vw\"<\/code> indica che su schermi fino a 600px l’immagine occupa il 100% della viewport, fino a 1024px il 50%, e oltre il 33%.<\/p>\n
\u00c8 importante notare che le dimensioni specificate in <sizes><\/code> non impostano effettivamente la larghezza dell’immagine \u2014 quello \u00e8 compito del CSS. L’attributo serve esclusivamente a informare il browser<\/strong> prima che il CSS sia stato scaricato e analizzato, permettendo una scelta anticipata del file da caricare. Per questo motivo, i valori in sizes devono riflettere accuratamente ci\u00f2 che il CSS definir\u00e0.<\/p>\n
Il Tag picture: Controllo Totale e Art Direction<\/h2>\n
Mentre <srcset><\/code> e <sizes><\/code> permettono al browser di scegliere la risoluzione migliore della stessa immagine, il tag <picture><\/code> offre un controllo molto pi\u00f9 granulare. Con <picture><\/code> possiamo specificare immagini completamente diverse per diverse condizioni \u2014 un concetto noto come art direction<\/strong>.<\/p>\n
Il tag <picture><\/code> funziona come un contenitore che avvolge uno o pi\u00f9 elementi <source><\/code> seguiti da un elemento <img><\/code> di fallback. Ecco un esempio di art direction:<\/p>\n
<picture>\n  <source media=\"(max-width: 599px)\" srcset=\"foto-mobile.jpg\">\n  <source media=\"(max-width: 1023px)\" srcset=\"foto-tablet.jpg\">\n  <img src=\"foto-desktop.jpg\" alt=\"Panorama cittadino\">\n<\/picture><\/code><\/pre>\n
In questo caso, su mobile viene mostrato un ritaglio ravvicinato dell’immagine, su tablet una versione intermedia e su desktop la versione panoramica completa. Non \u00e8 una questione di risoluzione ma di composizione dell’immagine<\/strong>: la versione mobile potrebbe mostrare solo il soggetto principale, eliminando lo sfondo che non sarebbe visibile su uno schermo piccolo.<\/p>\n
Formato Switching: WebP, AVIF e Fallback<\/h2>\n
Un altro uso fondamentale del tag <picture><\/code> \u00e8 il format switching<\/strong>, ovvero la possibilit\u00e0 di servire formati moderni come WebP<\/strong> e AVIF<\/strong> ai browser che li supportano, mantenendo un fallback in JPEG o PNG per i browser pi\u00f9 datati.<\/p>\n
<picture>\n  <source type=\"image\/avif\" srcset=\"foto.avif\">\n  <source type=\"image\/webp\" srcset=\"foto.webp\">\n  <img src=\"foto.jpg\" alt=\"Foto prodotto\">\n<\/picture><\/code><\/pre>\n
Il browser legge gli elementi <source><\/code> dall’alto verso il basso e utilizza il primo formato che supporta. AVIF offre una compressione superiore del 50% rispetto al JPEG, mentre WebP offre circa il 30%. Combinando il format switching con il responsive design, possiamo ottenere risultati straordinari:<\/p>\n
<picture>\n  <source type=\"image\/avif\"\n          srcset=\"foto-400.avif 400w, foto-800.avif 800w, foto-1200.avif 1200w\"\n          sizes=\"(max-width: 600px) 100vw, 50vw\">\n  <source type=\"image\/webp\"\n          srcset=\"foto-400.webp 400w, foto-800.webp 800w, foto-1200.webp 1200w\"\n          sizes=\"(max-width: 600px) 100vw, 50vw\">\n  <img src=\"foto-800.jpg\"\n       srcset=\"foto-400.jpg 400w, foto-800.jpg 800w, foto-1200.jpg 1200w\"\n       sizes=\"(max-width: 600px) 100vw, 50vw\"\n       alt=\"Foto del prodotto in alta qualit\u00e0\">\n<\/picture><\/code><\/pre>\n
Questa combinazione garantisce che ogni utente riceva il formato pi\u00f9 efficiente nella risoluzione pi\u00f9 appropriata per il proprio dispositivo, ottimizzando al massimo i tempi di caricamento.<\/p>\n
Best Practice e Impatto sulle Performance<\/h2>\n
Per ottenere il massimo dalle immagini responsive, \u00e8 fondamentale seguire alcune best practice<\/strong>. Prima di tutto, specificate sempre gli attributi <width><\/code> e <height><\/code> sul tag <img><\/code>: questo permette al browser di calcolare l’aspect ratio prima del caricamento, evitando il layout shift<\/strong> (CLS). In secondo luogo, utilizzate l’attributo loading=\"lazy\"<\/code> per le immagini below-the-fold, in modo che vengano caricate solo quando l’utente si avvicina ad esse durante lo scroll.<\/p>\n
Per le immagini critiche above-the-fold, considerate l’uso di fetchpriority=\"high\"<\/code> per indicare al browser di darle la massima priorit\u00e0 nel caricamento. Al contrario, immagini decorative o meno importanti possono ricevere fetchpriority=\"low\"<\/code>. Per approfondire queste tecniche di ottimizzazione del caricamento<\/a>, vi consigliamo la nostra guida dedicata.<\/p>\n
Ricordate inoltre di generare le varianti delle immagini durante il processo di build o tramite un servizio CDN di image processing. Strumenti come Sharp (Node.js), ImageMagick o servizi cloud come Cloudinary e Imgix possono automatizzare completamente la generazione delle diverse risoluzioni e formati. Non dimenticate di utilizzare sempre l’attributo <alt><\/code> con descrizioni significative per garantire l’accessibilit\u00e0 delle vostre immagini.<\/p>\n
L’impatto sulle performance \u00e8 notevole: implementando correttamente le immagini responsive, \u00e8 possibile ridurre il peso delle immagini del 40-70% senza alcuna perdita di qualit\u00e0 percepita dall’utente, migliorando significativamente l’esperienza di navigazione su ogni dispositivo.<\/p>\n
Hai bisogno di aiuto con l’ottimizzazione delle immagini responsive? G Tech Group<\/strong> offre servizi di sviluppo web professionale e consulenza tecnica. Contattaci a support@gtechgroup.it<\/strong> o via WhatsApp al 0465 84 62 45<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Nel web moderno, le immagini rappresentano mediamente oltre il 50% del peso totale di una pagina. Con la variet\u00e0 di dispositivi che gli utenti utilizzano…<\/p>\n","protected":false},"author":2,"featured_media":164235,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1246],"tags":[1775,787,1108],"class_list":["post-164055","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-performance","tag-sviluppo-web","tag-web-design"],"_links":{"self":[{"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/164055","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=164055"}],"version-history":[{"count":0,"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/164055\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/164235"}],"wp:attachment":[{"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=164055"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=164055"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nuovosito.gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=164055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}