Caricare immagini di sfondo in base alla dimensione del media in un layout web responsive

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. Sicuramente sono di 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: pensare prima al 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;
text-align:  left;	
}

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

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

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

Errato! La proprietà display:none consente in ogni caso il download dell'oggetto in questione, nonostante non venga visualizzato. 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 corretto

La soluzione è la seguente:

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

@media screen and (min-width:650px)
{
    header 
   {
     background:   url(images/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 Media Queries ci consente anche un altro approccio:

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

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

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

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

Conclusioni

Pensare un sito per il mobile e poi per altri tipi di media, non vuol dire "sminuire" o "impoverire" le pagine per smartphone. Sarebbe corretto, come descritto nell'articolo, ottimizzare tempi e risorse per chi si connette in mobilità. L'effetto è sicuramente bello ma quando possiamo apprezzarne le caratteristiche da monitor di pc. Da cellulare, credo ci interessino soprattutto contenuti e navigazione, messi bene in evidenza.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati