HTML Academy · Lezione

Immagini responsive con srcset e sizes

Servire immagini delle dimensioni appropriate per densità dello schermo diverse

Immagini responsive con srcset e sizes è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

Il problema delle immagini singole

Servire un'unica immagine di grandi dimensioni a tutti i dispositivi spreca larghezza di banda sugli schermi piccoli:

Un telefono con uno schermo da 390px non ha bisogno di un'immagine da 2400px
Un monitor 4K merita un'immagine a risoluzione più alta di una da 96dpi
Le immagini responsive forniscono l'immagine giusta per lo schermo giusto

L'attributo srcset

srcset fornisce un elenco di sorgenti dell'immagine con le rispettive larghezze:

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg  400w,
    photo-800.jpg  800w,
    photo-1600.jpg 1600w
  "
  alt="Mountain landscape"
>
<!-- 400w, 800w, 1600w = intrinsic widths of each file -->
<!-- Browser chooses the best match for the device -->
<!-- src is the fallback for browsers that don't support srcset -->

Descrittori della densità dei pixel

Utilizzi i descrittori 1x, 2x e 3x per immagini di dimensioni fisse con risoluzioni diverse:

<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
  alt="Coddy logo"
  width="120"
  height="40"
>
<!-- 2x screens (Retina) get logo@2x.png -->
<!-- 3x screens (iPhone Pro) get logo@3x.png -->
<!-- 1x screens get logo.png -->

L'attributo sizes

sizes comunica al browser la larghezza con cui verrà visualizzata l'immagine alle diverse dimensioni del viewport:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="Landscape photo"
>
<!-- At ≤600px viewport: image takes 100% of viewport width -->
<!-- At ≤1200px viewport: image takes 50% -->
<!-- Otherwise: image is 800px wide -->

Come il browser seleziona un'immagine

Il browser calcola: valore di sizes × densità di pixel del dispositivo per scegliere da srcset:

Viewport da 600px, DPR 2×, size=100vw → servono 1200px → viene scelto 1600w
Viewport da 1200px, DPR 1×, size=50vw → servono 600px → viene scelto 800w
Una volta caricata, l'immagine viene memorizzata nella cache e potrebbe non essere ricaricata

Valore predefinito di sizes

Senza sizes, il browser presume che l'immagine occupi l'intera larghezza del viewport (100vw):

<!-- Without sizes: browser assumes 100vw -->
<!-- This causes it to download a very large image on wide screens -->
<!-- Always specify sizes if your image is not full-width -->

<img
  srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="100vw"  <!-- explicit full-width -->
  src="hero-1600.jpg"
  alt="Hero image"
>

Descrittori di larghezza srcset e descrittori x

Due modalità di srcset:

Descrittori di larghezza (w) — con sizes: selezione fluida e consapevole del layout
Descrittori della densità dei pixel (x) — immagini di dimensioni fisse a più risoluzioni

Utilizzi i descrittori w per la maggior parte delle immagini responsive. Utilizzi x per icone, loghi ed elementi di dimensioni fisse.

Generare file srcset

Strumenti che generano varianti responsive delle immagini:

Sharp (Node.js) — ridimensionamento programmatico delle immagini
Squoosh — basato sul browser, con confronto visivo
Cloudinary / Imgix — ridimensionamento su richiesta tramite URL
Webpack / Vite plugins — generazione durante la compilazione

srcset con WebP e fallback

Combini srcset con <picture> per il fallback del formato:

<picture>
  <!-- Modern browsers: WebP -->
  <source
    type="image/webp"
    srcset="photo-400.webp 400w, photo-800.webp 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
  >
  <!-- Fallback: JPEG -->
  <img
    srcset="photo-400.jpg 400w, photo-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    src="photo-800.jpg"
    alt="Mountain photo"
  >
</picture>

Art direction e cambio di risoluzione

Due tipi di problemi delle immagini responsive:

Cambio di risoluzione — stessa immagine, risoluzioni diverse → utilizzi srcset + sizes
Art direction — ritaglio o composizione diversi su schermi diversi → utilizzi <picture> con <source media>

Testare le immagini responsive

Come verificare che srcset funzioni:

Apra DevTools → scheda Network → filtri Images
Imposti l'emulazione di dispositivi con dimensioni del viewport e DPR diversi
Ricarichi la pagina e verifichi quale file richiede il browser
Controlli anche Lighthouse → Performance → audit Properly sized images

Supporto dei browser a srcset

Il supporto dei browser per srcset è eccellente:

È supportato da tutti i browser moderni, inclusi Chrome, Firefox, Safari ed Edge
Il fallback src gestisce i browser meno recenti
Non è necessario alcun polyfill per l'utilizzo in produzione

Verifica rapida

Che cosa comunica l'attributo sizes al browser?

Riepilogo: srcset e sizes

Elementi essenziali delle immagini responsive:

srcset — elenco di file immagine con le rispettive larghezze intrinseche o densità di pixel
sizes — condizioni media che descrivono la larghezza di visualizzazione dell'immagine
Il browser seleziona la corrispondenza migliore: valore di sizes × DPR del dispositivo
Descrittori di larghezza (w) per immagini fluide; x per elementi di dimensioni fisse
Fornisca sempre src come fallback

Domande Frequenti

La lezione «Immagini responsive con srcset e sizes» è gratuita?

Sì — il testo completo di «Immagini responsive con srcset e sizes» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «Immagini responsive con srcset e sizes»?

Servire immagini delle dimensioni appropriate per densità dello schermo diverse Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Immagini responsive con srcset e sizes»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

L’elemento img: src, alt, width e height
Immagini responsive con srcset e sizes
L’elemento picture per l’art direction
figure e figcaption

← Torna a HTML Academy