La pagina demo che useremo come base è stata volutamente 'appesantita' soprattutto con immagini. Non è un caso. Abbiamo visto nel grafico presentato nell'introduzione come sia la tipologia di asset che più impatta sulle performance. Ci applicheremo, dunque, in questa sezione della guida all'ottimizzazione di questi elementi.
Immagini di sfondo nei CSS
Un dettaglio grafico emerge immediatamente visualizzando la home page de 'Il Viaggio' su tablet e desktop: un'ampia testata con un'immagine che si estende orizzontalmente per l'intera larghezza della viewport. La tecnica adottata per questa sezione è quella trattata nell'articolo Header con sfondo grafico a tutta pagina.
>> Leggi Header con sfondo grafico a tutta pagina
È un'immagine pesante (182kb) e molto estesa nelle dimensioni (1600x600px). L'impatto visivo è di sicuro effetto. Ma decidiamo di non visualizzarla su dispositivi che abbiano una larghezza della viewport inferiore ai 600px. È il range in cui rientrano, di fatto, gli smartphone. Vista la consistenza dell'immagine, si tratta di un bel guadagno in termini di performance.
Il problema
Il problema può essere così definito: come caricare un'immagine di sfondo solo quando la larghezza della viewport supera una certa soglia. Scendiamo nei dettagli tecnici della soluzione.
L'immagine con la ragazza sulla spiaggia è impostata come sfondo del div con id#testata:
<div id="testata">
[...]
</div>Quando si passa al CSS, si sarebbe tentati di usare una dichiarazione come display: none; per nascondere la testata sugli smartphone.
#testata
{
background: url(beach-2.jpg);
}
@media only screen and (max-width: 600px)
{
#testata
{
display: none;
}
}Nulla di più sbagliato. Quello che viene nascosto con display: none; viene comunque scaricato sulla gran parte dei browser. E il nostro problema non è solo e tanto quello di nascondere la testata, ma di non scaricare l'immagine di sfondo su una certa tipologia di device per migliorare i tempi di caricamento!
La soluzione
Nell'individuare la soluzione giusta, abbiamo tenuto conto degli approfonditi test svolti da Tim Kladec per verificare il comportamento dei vari browser nello scaricare gli asset serviti come sfondo nei CSS. Possiamo dunque agire in questo modo:
#testata
{
background: none;
}
@media only screen and (min-width: 600px)
{
#testata
{
background: url(beach-2.jpg);
}
}Inserendo la regola per lo sfondo in una media query con min-width: 600px, l'immagine sarà scaricata solo quando la larghezza della viewport è >= 600px. Escludiamo così gli smartphone.
Oppure possiamo inserire entrambe le regole in una media query:
@media only screen and (max-width: 599px)
{
#testata
{
background: none;
}
}
@media only screen and (min-width: 600px)
{
#testata
{
background: url(beach-2.jpg);
}
}Questo approccio è utile anche quando si voglia servire ai dispositivi mobili un'immagine più piccola e ottimizzata:
@media all and (max-width: 599px)
{
#testata
{
background-image:url('immagine-piccola.png');
}
}
@media all and (min-width: 600px)
{
#testata
{
background-image:url('immagine-grande.png');
}
}Le regole per lo sfondo vanno entrambe inserite in una media query. In quella con max-width inseriamo il riferimento all'immagine piccola (per smartphone, semplificando); in quella con min-width inseriamo il riferimento all'immagine grande, quella, poniamo, per tablet e desktop.
Per una disamina estensiva dei diversi scenari, consigliamo lo studio dei vari test proposti da Tim Kladec nell'articolo sopra citato.
Immagini ottimizzate per schermi ad alta densità
Un altro piccolo intervento per le immagini di sfondo è stato fatto su alcune delle icone che compaiono nell'interfaccia e sul logo:
In questo caso abbiamo utilizzato la tecnica vista nell'articolo CSS e immagini per gli schermi ad alta densità di pixel. Serviamo agli schermi come il Retina di Apple icone più definite e ottimizzate:
#logo
{
background: url(logo.png) no-repeat;
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi)
{
#logo {background: url('logo-2x.png');
background-size: 267px 70px;}
}
#toggle-navigazione
{
background: #0f9d4a url(nav-ico.png) no-repeat 5px center;
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi)
{
#toggle-navigazione
{
background-image: url(nav-ico-2x.png);
background-size: 18px 15px;
}
}
#social-widget #twitter
{
background-image: url(twitter.png);
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi)
{
#social-widget #twitter
{
background-image: url(twitter-2x.png);
background-size: 22px 22px;
}
}