Sprite Me: un nuovo strumento per creare CSS Sprites

Un tool per generare i CSS Sprites in automatico, su qualsiasi pagina e con tutti i browser.

Sprite Me è uno strumento potente: si tratta di una bookmarklet che consente di ottimizzare qualsiasi pagina si stia navigando per l’utilizzo dei CSS Sprites.

Se non avete mai sentito parlare dell’argomento, prima di continuare vi consiglio di leggere il post “Usare gli Sprite CSS” pubblicato qualche mese fa proprio su questo sito, visto che è una pratica indispensabile per ogni web designer.

Tornando a Sprite Me, ecco cosa è capace di fare con un semplice clic:

1. Trovare tutte le immagini di sfondo utilizzate sulla pagina corrente, mostrando l’elemento a cui appartengono con un semplice mouseover
2. Riunire le immagini che possono essere accorpate, a seconda della loro posizione e delle proprietà utilizzate. Ad esempio se un background si ripete verticalmente dovrà occupare l’intera altezza dello sprite.
3. Creare il background unico, cliccando sul tasto “make sprite”. La cosa non avviene in automatico perchè c’è la possibilità di riorganizzare le singole immagini prima di accorparle, decidendo quindi se affidarsi totalmente allo strumento o fare delle correzioni manuali.
4. Generare il codice CSS necessario per utilizzare la nuova immagine unica

Per verificare le potenzialità di Sprite Me vi consiglio di provare la demo prima di installarlo.

In genere non sono un amante degli strumenti automatici come questo perchè hanno sempre qualche difetto, ma credo in questo caso di dover fare un’eccezione. Ho notato che a volte le regole CSS generate non sono molto elastiche, ma la possibilità di correggere il risultato manualmente e di generare l’immagine in maniera automatica permettono di aggirare i possibili problemi.

Effettuate qualche prova per decidere se fa al caso vostro, il fatto che sia una bookmarklet vi permetterà di averlo a portata di mano su tutti i maggiori browser, Internet Explorer incluso.