Durante l’ultimazione del revamp del mio sito, sottoponendolo ad alcuni test per individuare problemi o intoppi nel caricamento, ho escogitato una soluzione abbastanza rapida e indolore per fornire un’anteprima delle immagini durante il loro caricamento.
I browser hanno strumenti di debug e tra gli aggeggi nella scatola degli attrezzi ce ne è uno che permette di simulare la velocità di caricamento in varie situazioni, come per esempio: connessione lenta, connessione 3G, 3G lento, 3G veloce, 4G e via dicendo. Funzionalità nota con il nome di throttling. Simulando una connessione internet lenta si vedono le immagine caricarsi un po’ per volta, lasciando degli orridi spazi vuoti.
Mostrare un fallback visivo durante il caricamento delle immagini può essere utile e necessario. Questo perché lasciare vuoti nella pagina o parti non completamente definite non è bello da vedere e l’esperienza utente viene inevitabilmente compromessa.
Esistono diversi modi per fornire il fallback visivo durante il caricamento delle immagini, uno dei metodi attualmente più in voga è la rappresentazione di un contenuto segnaposto che verrà sostituito una volta caricate le risorse necessarie alla renderizzazione ultima. Viene mostrato uno sketch, ovvero una rappresentazione fittizia di ciò che verrà infine visualizzato ed è il metodo utilizzato dai social network più noti. Nel caso specifico può non riguardare solamente il caricamento delle immagini, ma l’intero blocco: immagine, testo e altre componenti, il tutto mediante scripting.
Il metodo che ho adoperato, che è anche il più semplice, consiste nel dare un tocco di colore al caricamento delle immagini. L’applicazione di un colore di sfondo all’elemento contenitore dell’immagine o all’immagine stessa. Si può utilizzare il colore di sfondo dell’immagine, così da far pensare a una continuità, si può utilizzare una media dei colori dell’intera immagine e dare un’idea di ciò che verrà a breve mostrato, oppure utilizzare un singolo colore fittizio o inserire una immagine fittizia da mostrare sotto all’immagine, che verrà poi visualizzata a schermo.
Queste sono alcune delle possibilità. Nel mio caso la soluzione più ragionevole, avendo a che fare con una struttura di pagina tradizionale e script non intrusivi. E per agevolarmi con rapidità nell’assegnazione di un particolare colore per ciascuna immagine, ho deciso di utilizzare i metadata delle stesse e associare automaticamente il colore quando vengono poi caricate fisicamente sul server. Le immagini hanno dei loro metadata, sono dati di complemento, possono contenere informazioni sul come è stata realizzata l’immagine, quando, persino in che tempo si è aperto l’otturatore, nel caso delle fotografie, il tempo di esposizione, ecc… . Questi dati possono essere compilati con i programmi di grafica, come per esempio Photoshop, nel mio caso con la suite di Serif Affinity, ma esistono anche delle utility apposite utilizzabili con GUI o da riga di comando. Gli standard più noti sono EXIF e IPTC, oltre ai dati più comuni si possono inserire anche delle altre informazioni, io ho sfruttato il campo IPTC “Instructions” inserendo questo dato: backgroundColorDominance: color, dove color sta per il colore in notazione esadecimale di 3 o 6 caratteri. È stato sufficiente agganciare una funzione all’hook filtro di WordPress dell’upload per i metadata delle immagini e aggiungere il campo IPTC “Instructions”. Per non alterare la struttura dati pre-esistente, ho scelto di inserire il campo IPTC, ma di sfruttare i post metadata per il recupero dell’informazione, quindi senza passare direttamente per i metadata dell’immagine, come accade per esempio con il testo alternativo delle immagini. Questo significava dover aggiungere più filtri, perché WordPress ha diverse API sotto al cofano: la Media API, la REST API e upload legacy. Per aggirare il problema e utilizzare un singolo hook, ho agganciato al filtro “wp_generate_attachment_metadata”, che pur essendo un filter e non una action, è servito allo scopo. In questo gist tutto il dettaglio dell’implementazione in WordPress.
Esistono poi degli altri metodi, uno dei quali riguarda direttamente la fruizione delle immagini e la loro struttura. Tutti i formati di immagine più comuni hanno la possibilità di essere compressi in modalità progressiva. Questa modalità offre una visione immediata delle immagini che vengono mostrate pixellate e aumentano di definizione progressivamente durante il caricamento, fino a diventare completamente definite a caricamento ultimato. È una modalità che esiste da molto tempo, ancora purtroppo lacunosa se messa a confronto con la normale compressione standard, presenta differenze sostanziali di qualità e definizione, e inoltre con questa modalità non è possibile avere informazioni dirette sul caricamento d’immagine con JavaScript.
Un altro metodo ancora, leggermente più dispendioso di risorse, è ottenuto utilizzando delle immagini di bassa qualità e risoluzione, permutandole poi con le immagini che verranno caricate, immagini a più alta qualità e definizione standard. Tale “LQIP” Low Quality Image Placeholder, metodo di cui ho trattato in questo vecchio gist, sempre riguardante WordPress: https://gist.github.com/ctlcltd/1fd7a58722c4e4351073 (Link alla pagina del gist su GitHub Gist).
Abbiamo visto come ottenere un caricamento progressivo delle immagini, mostrando una pseudo-anteprima dell’immagine, senza lasciare un vuoto durante il suo caricamento. Interventi estetici volti a migliorare la User Experience, esperienza utente, che fanno una certa differenza, abbelliscono la renderizzazione progressiva della pagina e rendono meno noiosi i tempi di caricamento.
Puoi commentare questo post sulla pagina Facebook @loltgt e condividerlo.