| Dario Barbon - Genius@Work | 06-05-2019
In un recente lavoro di ottimizzazione di un sito web, mi sono imbattuto in una cattiva gestione delle immagini relativamente alla loro visualizzazione in quei schermi, introdotti dalla nota azienda di Cupertino, marchiati come di Retina Display.
In questo articolo voglio evidenziare come questa problematica emerga nell’analisi di un sito web e quali sono gli accorgimenti da adottare nella fase di realizzazione di un sito web. Ponendo particolare attenzione alla “reazione” del browser Chrome trovandosi nella condizione di non riuscire a caricare la risorsa necessaria.
Sommario:
1- Cos’è Retina Display e come funziona
2- Preferenze di sistema
3- Google Chrome…cosa succede?
4- I metodi per gestire da subito e al meglio le immagini
5- Conclusioni
Retina Display è un marchio e la sua introduzione ormai risale al 2010, con l’iPhone 4, ad oggi presente su diversi dispositivi della Mela.
Il concetto è di visualizzare i contenuti in maniera incredibilmente dettagliata sfruttando l’elevata densità di pixel, propria degli schermi Retina Display.
Il funzionamento è il medesimo per tutti i dispositivi, ma le caratteristiche della tecnologia sono adattate alla dimensione del pannello perché in funzione della sua dimensione, varia anche la distanza di utilizzo. Avremo quindi un numero maggiore di PPI (Pixel Per Pollice) per display di piccole dimensioni e un numero inferiore di PPI per display via via più grandi.
La realizzazione di un sito web parte con il piede giusto se tutti gli strumenti del web designer sono adeguatamente settati in modo da dare una visualizzazione fedele e veritiera dei contenuti e delle immagini che sono parte integrante del sito web.
Se si è in possesso di un Display Retina è utile sapere con che risoluzione sto lavorando e tenere in considerazione la presenza di eventuale monitor esterno.
Dal menu Apple, cliccando su ‘Preferenze di Sistema…’ e successivamente su ‘Monitor’ avremo:
Selezioniamo su ridimensionata la risoluzione che più si adatta al nostro sistema visivo e la stessa procedura la adotteremo in presenza di uno schermo secondario (anche non Display Retina):
Arriviamo quindi all’analisi di una pagina di un sito web in cui riscontriamo la problematica descritta nell’introduzione dell’articolo.
E parlando di immagini, eccone una abbastanza esplicativa:
Il menù del set DevTools sulla destra allerta il web developer sulla presenza di una certa quantità di errori, meglio descritti nella Console:
L’errore consiste in fallimento nel caricamento della risorsa specifica e cliccando su di essa il server risponde con un errore 404 in quanto non è riuscito a trovare quello che è stato richiesto.
L’ultima parte del nome dell’immagine prima dell’estensione ci precisa che la risorsa non trovata non è solo l’immagine citata, ma nello specifico la versione ‘@2x’. L’immagine cercata deve essere visualizzata su un Retina Display e la sua risoluzione è pari al doppio (in termini di larghezza e altezza in pixel) dell’immagine originale (@1x).
Questo errore non inficia il corretto funzionamento della pagina del sito web, non influisce negativamente sul protocollo HTTPS tanto caro a Google precludendone l’affidabilità, ma… un errore è pur sempre un errore e in questo lavoro, un errore trascurato adesso e così poco tangibile potrebbe trasformarsi in una problematica più complessa nel tempo.
Ce ne sono almeno 4:
a. Caricare sempre l’immagine @2x impostando la dimensione su @1x
b. Impostare l’attributo HTML5 ‘srcset’
c. Utilizzare il tag HTML5
Metodo A
Consiste nel caricare l’immagine con le caratteristiche @2x impostando gli attributi originali nel tag, non è consigliabile in quanto nei dispositivi mobili e non Retina Display caricheremo delle immagini ad alta definizione in dispositivi che non sono in grado di supportarla, a scapito di qualità e velocità di caricamento.
Metodo B
Sfrutta l’attributo ‘srcset’ tramite il quale è possibile impostare un URL per caricare una ulteriore risorsa all’interno del tag <img>. Tramite questo attributo possiamo caricare quindi l’immagine ad alta risoluzione corretta per il sito web richiesta dai Retina Display.
L’uso di un elenco consente inoltre nello sviluppo del sito web, di istruire il browser che ci sono altre dimensioni di immagine disponibili e che possono essere usate al posto dell’immagine predefinita. Usando il ‘w’ flag possiamo dire al browser che abbiamo la stessa immagine disponibile in diverse larghezze. La larghezza è simile all’utilizzo della proprietà CSS ‘max-width’. Combinata con l’attributo ‘size’ la scelta avviene in base alla dimensione della viewport.
Metodo C
Consente tramite il tag <picture> di inserire due diverse fonti, ‘source’, e l’approccio è molto simile ai tag <audio> e <video>. Gli attributi utilizzabili all’interno possono utilizzare delle query per utilizzare la giusta immagine a seconda della viewport oppure, una seconda modalità, in base alla densità di pixel (PPI) o, terzo, un’immagine di default tramite <img> (il tag <img> è sempre richiesto). Le fonti istruiscono il browser sulla tipologia di immagine adeguata per la corretta visualizzazione nel sito web relativamente al dispositivo usato.
Metodo D
Si affida a Javascript. Prendiamo in esame la libreria retina.js. L’approccio di questa libreria consiste nell’eseguire un loop di tutte le immagini del DOM e cercare nel server le immagini che abbiano l’etichetta ‘@2x’ aggiunta al nome.
Se l’immagine viene trovata sul server viene restituito un codice stato 200 e l’immagine default viene sostituita dall’immagine retina, con PPI doppio ma di dimensioni uguali.
Ovviamente se il browser non trova l’immagine adeguata nel server restituisce un codice errore di tutt’altro impatto, un 404.
Quindi per ovviare a questo errore in fase di produzione è bene seguire la semplice modalità di implementazione spiegata anche nel sito retinajs
Si tratta di creare due immagini:
‘nome-immegine.estensione’
e
‘nome-immagine@2x.estensione’
La seconda avrà il doppio della risoluzione e verrà automaticamente interpretata dal browser come l’immagine da utilizzare se siamo in presenza di un dispositivo Retina Display.
E’ inoltre possibile gestire anche le immagini in background caricate nel foglio di stile definendo una media query definita dalla sintassi:
‘@media (-webkit-min-device-pixel-ratio: 2) {}’
Basterà inserire le istruzioni per richiamare l’immagine adeguata e le dimensioni dell’originale e lo script interverrà in caso di Retina Display.
L’unica pecca nell’utilizzo di questa modalità è che in fase di caricamento del sito web verranno caricate sempre le immagini nella dimensione originale, solo in presenza di Retina Display verranno successivamente caricate le immagini sostitutive in alta risoluzione, parliamo di tempi di caricamento brevissimi, ma che posso creare una transizione sfocata in fase di caricamento.
Conclusioni
I metodi sopra descritti sono ottime modalità di intervento, ma come potete aver intuito non c’è nulla di completamente automatizzato.
E’ molto utile tenere in considerazione questi accorgimenti se vogliamo creare dei contenuti adeguati in alta definizione per i display marchiati Retina Display per avvalorare il sito web di una risoluzione adeguata all’alta definizione messa a disposizione da una vasta ormai quantità di prodotti.
Ti invitiamo a visitare la nostra pagina relativa ai siti web, sono sicuro troverai interessanti informazioni.
Massimo Fuser
Genius@Work
