Caricare immagini di background in base al media

Caricamento condizionale immagini di background in base al media
Caricamento condizionale immagini di background in base al media

Tra i tantissimi siti web responsive in circolazione, si stanno facendo spazio quelli con immagini di sfondo a tutta pagina, oppure inserite in un elemento HTML, solitamente la header. Nel presente articolo vedremo come fare per caricare in maniera condizionale le immagini di sfondo con le Mediaqueries.

Sicuramente creano un grande impatto. Però, per tornare un attimo alle immagini, si deve tenere conto del loro "peso" e delle "performance" del device. Un compromesso potrebbe essere quello di crearne tante quante sono le dimensioni del tipo di media. Se è ottimale non saprei, ma una soluzione potrebbe essere quella di visualizzare le immagini di background da una determinata dimensione in poi. Ed è quello di cui ci occuperemo nell'articolo in oggetto.

L'immagine utilizzata per l'esempio, ha dimensioni pari a 2612 X 1248 pixel. Il suo peso è di 80 KB circa. Non pesantissima, è vero. Potrebbe darsi anche di voler utilizzare immagini più pesanti per siti di produzione. La cosa sulla quale vorrei soffermarmi è il "concetto" di visualizzarla o meno a determinate dimensioni di schermo.

Anticipo che su cellulari non verrà visualizzata nessuna immagine, fino a 767 pixel. Vedremo solo colore di sfondo. Da 768 pixel in poi, apparirà il file grafico.

Mobile First: prima il mobile

Proviamo a pensare un attimo prima in "linguaggio umano", per poi "tradurre" lo stesso concetto attraverso i CSS: dobbiamo visualizzare un elemento soltanto ad una determinata dimensione del viewport. Al di sotto di questa "soglia" solo un colore di background. Il codice:

<header>
   Codice HTML
</header>

header {
width:100%;
height:600px;
}

Il codice CSS è quello "generale" per la header. Volendo applicare il concetto espresso più su, facendo ricorso alle Mediaqueries, dovremmo scrivere:

@media screen and (max-width:767px){
   header  {display:none;}
}

@media screen and (min-width:768px){
    header{
     background:url(bg-header.jpg) no-repeat center center;
   }
}

Sbagliato. La proprietà display:none consente in ogni caso il caricamento dell'immagine di sfondo, nonostante non venga visualizzata. E' un passaggio molto importante questo.

Un oggetto impostato su display:none e non visualizzato in una pagina web, viene richiamato sempre mediante la richiesta http. Dovremmo risolvere, quindi, in maniera tale che fino a 767 pixel non dobbiamo visualizzare nulla, se non un colore di sfondo. Oltre, invece, l'immagine. Il tutto, come anticipato, per migliorare i tempi di caricamento della pagina.

Il codice CSS

La soluzione è la seguente:

@media screen and (max-width:767px){
   header {     
      background:#151618;
 }
}

@media screen and (min-width:768px){
    header {
     background:url(bg-header.jpg) no-repeat center center;
   }
}

background:#151618, oppure background: none, sono molto simili. Siccome il colore di sfondo della pagina demo è bianco, ho voluto assegnare un colore in contrasto.

La seconda dichiarazione CSS è quella che assolve al suo compito e ci da' come risultato quello che vogliamo ottenere:

@media screen and (min-width:768px){
    header {
     background:url(images/bg-header.jpg) no-repeat center center;
   }
}

Viene indicato al browser che da 768 pixel in su deve caricare l'immagine. Non prima.

La potenza delle Mediaqueries ci consente anche un altro approccio:

Scrivere il codice CSS, a questo punto, diventa molto semplice:

@media screen and (max-width:767px){
   header {
     background:url(bg-header-mini.jpg) no-repeat center center;
   }
}

@media screen and (min-width:768px){
    header {
     background:url(bg-header.jpg) no-repeat center center;
   }
}

Chiariti questi concetti ed assimilate le differenze tra caricamento per un tipo di media rispetto ad un altro, ho preparato una pagina demo con il . Restringere o allargare la finestra del browser per vedere o il colore di background oppure l'immagine di sfondo della header.