Se per le immagini inserite direttamente nella pagina (tag img) non esiste ancora una soluzione standard che ci consenta di servire immagini diverse in relazione al dispositivo su cui la pagina web verrà effettivamente visualizzata, il discorso cambia invece per le immagini di sfondo.

In questo caso infatti essendo l’immagine di sfondo gestibile con la proprietà CSS “background-image”, il problema può essere facilmente superato utilizzando le solite media-query.

Scendiamo nei dettagli tecnici della soluzione e supponiamo di dover gestire un immagine di sfondo (sfondo1920.jpg) su di un blocco di contenuti che in un tradizionale monitor pc può arrivare a raggiungere una larghezza massima di 1920px.

<div id="contenitore">

[...]

</div>

Detto che, come al solito, il nostro contenitore di contenuti dovrà avere una larghezza in percentuale e che l’immagine che andremo ad inserire come sfondo dovrà avere una larghezza non inferiore ai 1920px (per essere sicuri di non ottenere situazioni in cui l’immagine stessa possa risultare sgranata), va anche considerato che in dispositivi di piccole dimensioni per cui l’area di visualizzazione del documento non supera in larghezza i 600px, il fatto di utilizzare un’immagine grande più del doppio non è sicuramente la soluzione migliore.

Anche se perfettamente scalata questa rimarrebbe pur sempre un’immagine di 1920px con il relativo peso ed i relativi tempi di download e di caricamento della pagina.

La soluzione ottimale in queste condizioni sarebbe quindi quella di fornire per schermi con un viewport non superiore ai 600px un’immagine diversa o, al limite, anche la stessa immagine, ma opportunamente ridimensionata a monte, in maniera tale che non superi effettivamente i 600 px del dispositivo (sfondo600.jpg).

Per ottenere questo risultato è sufficiente utilizzare il seguente codice CSS

#contenitore{

background-image: url("sfondo600.jpg");

}

@media only screen and (min-width: 600px)

{

# contenitore

{

background-image: url("sfondo1920.jpg");

}

}

La prima delle due regole CSS imposta, in perfetto accordo con l’approccio mobile first, come immagine di sfondo di default per il nostro contenitore l’immagine piccola (sfondo600.jpg).

La media-query viene invece applicata solo per i dispositivi in cui l’area di visualizzazione del documento è superiore ai 600px e in queste condizioni sovrascrive la precedente regola permettendoci di fornire l’immagine grande (sfondo1920.jpg).

Così facendo riusciamo quindi a fornire ad ogni dispositivo un immagine adeguata ottimizzando anche il consumo di banda e le prestazioni di pagina

Se poi dovessimo decidere, addirittura, di non voler utilizzare proprio l’immagine di sfondo nei dispositivi di piccole dimensioni, dando quindi priorità alle prestazioni della pagina, dovremo modificare la nostro media query come segue

#contenitore{

background: none;

}

@media only screen and (min-width: 600px)

{

# contenitore

{

background-image: url("sfondo.jpg");

}

}

In realtà potremmo anche essere tentati dal fatto di utilizzare una dichiarazione come display:none per nascondere l’intero blocco di contenuti su schermi di piccole dimensioni.

Pur raggiungendo il nostro scopo questa non sarebbe però la soluzione ottimale in quanto il nostro problema non è tanto quello di nascondere l’intero blocco di contenuti e con esso anche l’immagine di sfondo, ma solo quest’ultima.

Inoltre è sempre bene considerare anche che il display:none impostato per un contenuto, pur consentendoci di nascondere quel contenuto, non evita che questo venga comunque scaricato dal browser lasciando quindi aperto il problema relativo all’ottimizzazione delle prestazioni.