Con il caricamento condizionale delle immagini non esauriamo l'ottimizzazione possibile per questa tipologia di contenuto. Vogliamo anche fare in modo che ai dispositivi mobili vengano servite immagini adattate nel peso e nelle dimensioni. È il capitolo ampio e complesso delle immagini responsive di cui ci siamo già occupati ampiamente nell'articolo Immagini flessibili. Applicheremo questo approccio nel nostro progetto a tutte le immagini che non carichiamo condizionatamente in base alla larghezza della viewport.
Usare Picturefill
Se nell'articolo sulle immagini flessibili avevamo spiegato come usare Adaptive Images e nella guida introduttiva al Responsive Design ci eravamo affidati al servizio Sencha.Io Src, ora ci affideremo a Picturefill.
Si tratta di un polyfill creato da Scott Jehl che emula usando dei normali div le funzionalità offerte dall'elemento HTML picture.
Qualcuno starà osservando che un elemento picture non esiste. È vero. In effetti è l'elemento proposto dal W3C come soluzione ideale per l'utilizzo di immagini adattabili e responsive. Jehl ha per certi versi anticipato i tempi, offrendo una soluzione basata su Javascript che possiamo iniziare a usare già da ora.
Per usare Picturefill bisognerà prima di tutto preparare almeno due versioni di una stessa immagine, quella che intendiamo servire ai dispositivi mobili e quella destinata ai device più capaci. Poi basta collegare lo script al documento e strutturare nel modo che segue il markup HTML per le immagini:
<div data-picture data-alt="Barcellona">
<div data-src="barcellona-1-small.jpg"></div>
<div data-src="barcellona-1-big.jpg" data-media="(min-width: 600px)"></div>
<!--[if (lt IE 9) & (!IEMobile)]>
<div data-src="barcellona-1-big.jpg"></div>
<![endif]-->
<noscript>
<img src="barcellona-1-small.jpg" alt="Barcellona">
</noscript>
</div>Tutto il blocco va racchiuso in un div che abbia l'attributo data-picture.
Questo div può essere accompagnato da un attributo data-alt per il testo alternativo dell'immagine.
All'interno del div inseriamo poi una serie di altri div. Devono tutti avere un attributo data-src con l'URL assoluto o relativo dell'immagine da caricare.
Il nostro primo div con data-src punta a 'barcellona-1-small.jpg', un'immagine di 320x139px che serviremo agli smartphone.
Il secondo div con data-src punta invece all'immagine 'barcellona-1-big.jpg', di 655x288px: verrà visualizzata su tablet e desktop. O meglio: verrà visualizzata sui dispositivi che abbiano una larghezza minima della viewport di 600px. Per questo scopo abbiamo usato un secondo attributo sul div, data-media. Il valore di questo attributo può essere una qualunque media query CSS3.
La terza sezione del blocco è per IE8. Questo browser non supporta le media query. Di default riceverà la prima immagine del blocco definita senza l'attributo data-media. Nel nostro caso riceverebbe dunque l'immagine piccola. Ma dato che vogliamo usare quella grande, specifichiamo il tutto racchiudendo in un commento condizionale un nuovo div che punta all'immagine grande.
E se Javascript non fosse disponibile? Ci salvaguardiamo racchiudendo in un noscript il vecchio e caro tag img con l'URL dell'immagine che vogliamo servire in queste circostanze (è preferibile indicare l'immagine più piccola).
Tutto qui. Va solo aggiunto che il numero di immagini alternative che è possibile indicare è praticamente infinito. Possiamo per esempio indicare un'immagine piccola, una media e una grande. Ma anche combinare come meglio crediamo le media query, specificando anche le immagini per gli schermi ad alta densità. Per ulteriori esempi vi rimandiamo alla pagina del progetto su GitHub.
Per usare Picturefill è necessario appoggiarsi ad un'altra libreria polyfill, matchMedia.js. Entrambe sono incluse nei sorgenti della nostra demo. Ma matchMedia è uno strumento così efficace che merita una trattazione a sé. Lo faremo nella prossima lezione.