{"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:\/\/gtechgroup.it\/blog\/de\/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{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c} 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> und <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,             foto-800.jpg 800w,             foto-1200.jpg 1200w,             foto-1600.jpg 1600w"\n     sizes="(max-width: 600px) 100vw,            (max-width: 1024px) 50vw,            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,             logo@2x.png 2x,             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{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c} della viewport, fino a 1024px il 50{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c}, e oltre il 33{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c}.<\/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> und <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> und 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{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c} rispetto al JPEG, mentre WebP offre circa il 30{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c}. 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à">\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> und <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{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c} 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>","protected":false},"excerpt":{"rendered":"
Nel web moderno, le immagini rappresentano mediamente oltre il 50{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c} del peso totale di una pagina. Con la variet\u00e0 di dispositivi che gli utenti utilizzano…<\/p>","protected":false},"author":2,"featured_media":164235,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Immagini Responsive in HTML: srcset, sizes e picture","_seopress_titles_desc":"Scopri come implementare immagini responsive in HTML con srcset, sizes e il tag picture per ottimizzare le performance e adattare le immagini a ogni dispositivo.","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"1246","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"immagini responsive, srcset HTML, tag picture, sizes attributo, responsive design","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[{"_seopress_pro_rich_snippets_type":"custom","_seopress_pro_rich_snippets_custom":"