0Pricing
CSS Academy · Lezione

Immagini responsive ed elemento picture

Servite immagini delle dimensioni appropriate con srcset, sizes e l'elemento HTML picture.

Immagini responsive ed elemento picture è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 4 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 CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.

Problemi delle immagini responsive

Scaricare su un dispositivo mobile un'immagine desktop a piena risoluzione spreca banda e rallenta il caricamento. Le immagini responsive forniscono l'immagine giusta, della dimensione giusta, per il dispositivo.

Regola di base max-width: 100%

La regola minima per le immagini responsive: impedire alle immagini di fuoriuscire dal contenitore mantenendo il rapporto d'aspetto.

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='700'><rect width='1200' height='700' fill='%234f8cff'/><circle cx='600' cy='350' r='260' fill='%23ffb84d'/></svg>" alt="wide landscape" />

srcset per risoluzioni diverse

L'attributo srcset fornisce più sorgenti per l'immagine. Il browser sceglie quella più appropriata in base al rapporto di pixel del dispositivo (DPR):

<img
  src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%234f8cff'/><circle cx='400' cy='250' r='180' fill='%237ee787'/></svg>"
  srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%234f8cff'/><circle cx='400' cy='250' r='180' fill='%237ee787'/></svg> 1x, data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'><rect width='1600' height='1000' fill='%234f8cff'/><circle cx='800' cy='500' r='360' fill='%237ee787'/></svg> 2x"
  alt="A beautiful landscape"
  style="max-width:100%;height:auto;display:block;"
>

srcset con descrittori di larghezza

Usa i descrittori w per comunicare al browser la larghezza effettiva in pixel di ogni file immagine:

<img
  src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%23ffb84d'/></svg>"
  srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='250'><rect width='400' height='250' fill='%23ffb84d'/></svg> 400w,
          data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%23ffb84d'/></svg> 800w,
          data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'><rect width='1600' height='1000' fill='%23ffb84d'/></svg> 1600w"
  alt="Hero image"
  style="max-width:100%;height:auto;display:block;"
>

Attributo sizes

L'attributo sizes comunica al browser quanto sarà larga l'immagine alle diverse dimensioni del viewport, aiutandolo a scegliere la sorgente corretta da srcset.

<img
  srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='250'><rect width='400' height='250' fill='%23ffb84d'/></svg> 400w, data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%23ffb84d'/></svg> 800w"
  sizes="(max-width: 600px) 100vw, 50vw"
  src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%23ffb84d'/></svg>"
  alt="Product photo"
  style="max-width:100%;height:auto;display:block;"
>

L'elemento picture

L'elemento <picture> offre il pieno controllo sul file immagine da fornire, usando elementi <source> con condizioni media. Il browser usa la prima sorgente corrispondente.

<picture>
  <source media="(min-width: 1024px)" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='400'><rect width='1200' height='400' fill='%234f8cff'/><text x='30' y='220' font-size='40' fill='white'>hero-large</text></svg>">
  <source media="(min-width: 600px)"  srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='400'><rect width='800' height='400' fill='%237ee787'/><text x='30' y='220' font-size='36' fill='white'>hero-medium</text></svg>">
  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><rect width='500' height='500' fill='%23ffb84d'/><text x='20' y='260' font-size='30' fill='white'>hero-small</text></svg>" alt="Hero image" style="max-width:100%;height:auto;display:block;">
</picture>

Art direction con picture

L'art direction fornisce un ritaglio o una composizione diversa per dimensioni dello schermo diverse, non solo una versione più piccola della stessa immagine.

<picture>
  <!-- Wide crop for desktop -->
  <source media="(min-width: 768px)" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='300'><rect width='1200' height='300' fill='%23b57bff'/><text x='30' y='170' font-size='34' fill='white'>banner-wide (desktop crop)</text></svg>">
  <!-- Square crop for mobile (this preview is narrow, so this is what renders) -->
  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><rect width='500' height='500' fill='%23b57bff'/><text x='20' y='260' font-size='26' fill='white'>banner-square (mobile crop)</text></svg>" alt="Banner" style="max-width:100%;height:auto;display:block;">
</picture>

Formati immagine moderni: WebP e AVIF

L'elemento <picture> consente di selezionare il formato. Fornisci i formati moderni con un fallback:

<picture>
  <source type="image/avif" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400'><rect width='600' height='400' fill='%233fd0c9'/><text x='20' y='210' font-size='28' fill='white'>photo</text></svg>">
  <source type="image/webp" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400'><rect width='600' height='400' fill='%233fd0c9'/><text x='20' y='210' font-size='28' fill='white'>photo</text></svg>">
  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400'><rect width='600' height='400' fill='%233fd0c9'/><text x='20' y='210' font-size='28' fill='white'>photo</text></svg>" alt="Photo" style="max-width:100%;height:auto;display:block;">
</picture>

loading="lazy" per le prestazioni

L'attributo loading="lazy" posticipa il caricamento delle immagini fuori schermo finché l'utente non scorre vicino a esse:

<img
  src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><rect width='500' height='500' fill='%23ff6b6b'/><text x='20' y='260' font-size='26' fill='white'>product</text></svg>"
  loading="lazy"
  decoding="async"
  alt="Product"
  style="max-width:100%;height:auto;display:block;"
>

Attributi width e height

Includi sempre gli attributi width e height nelle immagini. Consentono al browser di riservare spazio nel layout prima del caricamento dell'immagine, impedendo lo spostamento del layout (CLS).

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='600'><rect width='800' height='600' fill='%234f8cff'/><circle cx='400' cy='300' r='200' fill='%23ffd700'/></svg>" width="800" height="600" loading="lazy" alt="Photo" style="max-width:100%;height:auto;">

object-fit per immagini nei contenitori

Quando un'immagine si trova in un contenitore di dimensioni fisse, usa object-fit per controllare come riempie lo spazio:

<img class="thumbnail" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='300'><rect width='800' height='300' fill='%23b57bff'/><text x='20' y='170' font-size='30' fill='white'>wide source photo</text></svg>" alt="thumbnail" />

Verifica rapida

Quale attributo HTML si usa insieme a srcset per comunicare al browser la larghezza di visualizzazione dell'immagine alle diverse dimensioni del viewport?

Riepilogo

Le immagini responsive usano srcset e sizes per fornire immagini delle dimensioni appropriate. L'elemento <picture> consente l'art direction e la selezione del formato. Usa sempre loading="lazy", gli attributi width/height e object-fit per le immagini inserite nei contenitori.

Domande Frequenti

La lezione «Immagini responsive ed elemento picture» è gratuita?

Sì — il testo completo di «Immagini responsive ed elemento picture» è 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 CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.

Cosa imparerò in «Immagini responsive ed elemento picture»?

Servite immagini delle dimensioni appropriate con srcset, sizes e l'elemento HTML picture. Eserciti CSS 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 CSS Academy?

Non è richiesta alcuna esperienza precedente. CSS 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 4 di 4.

Quanto tempo richiede la lezione «Immagini responsive ed elemento picture»?

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 CSS Academy?

Sì. Ogni lezione CSS 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

  1. Approccio mobile-first e desktop-first
  2. Larghezze fluide con le percentuali
  3. Pattern min-width e max-width
  4. Immagini responsive ed elemento picture
← Torna a CSS Academy