Immagini flessibili

24 ottobre 2011

Cosa indica l’aggettivo flessibile? In senso figurato, tutto ciò che è in grado di adattarsi a diverse situazioni.

In questo articolo, riferendolo alle immagini, lo useremo in due accezioni e contesti specifici:

  1. Immagini in grado di adattarsi alla tipologia e alle dimensioni del layout
  2. Immagini capaci di adattarsi alle caratteristiche del layout e del dispositivo su cui vengono visualizzate

Presenteremo tecniche e strumenti recentemente emersi in rete per ottenere nel modo più semplice i risultati desiderati, avendo come contesto di riferimento quello del cosiddetto responsive design.

Immagini adattabili al layout

Il contesto d’uso in cui risulta utile la tecnica che stiamo per presentare è quello dei layout non fissi, quelli cioè in cui le dimensioni non sono espresse con unità di misura assolute (pixel) e che risultano pertanto a larghezza variabile, dipendente da fattori come la larghezza della finestra del browser (layout liquidi) o la dimensione del testo (layout elastici).

Per la loro stessa natura, infatti, le immagini non sono flessibili, hanno dimensioni fisse, misurate in pixel. Lo stesso discorso è valido per oggetti come video e movie Flash. Di fatto, nelle tipologie di layout cui si è accennato qui sopra, si va ad inserire in un contesto flessibile un oggetto che non lo è.

In un layout fisso il problema non si pone. L’articolo che state leggendo è contenuto in un div largo 550px. Questa misura rappresenta un vincolo e al tempo stesso una guida: se non voglio spezzare il layout, le immagini che inserisco non devono essere più larghe di 550px. Valutando fattori come margini e padding, posso ricavare una misura ottimale, per esempio equivalente a 500px. Una volta rispettata questa semplice indicazione, non devo preoccuparmi di niente.

E in un layout flessibile? Il discorso cambia. Dal momento che le dimensioni sono espresse con unità di misura relative (em o percentuali), non sono in grado di prevedere a quanti pixel reali corrisponderanno. Non posso, per esempio, sapere su che monitor l’utente visualizzerà la pagina, quanto sarà larga la finestra del browser, quale sarà il fattore di ingrandimento del testo, etc. Inserendo immagini, che hanno delle dimensioni fisse in pixel, si corre il rischio che risultino a un certo punto poco adattate al contesto, perché troppo piccole, o perché troppo grandi.

Partiamo da questo primo esempio. La colonna del contenuto principale è a larghezza flessibile; ridimensionando la finestra del browser si nota come il testo si allarghi o si restringa nella colonna. Idealmente vorrei che le immagini (larghe 450px) fossero sempre della stessa larghezza del paragrafo in cui sono inserite. E in effetti, ridimensionando la finestra del browser, a un certo punto ottengo il risultato voluto, come si evince da questo screenshot:

Figura 1. Immagine larga 450px inserita nel corpo del testo

Immagine larga 450px inserita nel corpo del testo

Ma basta massimizzare la finestra del browser per ottenere questo risultato:

Figura 2. L’immagine visualizzata in una finestra massimizzata

L'immagine visualizzata in una finestra massimizzata

Si può decidere che va bene così e procedere. Può essere tutto sommato un compromesso accettabile.

Sicuramente da evitare sono invece situazioni come quella del secondo esempio. È stata usata un’immagine larga 950px: facile aspettarsi che essa possa uscire dai limiti della colonna centrale rovinando tutto il layout.

Ecco che a questo punto entra in gioco il concetto di immagine flessibile. L’ideale, infatti, sarebbe riuscire a far sì che le immagini si adattino automaticamente al layout. Nel nostro caso assumendo una larghezza che sia sempre pari a quella dell’elemento che le contiene.

La soluzione è invero a portata di mano. Basta usare la proprietà CSS max-width con un valore pari al 100% e assegnarla alle immagini che vogliamo rendere flessibili. In pratica, tramite i CSS, supero il problema delle dimensioni fisse ricorrendo ad un’unità di misura relativa (le percentuali).

Nel terzo esempio abbiamo allora creato questa semplice regola CSS:

.flex {max-width: 100%}

Una classe flex da assegnare solo alle immagini che vogliamo rendere flessibili. E infatti l’abbiamo assegnata all’immagine, larga 950px, dei pini:

<p><img class="flex" src="pini.jpg" alt="pini"></p>

