Ottimizzare l’uso degli sprite CSS
Martedì 31 Marzo 2009 - 08:53
di Cesare Lamanna
Mentre Tommaso Baldovino sintetizza in questo post i punti essenziali sull’utilità e la funzione degli sprite CSS, citando anche un paio di tool per la loro generazione automatica, su Mozilla WebDev Robert Doherty illustra una serie di trucchetti per ottimizzarne l’implementazione.
In sintesi: piazzare le immagini nello sprite sul lato opposto rispetto a quello a cui dovrà poi apparire sulla pagina, usare il posizionamento esplicito in pixel invece che le keyword bottom o right per la proprietà background-position, lasciare molto spazio attorno alle singole immagini che compongono lo sprite (specie intorno a quelle più piccole), non preoccuparsi troppo delle dimensioni finali in pixel della composizione.
A tal proposito mette un link allo sprite usato su addons.mozilla.org, un’ottima rappresentazione del concetto per cui l’utilizzo degli sprite può andare ben oltre il semplice rollover.
Commenti
1
Concordo con i coomenti di Vlad Vukicevic su mozilla: 1000 x 2000 sono un’enormità per le risorse e non ha alcun senso mettere tutte le immagini su un unico sprites. A mio avviso l’utilizzo più proficuo di questa tecnica si ha mettendo su uno stesso file immagini delle stesse dimensioni (es. icone 32×32), cercando di limitare sempre il peso delle immagini, siano esse sprites o altro… non dimentichiamo che c’è chi paga per ogni byte che scarica.
2
Nono c’è dubbio che la tecnica alla base degli sprite sia efficace e che sarà sempre + utilizzata in futuro.
Però è decisamente poco comoda nei casi in cui si realizzi un progetto di grosse dimensioni e, sopratutto, in diversi step.
Perché ogni volta devi riaprire i files, aggiungere icone in coda e risalvare… insomma, molto + comodo aggiungere un file all’occorrenza che ripescare l’immaginona con tutti gli sprite aumentare il canvas e piazzarla li prima di riesportare…
Ovviamente è un parere personale….
Altro ulteriore vantaggio poco citato è quello di cambiare tutta la grafica modificando un solo file (certo rispettando le dimensioni altrimenti succede l’ira di Dio).
3
Credo che qusto approccio vada bene per gli strumenti della navigazione (icone e sfondi) e se inseriti in un css visualizzabile su display o monitor, non per i dispositivi mobile; giacchè la connessione con quest’ultimi è di solito a quantitativo di byte, come già detto da Maurizio
Saluti