Corso di HTML / Immagini responsive con srcset, sizes e picture

Le immagini responsive forniscono al browser file con risoluzioni o composizioni diverse, affinché possa selezionare un'immagine adatta alla visualizzazione. Usate srcset e sizes per la scelta della risoluzione della stessa immagine, e picture quando uno schermo più stretto richiede un diverso ritaglio dell'immagine.

Scaricare i file immagine di esempio

Questi esempi utilizzano la stessa immagine del lago in tre larghezze e un ritaglio quadrato che mette in risalto l'albero. Scaricate i file e salvateli nella stessa cartella del vostro file HTML per testare gli URL relativi non modificati. Preparate il file, il testo alternativo e le dimensioni utilizzando i principi in Immagini: img, testo alternativo e dimensioni.

• Immagine con larghezza 480 pixel
• Immagine con larghezza 960 pixel
• Immagine con larghezza 1600 pixel
• Ritaglio quadrato di 800×800 pixel

I primi tre mantengono la scena e il rapporto d'aspetto. Il file quadrato ha una composizione diversa per una visualizzazione stretta.

Selezionare la risoluzione dell'immagine con srcset e sizes

I descrittori 480w, 960w e 1600w in srcset indicano la larghezza effettiva di ciascun file in pixel. sizes descrive la larghezza di progetto prevista dell'immagine in diverse condizioni della finestra.

<img class="example-fluid"
  src="html-image-sample-lake-tree-960-v1.webp"
  srcset="html-image-sample-lake-tree-480-v1.webp 480w,
          html-image-sample-lake-tree-960-v1.webp 960w,
          html-image-sample-lake-tree-1600-v1.webp 1600w"
  sizes="(max-width: 800px) 100vw, 800px"
  alt="Un albero su un&#x27;isola in mezzo a un lago, con montagne sullo sfondo"
  width="1600" height="900">

Questo presuppone che l'immagine abbia approssimativamente la stessa larghezza della finestra di visualizzazione fino a 800 pixel CSS e che non superi gli 800 pixel CSS. Se il vostro layout è diverso, modificate sizes in modo che sia adatto. src offre una soluzione di fallback per ambienti senza supporto di srcset.

.example-fluid {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
}

Questo CSS si applica solo al primo esempio, che ha la classe example-fluid. Il browser può anche tenere conto della densità dei pixel del dispositivo e dello zoom. Pertanto, un viewport stretto non garantisce che venga selezionato il file da 480 pixel. sizes descrive i pixel CSS visualizzati e non la larghezza del file scaricato.

Usare descrittori di densità per una larghezza di visualizzazione fissa

Se un'immagine viene sempre visualizzata con una larghezza CSS di 480 pixel, è possibile proporre candidati 1x e 2x. Non utilizzate sizes con questa forma.

<img class="example-fixed"
  src="html-image-sample-lake-tree-480-v1.webp"
  srcset="html-image-sample-lake-tree-480-v1.webp 1x,
          html-image-sample-lake-tree-960-v1.webp 2x"
  alt="Un albero su un&#x27;isola in mezzo a un lago, con montagne sullo sfondo"
  width="480" height="270">

.example-fixed {
  display: block;
  width: 480px;
  height: auto;
}

Il CSS del primo esempio non si applica a questa immagine. Questo CSS fissa la larghezza visualizzata a 480 pixel, quindi l'immagine può sporgere oltre un contenitore più stretto. Se la larghezza di visualizzazione deve cambiare a seconda del layout, utilizzate l'approccio menzionato precedentemente con w e sizes. Non mescolate i descrittori w e x in un unico srcset.

Modificare il ritaglio con picture

picture può offrire una composizione diversa, invece di solo una risoluzione diversa. Questo esempio utilizza il ritaglio quadrato per larghezze della finestra fino a 600 pixel e un'immagine in formato orizzontale altrimenti.

<picture class="example-picture">
  <source media="(max-width: 600px)"
          srcset="html-image-sample-lake-tree-square-800-v1.webp"
          width="800" height="800">
  <img src="html-image-sample-lake-tree-960-v1.webp"
       alt="Un albero su un&#x27;isola in mezzo a un lago, con montagne sullo sfondo"
       width="960" height="540">
</picture>

La selezione di un ritaglio e l'adattamento della sua larghezza di visualizzazione sono azioni distinte. Inserite questo CSS nell'elemento style del head o nel foglio di stile collegato affinché l'immagine in picture si adatti a un elemento genitore stretto mantenendo le proporzioni.

.example-picture img {
  display: block;
  max-width: 100%;
  height: auto;
}

La foto sopra mostra il file quadrato utilizzato su schermi stretti; questa foto nell'articolo stesso non cambia in base alla larghezza della finestra. picture richiede sempre un elemento img con src per l'immagine di ripiego e alt per il testo alternativo. Ogni source fornisce una condizione e un file candidato; il testo alternativo dell'immagine appartiene a img.

Verificare quale immagine il browser ha selezionato

Salvate i quattro file immagine, mantenendo i loro nomi di file, accanto a index.html. Inserite un esempio HTML all'interno di body e il suo CSS all'interno di un elemento style in head o in un foglio di stile separato. Per testare in base alla larghezza effettiva della finestra sui dispositivi mobili, aggiungete <meta name="viewport" content="width=device-width, initial-scale=1"> a head.

1. Aprite index.html in un browser e aprite il pannello rete degli strumenti per sviluppatori.
2. Modificate la larghezza della finestra di visualizzazione, disattivate la cache e ricaricate la pagina. Controllate i nomi dei file delle richieste delle immagini per vedere quali candidati sono stati caricati.
3. Per l'esempio picture caricate una volta con una larghezza della finestra del browser di 600 pixel o meno e una volta con più di 600 pixel. Controllate il ritaglio quadrato alla larghezza più stretta e il file in modalità orizzontale alla larghezza più ampia.

Potete anche verificare questi valori nella console. currentSrc mostra l'URL dell'immagine attualmente selezionata dal browser. Il primo comando si riferisce all'esempio srcset; il secondo comando si riferisce all'esempio picture.

document.querySelector('.example-fluid').currentSrc
document.querySelector('picture img').currentSrc

Anche con la stessa larghezza della finestra, la densità dei pixel e lo zoom possono determinare quale file srcset viene selezionato. Se un file più grande è già stato caricato, non verrà immediatamente sostituito da un file più piccolo riducendo la finestra. Modificate le condizioni, disattivate la cache e ricaricate prima di confrontare.

Verificate la modifica della risoluzione e l'adattamento del ritaglio dell'immagine

La finestra di visualizzazione è l'area del browser utilizzata per disporre la pagina. La densità dei pixel del dispositivo collega i pixel CSS ai pixel fisici dello schermo. La densità, lo zoom e lo stato della cache possono influenzare la selezione della risoluzione anche con la stessa larghezza della finestra, quindi non è corretto garantire un nome di file fisso per srcset. Verificate la condizione media per il ritaglio delle immagini separatamente dalla modifica della risoluzione.

Se viene selezionata l'immagine sbagliata

• Verificate che ogni identificatore w corrisponda alla larghezza effettiva del file in pixel.
• Confrontate sizes con la larghezza CSS per ogni dimensione della finestra.
• Per cambiare risoluzione, usate file con la stessa composizione tramite srcset e sizes; per cambiare ritaglio, usate picture con immagini inquadrate diversamente.
• Mantenete un testo alt significativo su img all'interno di picture.

Per regole di selezione dettagliate, consultate la guida alle immagini responsive MDN e la specifica per le immagini HTML WHATWG.