Generatore sprite sheet

Combina più immagini in un singolo sprite sheet e genera codice CSS.

Trascina e rilascia le immagini qui

o clicca per caricare più file

Why Use This Tool?

Utilità ad alta efficienza per l'ottimizzazione frontend

Reduce HTTP requests and speed up loading.

Generazione automatica coordinate

Facciamo la matematica per te. Ottieni coordinate X e Y precise per ogni singola immagine nel tuo sprite sheet consolidato istantaneamente.

Algoritmo di impacchettamento smart-grid

Il nostro motore dispone intelligentemente immagini di dimensioni variabili nella griglia più efficiente possibile, minimizzando lo spazio vuoto e riducendo la dimensione finale del file.

Classi CSS pronte all'uso

Genera un blocco CSS pulito, pronto per copia-incolla con classi individuali per ogni risorsa, incluse le proprietà background-position e dimensione.

Modalità layout personalizzabili

Scegli tra strisce verticali, strisce orizzontali o la modalità 'Griglia' più efficiente in base alle esigenze dell'architettura del tuo progetto specifico.

Controllo padding e spaziatura

Aggiungi spaziatura personalizzata tra gli sprite per prevenire il 'pixel bleeding' — dove parti dell'icona adiacente appaiono accidentalmente nella tua UI.

Protezione elaborazione memoria locale

Le tue risorse UI sono di tua proprietà. Tutto l'impacchettamento e la generazione del codice avvengono direttamente nel tuo browser, assicurando che nessun dato lasci mai il tuo dispositivo.

Guida alle risorse ad alta velocità: come usare il generatore

Create sprites in minimal steps.

Raccogli le tue piccole risorse

Raccogli tutte le piccole icone, pulsanti o frame di un'animazione che vuoi combinare. Assicurati che siano in un formato di alta qualità come PNG.

Caricamento in batch nello strumento

Seleziona tutti i file contemporaneamente e caricali. Lo strumento creerà immediatamente un'anteprima visiva di come possono essere impacchettati insieme.

Configura l'ottimizzazione

Regola il 'Padding' se sei preoccupato per i bordi che appaiono sugli schermi retina, o scegli un layout 'Verticale' se stai costruendo un menu laterale o una striscia.

Rivedi l'anteprima dello sprite

Controlla il foglio generato. Assicurati che ogni elemento sia visibile e che la griglia sia stretta ed efficiente senza spazio sprecato.

Scarica l'immagine atlante

Clicca il pulsante 'Scarica sprite sheet' per salvare il file immagine consolidato nella cartella risorse del tuo progetto.

Padronanza sprite sheet: segreti per la creazione di risorse per giochi

Gli sprite sheet sono ancora rilevanti con HTTP/2?

Sì! Mentre HTTP/2 gestisce meglio le richieste multiple, gli sprite sheet sono ancora più veloci perché riducono la quantità totale di metadati e overhead di compressione.

Cosa succede se ho immagini di dimensioni diverse?

Il nostro algoritmo smart-grid è progettato per questo! Disporrà le tue immagini di tutte le forme e dimensioni nel rettangolo più compatto possibile.

Dovrei usare JPG o PNG per il mio sprite sheet?

Raccomandiamo fortemente PNG. Gestisce meglio i 'bordi nitidi' delle icone e supporta la trasparenza, essenziale per la maggior parte del lavoro UI web.

C'è un limite su quante immagini posso includere?

Tecnicamente, no. Tuttavia, raccomandiamo di restare intorno a 50-100 immagini per foglio per evitare che le dimensioni del file diventino troppo grandi.

Cos'è il 'Pixel Bleeding'?

Questo si verifica quando il rendering sub-pixel mostra un frammento dell'immagine successiva nel foglio. Aggiungi 1-2 pixel di 'Padding' nel nostro strumento per prevenirlo.

Questo strumento supporta SVG?

Questo strumento è per sprite raster (PNG/JPG). Per gli SVG, dovresti usare un approccio 'SVG Sprite' che viene gestito diversamente nei browser moderni.

Come aggiorno uno sprite sheet in seguito?

Basta ricaricare le icone originali più quella nuova. Il nostro strumento ti darà un nuovo foglio e nuovo CSS in secondi.

Questo strumento è gratuito per gli sviluppatori di giochi?

Sì! Che tu stia creando un sito web o un gioco mobile, il nostro generatore è gratuito al 100% senza restrizioni commerciali.

I browser possono mettere in cache gli sprite sheet?

Sì! Questo è uno dei più grandi benefici. Il browser deve solo mettere in cache un singolo file per avere ogni icona pronta per tutte le pagine del tuo sito.

I miei dati di icone proprietarie sono al sicuro?

Assolutamente. Poiché i tuoi file vengono elaborati localmente nel tuo browser, i tuoi design non vengono mai caricati, archiviati o visualizzati dal nostro sistema.