Caricamento condizionale immagini di background
Caricamento condizionale immagini di background
Extrowebsite

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 649 pixel. Vedremo solo colore di sfondo. Da 650 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:649px){
   header    { display:   none;  }
}

@media screen and (min-width:650px){
    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 649 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:649px){
   header {     
background:   #151618;
 }
}

@media screen and (min-width:650px){
    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 è 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:650px){
    header {
     background:   url(images/bg-header.jpg) no-repeat center center;
   }
}

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

La potenza delle Mediaqueries ci consente anche un altro approccio:

  • Se il sito viene richiamato da smartphone, possiamo servire la header con una immagine appositamente ottimizzata (non molto peante) per determinati tipi di device.
  • Se il sito viene richiamato da un tablet, notebook ecc... possiamo servire la header con immagine più grande.

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

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

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

Dopo tutto questa descrizione, possiamo vedere la . Restringere o allargare la finestra del browser per vedere o il colore di sfondo oppure l'immagine in azione.