La gestione delle immagini responsive è un argomento ancora dibattuto nel mondo del web design perché non ha ancora trovato una soluzione definitiva ed ufficiale che tenga conto di variabili importanti come l’hardware utilizzato e la velocità di connessione. Queste variabili complicano notevolmente le cose come è ben spiegato in questo articolo scritto sempre da Webhouse qualche tempo fa.
In attesa di una soluzione definitiva vediamo quali soluzioni e tecniche esistono come valide alternative per poter gestire le immagini responsive, analizzando il loro funzionamento, gli svantaggi e i vantaggi che comportano.
Quando mi sono avvicinata al Responsive Web Design, pensavo che la regola “display:none” fosse un’ottimo metodo per risolvere il problema della performance di un sito web in ottica immagini; invece l’immagine seppur non visualizzata dal browser viene comunque caricata sul server. Infatti i browser, per garantire un tempo di caricamento il più veloce possibile, caricano tutte le immagini prima che il foglio css o uno script identifichi le immagini stesse; di conseguenza questo penalizza i dispositivi mobili che sfruttano un’immagine con un peso molto superiore rispetto a quello di cui necessitano.
La percentuale elevata degli utenti che utilizza la connessione dei dispositivi mobili (3G – 3GS) fa capire come sia importante affrontare al meglio il problema delle immagini per non deludere le aspettative di questi utenti. Analizziamo quindi 4 delle soluzioni esistenti che ritengo più interessanti e che secondo me non richiedono eccessiva conoscenza del codice per poter essere applicate. Per avere un idea di tutte le soluzioni esistenti e proposte dagli sviluppatori sulle immagini responsive vi consiglio di dare un’occhiata alla lista “Responsive Image Chart” pubblicta da Css- Tricks in “Which Responsive image solution should you use?“.
#1 – ADAPTIVE IMAGE
Adaptive-image è una soluzione creata da Matt Wilcox che richiede un web server Apache 2, la presenza di PHP 5.x e delle librerie GD.
FUNZIONAMENTO
Dopo aver scaricato l’ultima versione dal sito ufficiale di Adaptive Image, dobbiamo effettuare alcune operazioni:
Lato server:
- Verifichiamo se nella directory root del nostro sito c’è il file “.htaccess” che dobbiamo sostituire con quello scaricato nel pacchetto di adaptive images;
- Copiamo il file adaptive-image.php nella directory della root del sito;
- Creiamo una cartella con il nome di ‘ai-cache’ che deve avere permessi di lettura e scrittura ( CHMOD 777 )
Nella pagina html del sito:
- Aggiungiamo la seguente stringa di codice di Javascritp nel tag <head> della pagina prima di ogni altro codice javascript:
<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; expires=; path=/';</script>
che crea un cookie che contiene la dimensione dello schermo e grazie alla regola presente nel file “adaptive-image.php” viene reindirizzata al server l’immagine giusta; se esiste un’immagine conservata nella cache, ci viene servita quella, altrimenti in base alle dimensioni dello schermo, lo script provvede a generare una versione ridimensionata;
- Modifichiamo la stringa di codice presente nel file “adaptive-image.php”:
$resolutions = array(1382, 992, 768, 480)
che rappresenta l’elenco dei break-points che devono coincidere con quelli che abbiamo inserito nel foglio di stile e per la quale vogliamo modificare le nostre immagini;
VANTAGGI
Questa soluzione è ottimale nel momento in cui abbiamo già realizzato il sito web e non vogliamo ristrutturare tutto il codice. Inoltre di default la configurazione del programma intercetta tutte le immagini del sito per adattarle alle varie risoluzione. Se non vogliamo che ciò avvenga possiamo selezionare una determinata cartella con questa stringa di codice nel file .htaccess:
RewriteCond % {REQUEST URI} !nome_cartella
Il principale vantaggio di Adaptive Images è che lavora con una sola immagine, quella originaria e non necessita di codice aggiuntivo.
SVANTAGGI
L’unico svantaggio è che questa soluzione non permette l’art direcion dell’immagine cioè la possibilità effettuare quelle operazioni di ritaglio e modifica che permettono di targhetizzarla ad un particolare display poiché il tutto è fatto dinamicamente facendo perdere di efficacia l’immagine.
ESEMPIO
Nel nostro esempio l’immagine del tramonto ha una dimensione originaria di 1500x997px che pesa 299kb e che diventerà un’ immagine di 640X425px con un peso di 68k per i tablet e una immagine di 375x250px con un peso di 17kb per i dispositivi mobili.
#2 – SENCHA.IO SRC
REQUISITI
Servizio creato da James Pearce che restituisce l’immagine in misura ridimensionata rispetto alla risoluzione del dispositivo che la visualizza.
FUNZIONAMENTO
Grazie a Sencha.io Src l’immagine viene dinamicamente proporzionata e restituita in base alla risoluzione dello schermo del dispositivo mobile che la visualizza. Funziona come un server che usa la “user agent string” del dispositivo che effettua la richiesta per capire quali sono le sue dimensioni ridimensionando l’immagine al 100% della larghezza dello schermo. Per far ciò è necessario anteporre alla fonte dell’immagine l’indirizzo Sencha.io src.
ESEMPIO:
<img src="http://src.sencha.io/http://miosito.it/img/immagine.jpg" alt="immagine grande">
Se non aggiungiamo altro il server Sencha restringerà l’immagine per adattarla allo schermo del dispositivo che visualizza il nostro sito web. Se si tratta di un Iphone 3GS che visualizza il sito, l’immagine sarà ristretta alla risoluzione di 320px x 480px. Se invece vogliamo impostare noi una larghezza specifica per esempio di 320x200px allora dobbiamo aggiungerla in questo modo:
<img src="http://src.sencha.io/320/200/http://miosito.it/img/immagine.jpg" alt="immagine grande" width="320px" height:"200px">
Sencha salvaguarda la proporzione dell’immagine per cui possiamo anche solo lasciare la larghezza e automaticamente la ridimensionerà in altezza in maniera proporzionale.
img src="http://src.sencha.io/320/http://miosito.it/img/immagine.jpg" alt="immagine grande" width="320px" height:"200px";
VANTAGGI
Utilizza sempre la stessa immagine poiché il servizio, memorizza nella cache le richieste e non ci sarà bisogno di generare nuovamente l’immagine ogni volta che la pagina verrà ricaricata; inoltre non necessita di nessun codice javascript.
SVANTAGGI
Funziona solo per piccole immagini cioè Sencha è un servizio che ridimensiona l’immagine per cui dobbiamo assicurarci che l’immagine originale sia larga abbastanza per poter realizzare il nostro obiettivo in particolare se parliamo di immagini ad alta risoluzione. Un altro svantaggio è la impossibilità di compiere operazioni di art direction e quindi di ritagliare l’immagine, aspetto importante che ogni soluzione dovrebbe implementare. Poiché Sencha.io privilegia gli schermi di piccole dimensioni per i dispositivi più grandi ha sviluppato un servizi lato-client che permette di gestire le dimensioni dell’immagine. Inseriamo nella pagina HTML questo snippet al principio della pagina per far si che i cookies svolgano la loro funzione prima che l’immagine sia caricata all’interno della pagina:
<script src='http://src.sencha.io/screen.js'></script>
Dopodiché per far si che l’immagine sia restituita in base alla dimensione della larghezza dello schermo ( screen.width ) inseriamo il seguente codice:
<img src='http://src.sencha.io/screen.width/http://miosito.it/files/immagine.jpg' alt='My JS-measured image' />
È possibile poi fare altre operazioni come settare l’orientamento del dispositivo, alterare le dimensioni, stabilire una dimensione in percentuale ecc.
QUANDO USARLO
Se hai molta confidenza con Javascript e ritieni che la User Agent String possa essere uno strumento fondamentale per gestire le immagini responsive; in linea generale è meglio non utilizzare una soluzione javascript per dispositivi mobili.
#3 – HISRC
REQUISITI
Plugin jquery realizzato da Marc Grabanski e Christopher Schmitt che ha lo scopo di favorire i dispositivi mobili, caricando prima una versione mobile friendly dell’immagine e poi grazie ad uno script particolare controlla la velocità di connessione e le capacità del browsers per verificare se un’immagine più appropriata può essere caricata. È necessario specificare 3 versioni dell’immagine nel codice html: quella della versione mobile, una versione più grande ed una ad alta risoluzione per quei dispositivi che hanno una elevata densità di pixels.
FUNZIONAMENTO
Dopo aver scaricato il pacchetto del plugin effettuano le seguenti operazioni:
- inseriamo nella pagina html il seguente codice:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> <script src="hisrc.js"></script>
- aggiungiamo regolarmente un’immagine con la fonte a bassa risoluzione della versione dell’immagine;
<img src="immagini/200x100.png" data-1x="immagini/400x200.png" data-2x="immagini/800x400.png" />
con la classe all’immagine con il suffisso .hisrc ed aggiungiamo un markup speciale al tag dell’immagine come gli attributi data-1x e data-2x da puntare rispettivamente all’immagine con media e con alta risoluzione;
Cosa succede? il browser in primo luogo carica l’immagine più piccola che corrisponde alla versione mobile first; in seguito lo script fa un controllo:
- se l’utente utilizza la larghezza di banda del cellulare (3G) lascia l’immagine “mobile first” al suo posto;
- se invece la connessione è elevata ma non supporta le immagini retina lancia la versione corrispondente a data-1x;
- se la connessione è ad alta velocità e il browser supporta le immagini retina, carica la foto corrispondente alla versione data-2x;
L’attributo data-1x si riferisce all’immagine più grande e data-2x invece all’immagine ad alta risoluzione. Infine dobbiamo comunicare alla libreria HiSrc quale elementi deve gestire tramite i selettori Jquery come sotto:
$(document).ready(function(){
$('img').hisrc();
}
Per migliorare la performance del sito web è possibile effettuare anche un test di connessione prima che il DOM sia pronto con questa riga di codice:
$.hisrc.speedTest();
VANTAGGI
Con questo plugin possiamo modificare sia immagini aggiunte dinamicamente che immagini multiple così da poter specificare differenti misure e ritagli ( art direction ) cosa che invece non è possibile con le altre soluzioni dette prima.
SVANTAGGI
Qualunque sia la versione dell’immagine più appropriata per il dispositivo viene sempre lanciata e cariata la versione originale che corrisponde a quella dei dispositivi mobili ( mobile first) ; avviene così sempre un doppio caricamento dell’immagine e vengono penalizzati i dispositivi che utilizzano una connessione veloce. Inoltre richiede jquery per cui è obbligatoriamente necessario usare la libreria e un codice in html per cui non è buona scelta se stiamo realizzando un sito web che richiede l’utilizzo di molte immagini o utilizza un CMS poiché l’output dell’immagine potrebbe risultarne alterato.
QUANDO UTILIZZARLO
Quando stiamo realizzando un sito web di piccole dimensioni che non richiede un uso massiccio di immagini.
#4 – Picturefill
È un approccio responsive creato dopo l’introduzione dell’elemento <picture> che usa il tag <span> per motivi di sicurezza. Realizzato da Scott Jehl nel 2012, questo polyfill lavora molto bene con i browsers che supportano le media queries Css3. L’elemento <picture> era stato proposto dal W3C per utilizzare immagini flessibili e responsive; l’autore ha anticipato i tempi offrendo questa soluzione che utilizza Javascript che sfrutta l’elemento picture. Paradossalmente l’elemento <picture> non verrà più implementato perché i proprietari dei browsers hanno rifiutato la possibilità di dover sviluppare un nuovo elemento che avrebbe dovuto svolgere le stesse funzioni del tag <img>.
FUNZIONAMENTO
- prepariamo le diverse versioni di una stessa immagine, per i dispositivi mobili e per gli schermi più grandi;
- inseriamo la libreria polyfill chiamata matchMedia.js;
- colleghiamo lo script al documento il cui blocco di codice verrà chiuso in un div con l’attributo data-picture, un attributo data-alt per il testo alternativo all’immagine;
- inseriamo all’interno del tag span principale, le immagini con attributo data-src con il relativo url assoluto o relativo dell’immagine da caricare;
<span data-picture data-alt="Un tramonto incredibile, Falerna 2011"> <span data-src="immagini/small.jpg"></span> <span data-src="immagini/medium.jpg" data-media="(min-width: 600px)"></span> <span data-src="immagini/large.jpg" data-media="(min-width: 120px)"></span> <span data-src="immagini/extralarge.jpg" data-media="(min-width: 1500px)"></span> <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> <noscript><img src="immagini/small.jpg" alt="Un tramonto incredibile, Falerna 2011"></noscript>
Nel caso in cui Javascript non fosse disponibile viene comunque caricata l’immagine grazie alla possibilità di racchiudere il vecchio tag img con l’url dell’immagine nel tag <noscript>
VANTAGGI
Uno dei vantaggi maggiori è la possibilità di effettuare operazioni di art direction dell’immagine, assicurando un maggior controllo su di essa. Inoltre questo servizio utilizza una libreria polifyll che sfruttando le media queries css3 offre una certa fluidità dell’immagine nel momento in cui restringiamo il browser così come anche ai video.
SVANTAGGI
Utilizza un codice eccessivo
QUANDO UTILIZZARLO
Va bene per qualsiasi soluzione; esiste anche un plugin wordpress che è possibile utilizzare e sfruttare automaticamente per trasformare le immagini in flessibili e responsive.
Ogni soluzione presta particolare attenzione ad un aspetto del web design e la nostra scelta dipende proprio dal tipo di progetto che dobbiamo realizzare. Per capire quale di queste soluzioni è la più adatta per il nostro progetto è importante farsi delle domande e capire qual è l’aspetto a cui vogliamo dare maggior importanza. Secondo il mio personale consiglio, avendoli provati un po’ tutti Adaptive Image è quello che è più semplice da utilizzare con ottimi risultati; mentre per l’aspetto estetico consiglio di provare Picturefill.
Qual è la vostra opinione in merito? Avete affrontato il problema delle immagini responsive in termini di performance del vostro sito web? Conoscete altre soluzioni altrettanto importanti? Ditelo nei commenti.
