devdev / in the loop

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:

background-image: image-set( url("mare.png") 1x, url("mare-2x.png") 2x);

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

background-image: -webkit-image-set( url("mare.png") 1x, url("mare-2x.png") 2x);

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à:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Roba ad alta 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.

 

 

Questo articolo ti è stato utile?
UX – LETTURA 6 MINUTI Preparare le immagini per Lazyload JS in WordPress
<script> window.lazyLoadOptions = { /* your lazyload options */ }; </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.2.0/lazyload.min.js"></script> In un precedente articolo, abbiamo visto come…
Javascript – LETTURA 5 MINUTI Lazyload JS: caricamento immagini progressivo on scroll
Lazyload JS (chiamato anche vanilla-lazyload) è uno script che permette il caricamento delle immagini allo scroll della pagina (effetto detto…
Server – LETTURA 5 MINUTI Aggiungere la compressione gzip ai file SVG su nginx
I file SVG sono un modo eccezionale per avere delle immagini vettoriali senza alcuna perdita di qualità. A differenza di…
Server – LETTURA 7 MINUTI Usare la compressione gzip in Apache e nginx per aumentare la velocità
La velocità di caricamento sembra essere sempre più il centro focale del web. Come vi abbiamo già raccontato, costruire un…
Roba figa da
if (weekend) {
    relax();
}
la nostra newsletter, ogni tanto.