24 Settembre 2015 - Design & Development

Immagini Responsive: approcci e tecniche di implementazione

Immagini Responsive

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/

Condividi questo articolo

Altre notizie dal blog.

blog-settesoli-immedia.jpg

14 Marzo 2022 - Design & Development

Il nuovo sito corporate di Cantine Settesoli, un progetto tra design e sostenibilità.

Cantine Settesoli ci coinvolge in nuovo stimolante progetto per rinnovare la propria identità digitale e consolidare il proprio posizionamento che punta principalmente a un target B2B. 

Leggi
Accessibilità siti web

13 Novembre 2020 - Design & Development

Accessibilità siti web e e-commerce: cos'è e perché è importante

A causa dell’isolamento sociale forzato dal Covid-19, un numero sempre maggiore di persone, soprattutto persone con disabilità, è costretta a usufruire di servizi online, scontrandosi spesso con le difficoltà legate al tema dell’accessibilità dei siti web e degli e-commerce.

Leggi
Drupal 8

6 Febbraio 2018 - Design & Development

Passaggio da Drupal 7 a Drupal 8: i pro e i contro raccontati dai nostri developer

Una delle novità più rilevanti che hanno recentemente interessato il mondo dello sviluppo è stata l’avvento di Drupal 8, la più recente versione del software utilizzato dalle più importanti companies e dai maggiori siti governativi presenti in tutto il mondo.

Leggi
Giornata Internazionale dei Musei

18 Maggio 2016 - Design & Development

Giornata Internazionale dei Musei: quando condividere fa cultura

Custodire tesori di inestimabile bellezza e valore e tenerli quasi nascosti. È il colmo, no? Il pensar comune che vede museo=noia è ancora molto diffuso nonostante le numerose iniziative messe in atto negli ultimi anni, volte a diffondere una sempre maggiore cultura legata alle visite museali. Il museo non dev’essere considerato solo un contenitore di cultura, ma un luogo in cui la cultura vive e interagisce con chi ne entra in contatto.

Leggi