Immagini responsive

Ho letto un articolo molto interessante che parla delle immagini responsive e del loro utilizzo, ne voglio parlare con voi.

Da quando il responsive design ha fatto capolino con la sua novità nello sviluppo e realizzazione dei nostri siti e portali web ognuno di noi si è buttato a capofitto in questa nuova avventura: grazie all’utilizzo di CSS3 e delle media queries siamo in grado di rendere il nostro layout adattabile a qualsiasi tipo di device con somma gioia nostra e soprattutto dei nostri clienti.

A parer mio è chiaro ormai che inserire il sopracitato responsive design come un plus piuttosto che come “conditio sine qua non” è una pratica alquanto poco elegante, ma tralasciando questi pareri personali e tornando al tema del nostro argomento ovvero il responsive design un tema che rimane aperto è quello riguardante le immagini: è possibile tramite il CSS definire il dimensionamento che l’immagine deve avere nella varie grandezze di schermo, ma il browser scarica ancora la versione full-size.

Questo può, anzi è, un problema per smartphone e tablet che sfruttano magari una capienza di banda limitata.

Immagini responsive

La situazione si complica se pensiamo ai vari schermi ad alta densità come quelli retina della Apple, dove le immagini dovrebbero avere una risoluzione che si avvicini alla qualità per stampe professionali; abbiamo la necessità di scaricare immagini con una densità in pixel appropriata per gli schermi utilizzati dagli utenti. Purtroppo il tag in Html non è all’altezza di questo compito per questo siamo costretti ad inventarci strade alternative e a fare uso massiccio di Javascript o di script lato server.

Nonostante le difficoltà sappiate che esiste una compagnia conosciuta come  Responsive Images Community Group (RISG) che sta cercando di rimediare a questa situazione inserendo nel codice Html dei tag che permettano di utilizzare immagini responsive nel markup della pagina

Per esempio immagini che appaiono nitide sullo schermo di un computer portatile, su quello di un iPad, che ha un risoluzione di 2048 per 1536 pixels, o di 264 pixels per pollice, non hanno la stessa bellezza, con le opzioni nuove è possibile rilasciare una immagine ad alta risoluzione per schermi ad alta densità ed uno con una risoluzione standard per gli altri.

Standard per Immagini responsive

Tutti sappiano che l’ente che definisce gli standard per il web è il World Wide Web Consortium (W3C), ma è anche vero che sono gli sviluppatori di browser a determinare quali funzionalità di Html possono essere utilizzate e quali effettivamente supportano: attualmente c’è un discreto “mercanteggio” su queste differenti opzioni anche se quella che sembra venga maggiormente supportata è srcset.

Srcset è l’attributo proposto per il tag <img> che dovrebbe permetterci di specificare quale versione alternativa è possibile scaricare a seconda delle diverse esigenze

<img alt=”This is an image”
src=”image.jpg”
srcset=”image-HD.jpg 2x, image-phone.jpg 100w, image-phone-HD.jpg 100w 2x”>

In questo esempio “2x” significa di usare quella versione di immagine se il dispositivo ha un display ad alta risoluzione, “100w” significa usare quella versione se la larghezza massima è di 100 pixel, “2x 100w”, significa usare questa versione se la larghezza massiam viewport è 100 pixel e il display è ad alta intensità.