Immagini Responsive: approcci e tecniche di implementazione

Ad oggi il Responsive Web Design rappresenta uno standard per quanto riguarda lo sviluppo di siti e web application: abbiamo la possibilità di progettare e realizzare design che si adattano in base al display in cui vengono visualizzati.

La grande varietà di dispositivi disponibili sul mercato attraverso cui consultiamo il web contribuisce ad aggiungere complessità al problema: un fattore che rende ancora più diversificato il panorama sono gli schermi ad alta densità di pixel (high pixel density display) come, ad esempio, i Retina Display della Apple.

Per avere una panoramica non esaustiva dello scenario è possibile far riferimento al progetto DPI Love.

In questo contesto, se per la maggior parte degli elementi che costituiscono il design di un sito web esistono già soluzioni pronte all’uso che godono del supporto dei web browser più utilizzati, per la gestione delle immagini, la situazione fino ad oggi è stata più incerta.

Non si tratta di una questione di poco conto, in quanto, ad oggi, le immagini incidono per il 62% sulla banda utilizzata dal traffico web; servire l’immagine che meglio si adatta al dispositivo in cui verrà visualizzata è un task che comprende diversi aspetti:

• ottimizzazione della banda disponibile;
• implementazioni server-side e client-side;
• validità del markup ed esigenze di art direction.

Le tecniche di implementazione delle immagini responsive

Fluid images

La soluzione classica con il supporto maggiore nei web browser è quella di impostare tramite CSS la larghezza dell’immagine a quella del suo contenitore:

img {
    max-width: 100%;
}

Si tratta dell’approccio più semplice e diffuso: il framework Boostrap v3 ad esempio usa la classe .img-responsive:

img {
    max-width: 100%;
}

Quest’approccio prevede un’unica immagine a prescindere dal dispositivo su cui verrà visualizzata.

Adaptive images

Un’implementazione che prevede tecnologie server-side & client-side consiste nell’individuare le impostazioni del display del visitatore attraverso JavaScript, impostare un cookie e servire quindi versioni ottimizzate delle immagini presenti in pagina. Un approccio di questo tipo ha il vantaggio di non richiedere cambiamenti al markup e quindi si adatta bene ad essere usato in un progetto esistente.

Alcune sue implementazioni in PHP, Python & Ruby.

Gli attributi srcset & sizes del tag <img>

Se l’esigenza è quella di scalare l’immagine in base al cambio di risoluzione o al device pixel ratio, questi due attributi introdotti di recente nell’HTML Living Standard consentono di suggerire al browser un set di immagini da utilizzare con informazioni relative alla loro larghezza (srcset) ed inoltre quanto larga dovrà essere visualizzata l’immagine appropriata in base alla dimensione del viewport (sizes).

<img
  src="small-image.jpg"
  srcset="small-image.jpg 640w, large-image.jpg 1920w"
  sizes="(min-width: 768px) 50vw, 100vw"
  alt="Responsive image" />

Con quest’esempio facciamo in modo che i display Retina visualizzino un’immagine appropriata al loro pixel ratio.In quest’esempio un visitatore con uno schermo la cui risoluzione è 1920 x 1080 pixel vedrà l’immagine large-image.jpg che occuperà la metà del viewport.

<img
  src="image.jpg"
  srcset="image_2x.jpg 2x"
  alt="Responsive image" />

Il tag <picture>

Quando si rende necessario cambiare il contenuto dell’immagine che verrà visualizzata per adattarla a specifiche caratteristiche del display si parla di “art direction”.

Ad esempio possiamo prevedere un crop diverso, o anche un’immagine diversa a seconda :

• dell’utilizzo di un display standard o widescreen;
• per i tablet, in base all’orientamento portrait o landscape;
• per i display a bassa risoluzione, eliminare del testo che risulterebbe illeggibile.

A differenza degli attributi srcset e sizes, con cui si indica al browser un set di immagini che può utilizzare, il tag <picture>rappresenta una soluzione in cui si ha un maggior controllo su quale file il browser deve visualizzare.

<picture>
    <source media="(min-width: 1980px)" srcset="image-wide.jpg">
    <source media="(min-width: 1024px)" srcset="image-medium.jpg">
    <source srcset="image-medium.jpg"
    <img src="image-default.jpg"alt="Responsive image">
</picture>

In questo caso i primi due tag <source> rappresentano le immagini da visualizzare per le media query associate e il tag <img>rappresenta il fallback nel caso in cui non ci sia riscontro con le media query oppure in mancanza di supporto per il tag <picture> da parte del browser.

Sia utilizzando <picture> che gli attributi srcset e sizes avremo comunque migliorato le performance di caricamento delle immagini in quanto il browser scaricherà soltanto l’immagine indicata.

Il supporto dei browser per <picture> e per srcset e sizes è ancora incompleto ma è possibile utilizzarli fin da subito grazie ad una libreria polyfill (librerie che forniscono supporto per funzionalità sui browser più obsoleti) in JavaScript, Picturefill, che ci permette di utilizzare l’elemento <picture> garantendo il supporto anche per quei browser che non lo supportano.

In questa breve panoramica abbiamo avuto modo di valutare le soluzioni attualmente disponibili per affrontare il problema e sebbene il supporto browser non sia ancora completo, l’inclusione dell’elemento <picture> all’interno della Working Draft HTML 5.1 del W3C, lascia intendere che diventerà a breve parte dello standard.

Riferimenti

https://usecases.responsiveimages.org/#dfn-art-direction

http://www.html5rocks.com/en/tutorials/responsive/picture-element/

http://alistapart.com/article/responsive-images-in-practice

http://blog.cloudfour.com/responsive-hero-images/