Molti siti richiedono risorse pesanti, come immagini, non ottimizzate per determinate schermate e inviano file CSS di grandi dimensioni contenenti stili che alcuni dispositivi non useranno mai. L'utilizzo delle query sui media è una tecnica molto utilizzata per pubblicare fogli di stile e asset personalizzati su schermi diversi al fine di ridurre la quantità di dati trasferiti agli utenti e migliorare il rendimento del caricamento della pagina. Questa guida mostra come utilizzare le query sui media per inviare immagini di dimensioni adeguate, una tecnica nota come immagini adattabili.
Prerequisiti
Questa guida presuppone che tu abbia dimestichezza con Chrome DevTools. Se preferisci, puoi utilizzare gli strumenti di sviluppo di un altro browser. Dovrai solo mappare gli screenshot di Chrome DevTools in questa guida alle funzionalità pertinenti nel browser che preferisci.
Informazioni sulle immagini di sfondo adattabili
Innanzitutto, analizza il traffico di rete della demo non ottimizzata:
- Apri la demo non ottimizzata in una nuova scheda di Chrome.
- Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Rete.
- Ricarica la pagina.
Vedrai che l'unica immagine richiesta è background-desktop.jpg, che ha una dimensione di 1006 KB:
Modifica le dimensioni della finestra del browser e noterai che il Log di rete non mostra nuove richieste effettuate dalla pagina. Ciò significa che viene utilizzato lo stesso sfondo dell'immagine per tutte le dimensioni dello schermo.
Puoi vedere gli stili che controllano l'immagine di sfondo in style.css:
body {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat; background-size: cover;
background-image: url(images/background-desktop.jpg);
}
Di seguito è riportato il significato di ciascuna delle proprietà utilizzate:
background-position: center center: centra l'immagine verticalmente e orizzontalmente.background-repeat: no-repeat: mostra l'immagine una sola volta.background-attachment: fixed: evita di far scorrere l'immagine di sfondo.background-size: cover: ridimensiona l'immagine in modo che copra l'intero contenitore.background-image: url(images/background-desktop.jpg): l'URL dell'immagine.
Se combinati, questi stili indicano al browser di adattare l'immagine di sfondo a diverse altezze e larghezze dello schermo. Questo è il primo passaggio per ottenere uno sfondo adattabile.
L'utilizzo di una singola immagine di sfondo per tutte le dimensioni dello schermo presenta alcune limitazioni:
- Viene inviata la stessa quantità di byte, indipendentemente dalle dimensioni dello schermo, anche se, per alcuni dispositivi, come gli smartphone, uno sfondo dell'immagine più piccolo e leggero sarebbe altrettanto efficace. In generale, ti consigliamo di inviare l'immagine più piccola possibile che abbia comunque una buona resa sullo schermo dell'utente per migliorare il rendimento e risparmiare sui dati utente.
- Sui dispositivi più piccoli l'immagine verrà allungata o tagliata per coprire l'intero schermo, nascondendo potenzialmente agli utenti parti pertinenti dello sfondo.
Nella sezione successiva imparerai ad applicare un'ottimizzazione per caricare diverse immagini di sfondo, in base al dispositivo dell'utente.
Utilizzare le query sui contenuti multimediali
L'utilizzo delle query sui media è una tecnica comune per dichiarare gli stili di fogli che verranno applicati solo a determinati tipi di media o dispositivi. Vengono implementati utilizzando le regole@media, che consentono di definire un insieme di breakpoint in cui sono definiti stili specifici.
Quando le condizioni definite dalla regola @media sono soddisfatte (ad esempio una determinata larghezza dello schermo), viene applicato il gruppo di stili definito all'interno del breakpoint.
I seguenti passaggi possono essere utilizzati per applicare le query sui media al sito in modo da utilizzare immagini diverse, a seconda della larghezza massima del dispositivo che richiede la pagina.
- In
style.cssrimuovi la riga contenente l'URL dell'immagine di sfondo:
body {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat; background-size: cover;
background-image: url(images/background-desktop.jpg);
}
- A questo punto, crea un punto di interruzione per ogni larghezza dello schermo, in base alle dimensioni comuni in pixel che di solito hanno gli schermi di dispositivi mobili, tablet e computer:
Per i dispositivi mobili:
@media (max-width: 480px) {
body {
background-image: url(images/background-mobile.jpg);
}
}
Per i tablet:
@media (min-width: 481px) and (max-width: 1024px) {
body {
background-image: url(images/background-tablet.jpg);
}
}
Per i computer:
@media (min-width: 1025px) {
body {
background-image: url(images/background-desktop.jpg);
}
}
Apri la versione ottimizzata di style.css nel browser per vedere le modifiche apportate.
Misurare per dispositivi diversi
Visualizza poi il sito risultante in schermi di dimensioni diverse e su dispositivi mobili simulati:
- Apri il sito ottimizzato in una nuova scheda di Chrome.
- Rendi l'area visibile stretta (meno di
480px). - Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Rete.
- Ricarica la pagina.
Tieni presente come è stata richiesta l'immagine
background-mobile.jpg. - Amplia l'area visibile. Una volta che è più largo di
480px, nota come viene richiestobackground-tablet.jpg. Una volta che è più largo di1025px, nota come viene richiestobackground-desktop.jpg.
Quando la larghezza dello schermo del browser viene modificata, vengono richieste nuove immagini.
In particolare, quando la larghezza è inferiore al valore definito nel breakpoint mobile (480 pixel), viene visualizzato il seguente log di rete:
Le dimensioni del nuovo sfondo mobile sono inferiori del 67% rispetto a quelle del desktop.
Effetti su Largest Contentful Paint (LCP)
Gli elementi con immagini di sfondo CSS sono considerati candidati per il Largest Contentful Paint (LCP), tuttavia le immagini di sfondo CSS non sono rilevabili dallo scanner di precaricamento del browser, il che significa che potresti ritardare il LCP del tuo sito se non fai attenzione.
La prima opzione da considerare è se l'immagine candidata LCP può funzionare in un elemento <img> con gli attributi srcset e sizes per l'adattabilità. Lo scanner di precaricamento del browser rileverà gli elementi <img> e invierà richieste per questi elementi mentre il parser è bloccato durante il rendering.
Se non puoi (o non vuoi) evitare di utilizzare un'immagine di sfondo CSS, la seconda opzione è precaricare le immagini responsive per assicurarti di caricare in anteprima l'immagine giusta per le dimensioni dell'area visibile appropriate. Gli attributi degli elementi <link> media, imagesrcset e imagesizes indicano al browser che un determinato suggerimento per le risorse si applica solo in determinate condizioni dell'area visibile, evitando così più precaricamenti inutili quando vuoi caricare una sola risorsa adatta all'area visibile corrente.
Riepilogo
In questa guida hai imparato ad applicare le query sui media per richiedere immagini di sfondo personalizzate per dimensioni dello schermo specifiche e risparmiare byte quando accedi al sito su dispositivi più piccoli, come i cellulari.
Hai utilizzato la regola @media per implementare uno sfondo adattabile. Questa tecnica è ampiamente supportata da tutti i browser.
Una nuova funzionalità CSS: image-set(), può essere utilizzata per lo stesso scopo con meno righe di codice. Al momento della stesura di questo articolo, questa funzionalità non è supportata in tutti i browser, ma ti consigliamo di tenere d'occhio l'evoluzione dell'adozione, in quanto può rappresentare un'alternativa interessante a questa tecnica.