Immagini responsive in CSS con background-image

Nella quasi totalità dei casi, quando parliamo di immagini responsive, ci riferiamo alle immagini inline in HTML. Questo perché prima del tag <picture> o dell’attributo srcset , era l’unica soluzione possibile. Con i CSS, potremmo usare le media-query, quindi non ci dovremmo preoccupare.. anzi no.

Adesso è tempo di mettere di nuovo mano a questa tecnica, usandone una più avanzata: il background image-set.

image-set() e risoluzione

Proprio come facciamo per le immagini inline, lasciamo che il browser scelga l’immagine di grandezza più adatta in base alla densità dello schermo dell’utente (o alla rete, o ad altri fattori). Vediamo rapidamente come usare la sintassi image-set:

Avrete sicuramente notato le similitudini tra questa sintassi e quella di srcset , che si basa difatti proprio su questa!

Due righe di storia

image-set() è stata il primo storico miglio per le responsive images ed è stato proprio lui a servire come base per l’attributo <img srcset=""> , che oggi è sicuramente più diffuso. Poi sono arrivate le CSS media queries e image-set è stato completamente ignorato, perfino dallo stesso Responsive Images Community Group.

Nonostante il supporto sia in fase di sviluppo, non tutti i browser supportano pienamente image-set() . Mentre scriviamo questo articolo IE, Edge e Firefox non lo supportano affatto, mentre per tutti gli altri è necessario usare il prefisso -webkit  in questo modo

Per tutti gli altri casi, e per una maggiore compatibilità, è consigliato usare le CSS media queries.

Media queries e risoluzione

Se vogliamo quindi supportare le immagini con una risoluzione più alta per gli schermi che lo consentono, il modo che offre maggiore compatibilità è quello delle media queries con un parametro di densità:

La prima cosa da notare è che abbiamo di nuovo dovuto usare un attributo con il prefisso -webkit , necessario per la retrocompatibilità. Abbiamo poi indicato l’attributo min-resolution  con una risoluzione di 192dpi, soltanto gli schermi con questa densità maggiore o uguale a questa saranno coinvolti.

Come possiamo notare, questo sistema è più potente del precedente perché ci permette di gestire più facilmente le risoluzioni. Nell’esempio precedente di background:image-set() , infatti, abbiamo dovuto indicare la densità con “1x” o “2x”, che non ci dicono davvero nulla.