Generatore di Sprite CSS – Zero Sprites
Gli sprite CSS, insieme all’utilizzo dei selettori :before e :after, sono un’ottima tecnica per migliorare la velocità di caricamento di un sito.
Infatti questa tecnica permette di caricare una singola immagine, composta dalle icone, bottoni, immagini di sfondo che vogliamo utilizzare nel sito e di individuare la porzione voluta tramite la proprietà css background-position.
In questo modo le richieste http si riducono drasticamente e rendono il caricamento quindi più veloce.
Generatore di Sprite CSS
Spesso, quando si collabora con agenzie, le tempistiche sono strette e la qualità del lavoro deve essere comunque alta.
Il sogno di ogni sviluppatore sarebbe già avere i psd organizzati al meglio per gruppi, le immagini più importanti già estratte, gli sprite già creati. Appunto un sogno.
Per fortuna esistono dei tool che generano in automatico gli sprite. In particolare ne ho utilizzato uno di recente che fa decisamente bene il suo lavoro.
Si tratta di Zero Sprites, dove basterà caricare tutte le immagini che dovranno comporre lo sprite.
Al resto ci pensa lui: crea l’immagine e fornisce il codice css con le varie posizioni.
A differenza di altri tool, questo è molto semplice da utilizzare e permette il caricamento di più immagini contemporaneamente, a differenza ad esempio di CSS Sprites Generator
Conoscevi questo tool? Utilizzi gli sprite?
5 Commenti
Bella risorsa, grande Fede!!
Spero possa esserti utile Marco! 😉
Scrivi un articolo su codekit con compass. Compass è stupendo per generare le sprite perchè aggiorna direttamente la sprite quando aggiungi un’immagine alla cartella, codekit permette di automatizzare il tutto senza passare da linea di comando (usando compass o grunt etc).
Ti ringrazio molto per la segnalazione.
Sarà il caso di mettersi a studiare Compass allora! Grazie Stefano 😉
Considera che puoi usare compass solo per la generazione delle sprite se non volessi utilizzare SASS per il progetto.