Come Fare Sprite CSS da Shell con Montage

Pubblicato da Yuri Carlenzoli | 05 maggio 2012

Ecco come fare sprite CSS con montage, comando di ImageMagick ideale per fare sprite CSS dato che permette di personalizzare molto le immagini, background, bordi ed altro.

Fare-Sprite-CSS-montage-Shell

Velocizzare un sito internet è sempre importante, non lo è stato solo il momento dopo che Google ha annunciato che la velocità è un fattore di ranking quindi tutti parlarono di metodi per velocizzare un sito internet, man mano che si trova qualche soluzione interessante se si ha un sito web od una sezione dedicata ai webmaster e si si vuole la si condivide, per i webmaster che usano Linux in questo post introduco a montage, il comando di ImageMagiK ideale per fare sprite CSS quindi per diminuire le richieste HTTP e velocizzare un sito internet.

Seppur abbia già detto come fare sprite con convert, tool anch'esso di ImageMagick, quando ho scritto quell'articolo, seppur sia sempre funzionante non conoscevo ancora montage, esso è indicato per fare sprite CSS, consente di fare meno fatica a creare le regole del foglio di stile perchè le immagini le si metteranno dove si vogliono indipendentemente dal nome che hanno.

Ipotizziamo quindi di avere le immagini delle 4 frecce che ho usato nel precedente tutorial che dice come fare sprite CSS, con convert, invece di metterle a casaccio ipotizziamo che si voglia mettere prima la freccia a sinistra, poi quella a destra, quella verso l'alto ed infine quella verso il basso, il comando da dare in shell sarà:

montage left.png right.png up.png down.png -tile 4x1 -background transparent -geometry 16x16+1+1 sprite.gif

Questo lungo comando, ma neanche tanto lungo e difficile dato che montage permette di manipolare molto le immagini sta a significare che:

Per prima cosa dopo montage si richiamano le immagini in base la posizione che gli si vuol dare, l'opzione -tile 4x1 sta a significare che si vogliono quattro immagini su una riga, tramite -background transparent si riferisce a montage che si vuole lo sfondo trasparente, con l'opzione -geometry 16x16+1+1 riferiamo a montage che la dimensione delle immagini è (e l'output deve essere) di 16x16 pixel ciascuna e lo spazio in orizzontale ed in verticale dev'essere di 1 pixel, sprite.gif è l'immagine di output che dev'essere per forza in formato GIF o PNG se si vuole lo sfondo trasparente.

Concludo dicendo che il man di montage è ben fornito e c'è anche il link alla versione online nella pagina di man, c'è da perdersi con tutti i parametri che possiede però potrete manipolare le immagini come volete nei vostri sprite CSS, probabilmente è il miglior tool per fare sprite in locale su Linux, non trovate?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Moderazione dei commenti attiva. Il tuo commento non apparirà immediatamente.