Il dibattito sull’utilizzo delle immagini nel responsive web design è sempre aperto. Come puoi offrire immagini differenti e adatte alle diverse dimensioni del viewport? In questo articolo ti mostro le possibili soluzioni, ma adesso voglio concentrarmi sugli attributi “picture” e “scrset” delle immagini.
Questi attributi permettono di offrire al browser più di una immagine e sarà il browser stesso a scegliere la più adatta a una determinata risoluzione dello schermo. Fantastico vero? Vediamo come.
Come ben sai gli elementi base delle immagini sono:
- l’elemento src: serve a localizzare un’immagine;
- l’elemento alt: serve a inserire un testo utile nel caso in cui l’immagine non venga visualizzata ed è indispensabile per i lettori non vedenti.
<img src=“immagine.jpg” alt=“testo utile per l’immagine” />
Fin qui ci siamo. Adesso vediamo lo stile di un’immagine responsive.
img{ max-width:100% }
Ciò significa che la larghezza dell’immagine deve essere pari al 100% del suo contenitore e così facendo impostiamo la sua flessibilità in larghezza, diventando quindi flessibile piuttosto che responsive.
L’ ATTRIBUTO SCRSET
Perché l’immagine diventi responsive utilizziamo l’attributo “srcset”, che permette di cambiare la risoluzione dell’immagine facendo sì che sia il browser stesso a scegliere la dimensione corretta dell’immagine da visualizzare. La larghezza specificata, dopo il percorso dell’immagine aggiunta, corrisponde alla sua larghezza:
<img src=“immagine.jpg” alt=“testo utile” srcset=“media.jpg 600w, grande.jpg 1200w” />
dove 1200w sta per 1200px di larghezza. Dunque, quando il browser raggiungerà il viewport di 600px di larghezza, sceglierà di visualizzare l’immagine di media larghezza (600px); quando invece raggiungerà la dimensione di 1200px , visualizzerà l’immagine grande ( 1200px).
Insieme all’attributo “srcset” viene utilizzato anche l’attributo “sized”, per usufruire di un’ulteriore possibilità e sfruttare l’espressione delle media query per definire la larghezza dell’immagine a ogni punto dato dello schermo. Se la media query si verifica, viene usata la dimensione dell’immagine specificata nella media query in modo relativo rispetto al viewport.
<img src=“piccola.jpg” alt=“testo utile” srcset=“media.jpg 600w, grande.jpg 1200w” sized=“ (min-width: 500px) 66vw, 100vw” />
Nella prima parte abbiamo specificato le immagini da visualizzare in base alla dimensione del viewport:
- piccola;
- media larga 600px;
- grande larga 1200px.
Con la seconda parte del codice invece chiediamo al browser che se si verifichi la media query, secondo cui quando il browser è più piccolo di 500px visualizziamo l’immagine piccola: questa non occupa tutta la grandezza del viewport, ma solo il 66%. I valori 66vw e 100w sono espressi in modo relativo rispetto al viewport e non al contenitore dell’immagine. Di default il valore è il 100%.
Nel primo esempio utilizziamo l’attributo scrset per “servire al browser” 2 immagini differenti: la prima di 800px quando il viewport è largo 800px, la seconda di 500px quando il viewport è largo massimo 500px. Inoltre diciamo al browser che l’immagine deve riempire il 66% della larghezza del viewport.
ELEMENTO PICTURE
L’elemento picture permette agli sviluppatori di specificare elementi multipli e le media query per ognuna di esse. In particolare permette di realizzare l’art direction dell’immagine, cioè di applicare gli stili necessari per poterla modificare e visualizzare correttamente a diverse risoluzioni.
<picture> <source media=“(min-width:500px)” srcset=“grande.jpg 800w, media.jpg 500w, quadratamedia.jpg 500w /> <img src=“fallback.jpg” alt=“immagine” /> </picture>
STILE DI UN ELEMENTO PICTURE
Lo stile di un elemento picture è diverso dallo stile di un elemento immagine. L’elemento picture contiene un’immagine e garantisce il giusto percorso per poterla visualizzare in ogni media query data all’elemento immagine. Le immagini flessibili sono realizzabili con l’elemento picture se impostiamo il codice in questo modo:
picture img {
width:100%;
}
Per esempio possiamo scrivere il codice così:
<picture class=“album”> <source media=“(min-width:801px)” srcset=“1200.png 1200w” /> <img src=“fallback.jpg” alt=“immagine” /> </picture>
In questo caso diciamo al browser di usare un’immagine larga 1200px quando il viewport è largo 801px di dimensione e superiori.
Oppure scrivere il codice in questo modo:
<source media=“(max-width: 800px) and (min-width:501px”) srcset=“800.png 800w, 800-2x.jpg 2x” />
In tal caso specifichiamo che l’immagine è visualizzata solo per viewport di dimensione minima di 501px e massima di 800px. L’attributo “srcset” poi caricherà l’immagine più adatta nella versione 1x e 2x di 800px larga. In tal caso dobbiamo quindi preparare due immagini della stessa dimensione, ma di risoluzione doppia per schermi retina e non.
STILE DELL’ELEMENTO PICTURE
A questo punto allo stile dell’elemento picture possiamo aggiungere un ulteriore stile ad con i pseudo elementi come :before e :after, inserire interazione con il mouseover, aggiungere filtri css e così via.
Nel secondo esempio, lavoriamo in modo che, quando la risoluzione è pari a un minimo di 801px, il browser visualizzi l’immagine grande di 1200px; quando il browser è pari a un massimo di 800px e un minimo di 501px di larghezza visualizzi l’immagine larga 800px ( tablet); quando, invece, il browser raggiunge una larghezza massima di 500px, debba visualizzare l’immagine quadrata pari a 500px. Inoltre, possiamo impostare due immagini: una per i display retina (con risoluzione doppia) e una per i display normali.
Sarebbe un’ottima soluzione (anche se lo stato di compatibilità dei browsers non è ancora elevato) in particolare con Safari che sta lavorando sull’attributo scrset, mentre ancora agli inizi per quanto riguarda l’elemento picture.
Qui puoi vedere lo stato di compatibilità dei browser dell’elemento picture. Non resta altro che aspettare la compatibilità diventi elevata nel minor tempo possibile.
PICTURE POLYFILL
Lo sviluppatore Scott Jehl ha creato Picturefill, un Polyfill che sfrutta l’elemento picture e che puoi scaricare su GitHub. Le cose importanti da ricordare sono l’ inserimento del link dello script, che richiama Picturefill, all’interno del tag head e l’attributo async, importante per un ottima performance delle immagini.
<script src="picturefill.js" async> </script>
È indispensabile inserire anche il codice per i browser che non supportano html5, a meno che tu l’abbia già aggiunto HTMl Shiv.
<script> document.createElement( "picture" ); </script>
Buon lavoro con Picture! 🙂
