Picture element

Abbiamo visto quando e perché è un bene usare le immagini responsive. Abbiamo visto come gestire le immagini che scalano di dimensione ma di fatto restano la stessa. Questa volta andiamo a vedere come gestire il caso in cui dobbiamo dichiarare manualmente quando usare una determinata immagine. Questa volta vogliamo il controllo su quando usare una determinata immagine.
Vedrai che sarà una passeggiata anche in questo caso.

Art direction

Il caso che andiamo ad analizzare è quello in cui l'immagine cambia di entrambe dimensioni e proporzioni. Come, ad esempio, nel caso dell'immagine di Fedez qui sotto:

Nel primo caso è quasi quadrata. Allargarndo in viewport diventa orizzontale.
In questo caso non possiamo limitarci a delegare al browser la scelta dell'immagine. Dobbiamo assicurarci che nel primo caso sia l'immagine quadrata, nel secondo quella rettangolare.
Ecco che ci vengono in auto le care immagini resposive.

Picture element

Il funzionamento del tag <picture> è simile a quello del tag  video di html5.
Si parte sempre dal vecchio buon tag <img>.
Si aggiungono prima del tag img una serie di risorse alternative, le quali risorse al loro interno hanno una media query che indica quando vanno utilizzate.
Infine il tutto viene wrappato (scusate l'inglesismo ma incapsulare proprio non mi suona) dentro un tag <picture>.

<picture>  
    <source media="(min-width: 900px)" srcset="fedez-large.jpg">
    <source media="(min-width: 750px)" srcset="fedez-med.jpg">
    <img src="fedez-small.jpg" alt="Fedez">
</picture>  

Quello che succede in questo caso, è che (continuo a romanzare il browser):
- oh, vedo che c'è un picture element. Vediamo cosa c'è dentro - mh, c'è una source. Dice "min-width: 900px". Io sono largo 768px, andiamo avanti - ecco, questa (min-width: 750px) è per i viewport maggiori di 750px. Fa al caso mio. - vediamo cosa abbiamo qui... ouch, un'immagine di Fedez. Vabè non poteva andarmi sempre bene. Mi turo il naso e la renderizzo lo stesso.

Di pari passo il layout grafico della pagina cambierà a 750px e quella che era l'immagine a tutta larghezza diventerà l'immagine di testata.

Diretto e facile, no?

Si può fare di meglio

Possiamo fare di meglio. Ad esempio, come sarebbe se distinguessimo i due casi di retina e non retina?
Sarebbe meglio, esatto.

Per distinguere i due casi, possiamo usare il nostro amico srcset di cui abbiamo già parlato.
All'organizzazione attuale del picture dobbiamo solo aggiungere la variante a 2x. Quindi avremo:

<picture>  
    <source media="(min-width: 900px)" srcset="fedez-large.jpg 1x, [email protected] 2x">
    <source media="(min-width: 750px)" srcset="fedez-med.jpg 1x, [email protected] 2x">
    <img src="fedez-small.jpg" alt="Fedez">
</picture>  

Ancora meglio

A dirla tutta si può fare ancora meglio. Come? Aggiungendo immagini con formati creati per il web ma non largamente supportati. Come ad esempio APNG, WEBP o JPEG2000.

Aggiungendo l'attributo type possiamo dichiarare in anticipo al browser che tipo di immagine stiamo fornendo. Il browser la prenderà in considerazione solo nel caso sia supportata.

<picture>  
    <source type="image/apng" media="(min-width: 900px)" srcset="fedez-large.apng 1x, [email protected] 2x">
    <source media="(min-width: 900px)" srcset="fedez-large.jpg 1x, [email protected] 2x">
    <source type="image/apng" media="(min-width: 750px)" srcset="fedez-med.apng 1x, [email protected] 2x">
    <source media="(min-width: 750px)" srcset="fedez-med.jpg 1x, [email protected] 2x">
    <img src="fedez-small.jpg" alt="Fedez">
</picture>  

In questo modo siamo incredibilmente future friendly e altrettanto amichevoli con i browser diversamente buoni (per dirne uno, IE).

Conclusioni

Con il tag picture abbiamo coperto il secondo e ultimo caso di utilizzo delle immagini responsive. Possiamo coprire immagini che cambiano sulla base di richieste esplicite (art direction) o sulla base di ottimizazzioni a noi trasparenti (srcset).
Il peso delle pagine, la velocità di caricamento e in generale l'esperienza utente ne gioveranno.

Adesso che abbiamo visto come gestire il codice delle immagini responsive, non ci rimane che capire quali immagini dobbiamo creare. Quali dimensioni dobbiamo fornire, quali "tagli" ci conviene creare e quali invece sono inutili.
Deciderlo è l'aspetto meno facile delle immagini responsive e per questo motivo ci sono una serie di strumenti che ci possono tornare utili. Tutto questo, nel prossimo post.