Immagini responsive

1. Il concetto, spiegato da zero

La stessa immagine può avere risoluzioni o dimensioni differenti secondo lo schermo.

srcset propone al browser più risoluzioni, sizes descrive lo spazio occupato. Usa width e height per ridurre salti di layout; img con max-width:100% in CSS evita sbordi.

2. Un esempio ragionato

Osserva l’esempio e leggi ogni istruzione nell’ordine. Prima di provarlo, fermati a prevedere cosa succederà; capire il motivo del risultato è più importante che memorizzare la sintassi.

<picture>
 <source media="(min-width: 700px)" srcset="grande.jpg">
 <img src="piccola.jpg" alt="Panorama di prova" width="280" height="160">
</picture>

Come leggere questo esempio

1. Prima di eseguire, immagina come apparirà il risultato nel browser.
2. Spiega con parole tue in che modo “immagini responsive” risolve un problema concreto.
3. Rileggi ogni riga del programma e individua i valori che vengono creati o modificati.
4. Modifica un valore; confronta il comportamento e annota che cosa è cambiato.

3. Adesso tocca a te

Obiettivo dell’esercizio: Definisci un’immagine con una sorgente per schermi grandi.

Puoi partire dall’esempio, riprodurlo e poi modificarlo. La soluzione di riferimento è disponibile sotto, ma conviene aprirla soltanto dopo un primo tentativo.

Il risultato comparirà qui.

<picture>
 <source media="(min-width: 700px)" srcset="grande.jpg">
 <img src="piccola.jpg" alt="Panorama di prova" width="280" height="160">
</picture>

4. Verifica e ripasso

5. Come proseguire

Prima del capitolo successivo, prova a spiegare il concetto a un amico senza leggere il codice. Se non riesci, torna all’esempio e fai una nuova variante: imparare significa anche sperimentare.