Come gestire le thumbnail

La gestione delle thumbnail è un problema comune per chi si occupa di web.

Lavorando su pagine statiche il problema è facilmente risolvibile creando immagini con dimensioni corrette, quando ci si trova però in un contesto dinamico occorre confrontarsi con i limiti dell’applicativo web che fornisce i contenuti.

Molti cms mettono a disposizione un resize automatico delle immagini caricate e creano “al volo” un’anteprima senza che l’utente debba caricare due immagini di dimensioni diversa. Quando questo non è possibile è utile valutare una soluzione lato client che utilizzi html e css.

Le immagini sono elementi rimpiazzati, questo significa che hanno dimensioni proprie, un’immagine troppo grande può compromettere seriamente il nostro layout se non gestiamo correttamente le sue dimensioni nella pagina.

Definire ad esempio una larghezza o un’altezza standard è già sufficiente per gestire la thumbnail nel layout

/*mettiamo la larghezza*/
img{width:200px;}
/*o in altenativa settiamo l'altezza*/
img{height:300px;}

Settare una delle due dimensioni implica che questa verrà mantenuta mentre l’altra verrà calcolata in proporzione alle dimensioni dell’immagine, evitando così che venga distorta.

Se settiamo entrambe le dimensioni questa risulterà schiacciata o allungata

img{height:300px;width:200px;}

Questo effetto è abbastanza sgradevole è quindi consigliabile evitare di settare entrambe le proprietà. E’ inoltre utile ricordare di utilizzare un piccolo trucco per internet explorer nel caso di resize dell’immagine.

 img{-ms-interpolation-mode: bicubic;}

Questo piccolo accorgimento permette di mantenere una buona qualità dell’immagine sottoposta a resize in Internet Explorer 6 e 7 andrebbe quindi aggiunta alle regole di format del proprio css.

L’ultima soluzione che propongo è invece da utilizzare in casi estremi dove l’input dell’utente non viene gestito e non abbiamo a disposizione resize o taglio delle immagini a priori.

Questo sistema consiste nell’inserire l’immagine in un div al quale definiremo larghezza altezza e overflow:hidden; e all’immagine al suo interno una larghezza o un’altezza impostata.

div{width:100px;height:200px;overflow:hidden;}
img{height:200px;}

Questo metodo ci permette di utilizzare il div come una maschera e di utilizzare anche immagini più grandi senza compromettere il layout.

VEDI ESEMPIO

Pensando di lavorare lato client sulle thumbnail potremmo anche adottare soluzioni che implicano l’uso di javascript o canvas, senza dubbio una soluzione tramite css rimane poco invasiva e sempre accessibile.

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Tutorial e contrassegnata con , , . Contrassegna il permalink.

4 risposte a Come gestire le thumbnail

  1. Alberto scrive:

    Grandissimo Mauro Accornero!

  2. GaSe scrive:

    Anche se alcune volte conosco già l’argomento, i tuoi articoli li trovo interessanti e senza dubbio utili.
    Continua così, complimenti.

  3. Mauro Accornero scrive:

    Grazie, in effetti non è che si inventa mai nulla di nuovo, ma le cose da sapere son sempre tante e condividere è la chiave per recuperare quello si è perso, non si finisce mai d’imparare, per fortuna! :)

  4. rolando palinoi scrive:

    Bravo, chiaro ed estremamente utile. Grazie

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>