Il problema delle immagini responsive

Di - 5 March 2014 - in
Post image for Il problema delle immagini responsive

Con il progredire delle tecnologia desktop e sopratutto mobile, gli sviluppatori si trovano di fronte ad una moltitudine sempre più variegata di schermi con cui dover fare i conti. Se da un lato l’adozione di layout fluidi e responsivi ha ovviato alla maggior parte dei problemi di presentazione di un contenuto web su più dispositivi, dall’altro non si è ancora arrivati ad una soluzione finale per un elemento molto importante: le immagini.

Senza volersi dilungare troppo in dettagli riguardanti la risoluzione e la dimensione delle varie tipologie di schermi, è facile intuire che il modo in cui un contenuto viene presentato, può variare molto a seconda del dispositivo utilizzato. Se per il testo il problema praticamente non si pone, modificando la dimensione del carattere, l’interlinea o anche solo la disposizione dei paragrafi e se anche un menu molto esteso, può essere accorpato ad una semplice icona, la immagini si vanno a scontrare con un problema relativo all’utilizzo dei dispositivi in mobilità. Molti di questi dispositivi infatti, sono equipaggiati con schermi ad alta risoluzione, sul quale un’immagine a bassa risoluzione, verrebbe visualizzata in modo poco definito. D’altro canto, un’immagine ad alta risoluzione, potrebbe avere un peso notevole per un dispositivo che si affida, ad esempio, a connessioni 3G.

Ecco quindi che si pone il problema di dover presentare diverse immagini a seconda del dispositivo utilizzato dall’utente. Ma come è possibile farlo? Al momento non esiste una risposta ufficiale a questa domanda, ma solo proposte. Una di queste possibile soluzioni è quella di utilizzare il tag <picture>.

Ecco un esempio:

<picture>
  <source srcset="image01.jpg 1x, image02.jpg 2x, image03.jpg 3x">
  <img src="image.jpg" alt="testo alternativo">
</picture>

All’interno del tag <picture>, troviamo il tag <source> avente l’attributo srcset, mediante il quale andremo ad indicare una serie di immagini da rendere disponibili a seconda del Device Pixel Ratio, ovvero il rapporto tra pixel fisici e virtuali (altrimenti noti come pixel CSS). La maggior parte dei dispositivi di fascia alta ha un rapporto pari a 2x, dove per ogni pixel fisico, ce ne sono 2 virtuali.
Il tag <img> viene aggiunto per mantenere una retro-compatibilità con i browser o comunque con i dispositivi più vecchi.

Un secondo modo per utilizzare questo nuovo tag è il seguente:

<picture>
  <source media="(min-width: 481px)" srcset="big.jpg">
  <source media="(max-width: 480px)" srcset="small.jpg">
  <img src="image.jpg" alt="testo alternativo">
</picture>

In questo caso, al tag <source>, assegnamo un attributo <media>, impostando delle media query tramite il quale servire l’immagine desiderata. A seguire sempre il tag <img>, come nella precedente dicitura.

Questi sono solo due semplici esempi di utilizzo. Potete trovarne altri direttamente sul sito del w3C o su quello del Responsive Image Community Group.

Al momento la soluzione non è definitiva, ma si tratta solo di una proposta che, a dire il vero, non ha incontrato del tutto il favore degli sviluppatori, in quanto il codice presentato, è comunque piuttosto corposo e nel caso di un sito contenente molte immagini potrebbe anche creare difficoltà nella manutenzione.

Ci sono anche delle proposte alternative, come ad esempio quella relativa all’adozione dell’attributo srcset direttamente sul tag <img>, che di recente è stata anche inserita nella beta 34 di Chrome, oppure diverse soluzione lato server che si preoccupano di scalare e servire le immagini di conseguenza.

Non resta che attendere l’evolversi della discussione.

Leave a Reply

Jacopo Rabolini Articolo scritto da

Technical lead e fondatore di Engeene. Si occupa di web design e web development nel tempo libero. Vorrebbe farne la sua professione. Ama il web, la tecnologia, lo spazio, i Lego, Doctor Who e un sacco di altre cose che gli hanno valso a volte l'appellativo di Nerd e altre quello di Geek.

Contatta l'autore

Previous post:

Next post: