L’entrata sul mercato di dispositivi dalle diverse caratteristiche ha aperto un mondo a designer e sviluppatori: dove prima bastava “compatibilizzare” il sito web per differenti browser, ora bisogna tenere in considerazione anche altri fattori, quali: larghezza del monitor, densità di pixel e soprattutto il tipo di connessione.
Come ho spiegato in un mio precedente articolo infatti, creare un design responsive è diventata una buona pratica ma vi sono alcuni limiti: laddove ci sono aspetti che possono essere previsiti e controllati, alcuni altri come la tipologia di connessione utilizzata dagli utenti, non lo sono.
Questo, credetemi, può essere un problema. Mi riferisco in particolar modo alle immagini: possiamo infatti avere immagini molto grandi e di ottima risoluzione che per l’utente desktop (o con una veloce connessione flat) sono una delizia ma per gli utenti che non dispongono di una connessione all’altezza sono un calvario.
Cosa fareste se al quinto refresh di un sito la vostra quota di banda settimanale fosse già dimezzata? Chiaramente sto esagerando ma è uno scenario che non si distacca troppo dalla realtà.
Partiamo dal presupposto che chiunque naviga da uno smartphone o da un tablet al 90% delle volte non è raggiunto da una rete wifi. Ovviamente non è sempre così, soprattutto per chi usa un iPad solo wifi, ma considerati altri fattori, fra cui anche la risoluzione del monitor, mostrare immagini di qualità inferiore è un compromesso che possiamo accettare.
Le soluzioni
Recentemente stanno spuntando un sacco di metodi per l’implementazione delle immagini responsive e c’è addirittura chi propone un formato standard da implementare in HTML5 con una sintassi simile alla seguente:
<picture alt=""> <source src="/mobile.jpg" /> <source src="/large.jpg" media="min-width: 600px" /> <source src="/large_1.5x-res.jpg" media="min-width: 600px, min-device-pixel-ratio: 1.5" /> <img src="/mobile.jpg" /> </picture>
Tuttavia dobbiamo pensare a cosa possiamo fare oggi con gli strumenti di cui disponiamo perciò mi limiterò a prendere in considerazione gli unici due metodi che ritengo validi al momento.
Immagini responsive con Picturefill
Picturefil è una libreria javascript che consente di specificare quale immagine utilizzare in base all’attributo “data-media” associato agli elementi che contengono le immagini.
In pratica, quando si dovrà inserire un’immagine la sintassi sarà simile alla seguente:
<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<div data-src="small.jpg"></div>
<div data-src="medium.jpg" data-media="(min-width: 400px)"></div>
<div data-src="large.jpg" data-media="(min-width: 800px)"></div>
<div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript>
</div>
Un buon metodo ma, secondo me, con qualche grave pecca:
- l’utilizzo di markup non necessario;
- l’utilizzo di javascript.
Il primo potrebbe anche non essere un problema (per me lo è) mentre il secondo è già più complicato: il controllo client side non è mai sicuro al 100% ed inoltre verrebbe a meno se l’utente ha javascript disabilitato (possibile se naviga via cellulare).
Immagini responsive con WordPress
Ottime notizie per chi utilizza WordPress: è disponibile, infatti, un plugin che in accoppiata con la funzione standard di generazione delle immagini consente di implementare le immagini responsive molto facilmente.
Mobble (questo il nome del plugin) non fa altro che abilitare dei tag condizionali che verificano quale dispositivo l’utente sta utilizzando: con questi tag possiamo poi decidere quale immagine mostrare all’utente (thumb, medium, large o orginale) direttamente tramite PHP.
Ecco alcuni lati positivi di questo metodo:
- non obbliga ad utilizzare markup aggiuntivo;
- è possibile utilizzarlo non solo per le immagini ma anche per javascript o parti di template;
- non serve creare immagini diverse perché lo fa già WordPress;
- il controllo viene fatto lato server;
Le immagini responsive sono un dovere
Non dimentichiamoci che sviluppiamo e progettiamo per gli utenti e quindi dobbiamo tenere in considerazione queste variabili per non rendere un’inferno la loro navigazione.
Ottimizzare le immagini non è soltanto un accorgimento SEO ma anche un dovere nei confronti dei nostri utenti.
Siamo ancora in una fase sperimentale e finché non verrà implementato uno standard dobbiamo trovare un metodo valido per ovviare al problema. Se conosci o utilizzi altri metodi per fornire agli utenti immagini responsive faccelo sapere!
