Immagini responsive

Le immagini responsive permettono di fornire al visitatore l’immagine con la risoluzione più adeguata alla risoluzione del viewport in uso.

Esistono quattro approcci alle immagini responsive: due per le immagini inline (img srcset/sizespicture element) , due per le immagini di background (media queries e image-set).

Img srcset/sizes image-set lasciano al browser la scelta migliore del formato immagine da fornire al browser del visitatore, mentre picture element e la definizione di background differenti in base alla media query lasciano nelle mani dello sviluppatore il potere decisionale e sono quindi da utilizzare in quei casi in cui la componente di art direction richiede immagini con proporzioni o inquadrature legate al viewport di utilizzo.

Per maggiori informazioni è caldamente consigliato il ciclo di post di Jason Grigsby Responsive Images 101.

Come supporto alla definizione dei tagli di immagine è consigliato l’utilizzo di Responsivizr.

Scritto da lucasalvini 09/05/2018 - 14:19
Modificato da ila 27/09/2019 - 11:13