Il risultato è in linea con quanto ci si attende: possiamo ridimensionare la finestra del browser come e quanto ci pare, la larghezza dell’immagine corrisponderà sempre a quella dell’elemento che la contiene. E le dimensioni scalano sempre proporzionalmente.

Un momento. Qualcuno potrebbe far osservare: “Ma se si tratta semplicemente di rendere le dimensioni delle immagini flessibili tramite i CSS, perché non usare la proprietà width? Magari un bel width: 100%?”. Giusta osservazione. In effetti nella maggior parte delle situazioni le due proprietà sono equivalenti, l’effetto ottenuto è identico. Ma c’è uno scenario da valutare.

Usando width: 100% invece che max-width: 100%, l’immagine viene scalata sempre e comunque. Pertanto, se ho un’immagine di 200px in un paragrafo largo più o meno 500px, il risultato sarà questo:

Figura 3. Immagine sgranata con width=100%

screenshot

L’immagine, scalata all’eccesso, risulta ovviamente sgranata, ha perso in dettaglio.

Usando invece max-width: 100%, quando l’immagine è più piccola del suo contenitore, mantiene le sue dimensioni originarie:

Figura 4. Immagine con max-width=100%

screenshot

Da questi semplici esempi possiamo ricavare un insegnamento. Volendo usare questa tecnica è utile partire da immagini piuttosto ampie in larghezza che verranno poi ridimensionate con max-width per adattarsi al contesto. La scelta delle dimensioni ideali dipenderà ovviamente da caso a caso.

Un problema con Windows e uno con IE6

Il merito di aver per la prima volta divulgato la tecnica max-width: 100% per rendere le immagini flessibili spetta a Richard Rutter, che ha presentato sul suo sito gli esiti dei test che ha condotto.

A migliorarla, risolvendo un problema piuttosto serio nella resa a schermo, è stato Ethan Marcotte. Nell’articolo Fluid Images, pone il caso di alcuni browser (vecchie versioni di Firefox, IE versione 7.0 e precedenti) che su Windows offrono, in presenza di questa tecnica, un degrado pesante delle immagini quando esse vengono ridimensionate.

La soluzione, basata su un semplice script Javascript e sull’uso di una minuscola GIF trasparente di 1x1px, sfrutta il filtro proprietario di Microsoft AlphaImageLoader. L’abbiamo implementata nell’ultimo esempio, e trovate tutti i file adoperati nel file allegato all’articolo.

Se la compatibilità piena con quei browser è una necessità assoluta, potete sfruttarla.

Allo stesso modo, dal momento che IE6 non supporta la proprietà max-width, si può servire a quel browser l’alternativa basata su width: 100%, magari all’interno di un commento condizionale:

<!--[if IE 6]>
<style type="text/css">
.flex {width: 100%}
</style>
<![endif]-->

Immagini che si adattano al dispositivo

La tecnica appena vista può essere un ottimo punto di partenza anche per adattare le immagini quando esse vengono visualizzate su dispositivi mobili.

In quel contesto, però, si può procedere oltre sulla via dell’adattamento. Non solo si dovrebbe fare in modo che le immagini si adattino a livello di layout, ma sarebbe ideale servirle all’utente in una forma ottimizzata nelle dimensioni e nel peso. Detto diversamente: perché inviare all’utente di un iPhone una pesantissima foto di 2000x1200px quando la risoluzione dello schermo di quel dispositivo è infinitamente inferiore? È oggettivamente uno spreco in uno scenario in cui disponibilità di banda e velocità della connessione sono fattori cruciali.

Partendo da questa semplice considerazione, sono state sviluppate tecniche che mirano a servire immagini adatte al contesto di fruizione, ovvero al dispositivo e/o alla risoluzione dello schermo.

Alcune di queste tecniche sono basate su soluzioni client-side, sfruttando per esempio i soli CSS o facendo ricorso a Javascript.

In verità, quelle al momento più promettenti contemplano tutte una qualche forma di elaborazione lato server. Ciò si rende necessario principalmente per un motivo: se servo all’utente iPhone un’immagine di 400x300px e a chi usa un potente e fiammante PC una di 2000x1200px, devo fare in modo che i browser dei rispettivi sistemi non scarichino entrambe le versioni.

La prima soluzione che vedremo cerca di rispondere proprio a questa esigenza.

Se vuoi aggiornamenti su Immagini flessibili inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Immagini flessibili

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy