Corsi on-line

Lazy loading di immagini per il Responsive design

Potrebbe sembrare un paradosso, ma con il diffondersi delle connessioni in mobilità il peso medio delle pagine Web non è diminuito, anzi, la presenza di un numero sempre maggiore di elementi multimediali le avrebbe rese sempre meno leggere, complice una maggiore diffusione della Banda Larga. Dato che i collegamenti Wireless si appoggiano in genere ad un ADSL tale fenomeno risulta meno evidente in presenza del WiFi. Diverso il discorso per quanto riguarda le connessioni in 3G che, soprattutto nella Penisola, sono ancora la stragrande maggioranza.

responsive-design2

A ciò si aggiunga che non tutti gli utenti dispongono di smartphone o tablet con configurazioni hardware di fascia alta, motivo per il quale lo sviluppatore dovrebbe tenere conto delle esigenze legate ad una diseguale disponibilità di risorse. A tal proposito la tecnica del Lazy loading potrebbe rappresentare una buona soluzione ai fini dell’ottimizzazione; in pratica, grazie ad essa un elemento non viene caricato fino a quando un utente non da luogo ad una specifica interazione.

Il Lazy loading ha ragion d’essere anche nella progettazione improntata al Responsive design, cioè quando si prevede la fruizione di una risorsa su diverse tipologie di device dotati di display caratterizzati da diagonali con estensioni differenti; classicamente un’immagine viene richiamata in questo modo all’interno di una pagina Internet e verrà caricata come una qualsiasi altra componente di quest’ultima:

<img src="homer.png" alt="Homer Simpson">

Con il Lazy loading e il Responsive design, invece, potrebb essere necessario adottare una sintassi come la seguente:

<img data-src="homer.png" data-srcset="homer1.png 320w, homer2.png 640w, homer3.png 1280w" data-sizes="(min-width: 25em) 70vw, 95vw" alt="Homer Simpson">

Alla base di tutto vi è quindi l’impiego dell’attributo data- di HTML5 (ne riparleremo a breve) che permette di utilizzare degli attributi personalizzati sfruttando la medesima sintassi del markup. Nel caso specifico non ci si dovrà dimenticare di specificare le dimensioni delle immagini coinvolte (attributi src e srcset) questo perché anche se tali informazioni non influiscono sull’esito caricamento saranno comunque necessarie per ottenere un rendering ottimale.

Post correlati
I più letti del mese
Tematiche