0Pricing
HTML Academy · Lezione

L’elemento picture per l’art direction

Sostituire intere immagini in base alle condizioni del viewport

L’elemento picture per l’art direction è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 3 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.

Problema della direzione artistica

La direzione artistica consiste nel fornire un ritaglio o una composizione dell'immagine fondamentalmente diversi a seconda delle dimensioni dello schermo:

  • Foto panoramica completa su desktop
  • Ritaglio verticale ingrandito su dispositivi mobili
  • Questo non si può risolvere con srcset + sizes da soli

L'elemento picture

L'elemento <picture> racchiude più elementi <source> e un elemento <img> di fallback:

<picture>
  <source media="(min-width: 800px)" srcset="wide-crop.jpg">
  <source media="(min-width: 500px)" srcset="medium-crop.jpg">
  <img src="narrow-crop.jpg" alt="Team photo">
</picture>
<!-- Browser picks the first matching source -->
<!-- img is required as fallback and carries the alt attribute -->

Come funziona picture

Il browser valuta gli elementi <source> in ordine, dall'alto verso il basso:

  1. Controlla la condizione media del primo elemento source: se corrisponde, usa quell'immagine
  2. Controlla il secondo elemento source: se corrisponde, usa quella
  3. In assenza di corrispondenze, passa a <img> come impostazione predefinita

L'elemento <img> continua a visualizzare l'immagine scelta e contiene il testo alt.

Cambio di formato con picture

<picture> può anche selezionare i formati delle immagini in base al supporto del browser:

<picture>
  <!-- AVIF: best compression, newest support -->
  <source type="image/avif" srcset="photo.avif">
  <!-- WebP: great compression, wide support -->
  <source type="image/webp" srcset="photo.webp">
  <!-- JPEG: universal fallback -->
  <img src="photo.jpg" alt="Mountain photo">
</picture>
<!-- Browser picks the first format it supports -->

Combinare direzione artistica e formato

È possibile combinare le condizioni media e la selezione del formato:

<picture>
  <source
    media="(min-width: 800px)"
    type="image/webp"
    srcset="hero-wide.webp"
  >
  <source
    media="(min-width: 800px)"
    srcset="hero-wide.jpg"
  >
  <source type="image/webp" srcset="hero-mobile.webp">
  <img src="hero-mobile.jpg" alt="Hero image" width="1200" height="600">
</picture>

L'elemento img è obbligatorio

L'elemento <img> all'interno di <picture> non è facoltativo:

  • Visualizza l'immagine selezionata
  • Contiene il testo alt per l'accessibilità
  • Contiene gli attributi width, height, loading e altri attributi
  • Senza di esso non viene visualizzato nulla

L'attributo media di source

L'attributo media accetta query media CSS standard:

<picture>
  <source media="(orientation: landscape)" srcset="landscape.jpg">
  <source media="(orientation: portrait)" srcset="portrait.jpg">
  <img src="portrait.jpg" alt="Scene">
</picture>

<!-- Other media features work too: -->
<!-- (prefers-color-scheme: dark) -->
<!-- (min-resolution: 2dppx) -->
<!-- (max-width: 600px) -->

source srcset con selezione responsive

Combini la direzione artistica con srcset per ottenere il pieno controllo:

<picture>
  <!-- Desktop: wide hero, multiple resolutions -->
  <source
    media="(min-width: 1024px)"
    srcset="hero-1024.jpg 1024w, hero-2048.jpg 2048w"
    sizes="100vw"
  >
  <!-- Mobile: portrait crop -->
  <img
    srcset="hero-mobile-400.jpg 400w, hero-mobile-800.jpg 800w"
    sizes="100vw"
    src="hero-mobile-400.jpg"
    alt="Conference keynote speaker on stage"
  >
</picture>

Immagini per la modalità scura

Fornisca immagini diverse agli utenti che usano la modalità scura:

<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset="logo-dark.svg"
  >
  <img src="logo-light.svg" alt="Company logo" width="120" height="40">
</picture>
<!-- Users with dark mode OS setting see logo-dark.svg -->
<!-- Everyone else sees logo-light.svg -->

picture vs background-image CSS

Quando utilizzare <picture> invece degli sfondi CSS:

  • Immagini di contenuto: utilizzi <picture> perché richiedono testo alt e fanno parte del contenuto del documento
  • Immagini decorative: utilizzi background-image CSS con le query media
  • Immagini importanti per la SEO: utilizzi sempre <picture>, perché i crawler indicizzano gli elementi img

Nota sull'accessibilità

L'attributo alt appartiene sempre a <img>, non a <source>:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <!-- alt goes on img, not source: -->
  <img src="photo.jpg" alt="Sunset over the Pacific Ocean">
</picture>
<!-- screen readers read img's alt, whichever source was selected -->

Caricamento differito con picture

Aggiunga il caricamento differito all'elemento <img> all'interno di <picture>:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img
    src="photo.jpg"
    alt="Gallery photo"
    loading="lazy"
    width="800"
    height="600"
  >
</picture>

Verifica rapida

Quale elemento in un blocco picture deve essere sempre presente e contiene l'attributo alt?

Riepilogo: elemento picture

Direzione artistica con picture:

  • <picture> racchiude elementi <source> e un elemento <img>
  • Il browser sceglie il primo elemento <source> corrispondente
  • Utilizzi media per le condizioni del viewport e type per la selezione del formato
  • <img> è obbligatorio: visualizza l'immagine e contiene il testo alt
  • Lo combini con srcset + sizes per ottenere il pieno controllo responsive

Domande Frequenti

La lezione «L’elemento picture per l’art direction» è gratuita?

Sì — il testo completo di «L’elemento picture per l’art direction» è 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 «L’elemento picture per l’art direction»?

Sostituire intere immagini in base alle condizioni del viewport 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 3 di 4.

Quanto tempo richiede la lezione «L’elemento picture per l’art direction»?

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

  1. L’elemento img: src, alt, width e height
  2. Immagini responsive con srcset e sizes
  3. L’elemento picture per l’art direction
  4. figure e figcaption
← Torna a HTML Academy