Immagini responsive: come ottimizzare in base al dispositivo

Immagini Responsive
Tempo stimato di lettura: 3 minuti, 0 secondi
Pubblicato il 27 giugno 2012

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:

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:

 

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!

  • Buon articolo ma come la mettiamo con un sito che utilizza joomla? 🙂

    • Ciao Fabio, per un sito con Joomla adotterei la prima delle due soluzioni (Picturefill). Chiaramente la situazione va analizzata bene perché Picturefill è una soluzione piuttosto onerosa da mantenere.

  • Buon Articolo Fra, io sono ottimista per quanto riguarda il tag picture, mi sembra la soluzione migliore, anche se a mio avviso dovevano essere lungimiranti ed includerlo fin dalle prime release di HTML5.

    • Penso anche io che uno standard con la sintassi proposta sarebbe la soluzione migliore. La sintassi della soluzione javascript mi piace ma è la soluzione in se a non convincermi molto… tuttavia è una delle poche alternative.

  • Mi trovi assolutamente d’accordo…son mesi ormai che non nomino più le immagini anche nella vecchia versione.. imheader_01.jpg per dire…. Ottimo articolo e buoni spunti!

  • emil

    si vede male sistemate i codici

Shares