Softonic

Generatore di sprite sheet

Passaggio / 3
Ripristino del file selezionato...

Trascina un gruppo di immagini e il generatore le dispone su una griglia uniforme e disegna un unico PNG di sprite sheet nel browser, poi produce CSS con un offset background-position per ogni sprite. Tutto viene eseguito localmente sul canvas, quindi nulla viene caricato su un server. Utile per set di icone, fotogrammi di giochi retro e stati dell’interfaccia in cui preferisci un solo file invece di tante immagini separate. Imposti il numero di colonne, la dimensione della cella, la spaziatura tra le celle e lo sfondo (trasparente, bianco o nero).

Come viene costruito lo sprite sheet

  1. 1

    Trascina le immagini

    Aggiungi file PNG, JPG o WebP. Riordinali con i comandi su/giù o rimuovi un fotogramma; il foglio si ricostruisce all'istante.

  2. 2

    Imposta la griglia

    Scegli il numero di colonne; le righe derivano da quante immagini hai aggiunto. Ogni immagine viene ridimensionata per entrare in una cella quadrata, mantenendo le proporzioni e centrata.

  3. 3

    Regola dimensione della cella e spaziatura

    Scegli la dimensione della cella in pixel e aggiungi spaziatura tra le celle per evitare che gli sprite vicini si sovrappongano al ridimensionamento.

  4. 4

    Scarica il PNG e copia il CSS

    Salva lo sprite sheet come singolo PNG e copia le classi CSS generate, una regola `.spr-nome` per immagine con larghezza, altezza e background-position.

Come funziona la disposizione

Il generatore usa un’unica disposizione prevedibile: una griglia uniforme. Imposti il numero di colonne e quello di righe è arrotonda_per_eccesso(immagini / colonne). Ogni cella ha la stessa dimensione quadrata (la dimensione di cella scelta), perciò ogni immagine viene ridimensionata per entrare nella sua cella mantenendo le proporzioni e viene centrata. Immagini di dimensioni diverse finiscono tutte in celle uguali, esattamente ciò che si aspettano gli sprite CSS con background-position.

Controllo Intervallo Effetto
Colonne da 1 a 16 Sprite per riga; le righe si calcolano automaticamente
Dimensione cella da 32 a 512 px La cella quadrata in cui viene inserita ogni immagine
Spaziatura da 0 a 64 px Spazio trasparente tra le celle per evitare sbavature al ridimensionamento
Sfondo Trasparente / Bianco / Nero Riempimento dietro gli sprite nel PNG di output

Forma del CSS prodotto

Ogni immagine diventa una classe con il nome del file (.spr-<nome>), dimensionata alla cella e spostata sulla sua cella. Con quattro colonne, una dimensione di cella di 128 px e senza spaziatura, il foglio appare così:

.spr-idle  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -0px; }
.spr-walk  { width: 128px; height: 128px; background: url(spritesheet.png) -128px -0px; }
.spr-run   { width: 128px; height: 128px; background: url(spritesheet.png) -256px -0px; }
.spr-jump  { width: 128px; height: 128px; background: url(spritesheet.png) -384px -0px; }
.spr-fall  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -128px; }

L’offset si sposta in due dimensioni: gli sprite riempiono ogni riga da sinistra a destra, poi passano alla riga successiva. Salva il PNG come spritesheet.png accanto al tuo CSS (oppure modifica url(...) per adattarlo al tuo percorso).

Spaziatura e sbavature

Sprite impacchettati bordo a bordo possono sovrapporsi quando il browser ridimensiona il foglio (rapporti di pixel non interi, trasformazioni CSS). Aggiungi da 2 a 4 pixel di spaziatura tra le celle per impedire ai pixel vicini di filtrare.

Display ad alta densità (retina)

Non c’è un’esportazione 2x automatica, ma puoi ottenere un foglio più nitido in modo semplice: scegli una dimensione di cella maggiore (per esempio 256 px invece di 128 px) così ogni sprite porta più pixel, poi mostralo a metà della dimensione CSS. Ottieni sprite nitidi su schermi ad alta densità senza un passaggio separato.

Sprite sheet o alternative

  • Sprite sheet: set di icone classici in CSS, fotogrammi di giochi HTML5 e pagine che traggono vantaggio dal riunire molte immagini piccole in un solo file.
  • Sprite SVG (symbol): migliori per le icone d’interfaccia moderne, si ridimensionano senza perdita, accettano fill in CSS, senza giochi con background-position.
  • Font di icone: limitati, ma ancora usati per minuscole icone monocromatiche.
  • File singoli con HTTP/2 o HTTP/3: il multiplexing rende il numero di richieste meno rilevante di un tempo.

Domande frequenti

Le immagini restano nel browser. Nel flusso a più passaggi, i file selezionati e il layout vengono conservati temporaneamente in questa scheda del browser per un massimo di 30 minuti. Nulla viene inviato a un server o inserito nell’URL.

Sì, ma gli SVG inline o gli sprite SVG <symbol> di solito si adattano meglio ai framework a componenti. Gli sprite sheet CSS danno il meglio quando molte immagini vengono mostrate contemporaneamente su pagine statiche.

Imposta il numero di colonne pari al numero di fotogrammi così ognuno sta su una riga, poi guidalo con animation-timing-function: steps(N) in CSS e un background-position che salta cella per cella. Ottimo per brevi animazioni in loop (spinner, stati di inattività).

Ogni cella della griglia ha la stessa dimensione quadrata (la dimensione di cella scelta), quindi ogni immagine viene inserita nella sua cella e centrata. Se i tuoi sprite sono già quadrati identici, imposta la dimensione di cella corrispondente e passeranno invariati.

Strumenti correlati

Creatore di GIF

Trasforma una sequenza di immagini in una GIF animata. Regola frame rate, qualità e dimensioni prima dell’esportazione.

Generatore di codici QR

Genera localmente nel browser un codice QR da URL, testo semplice o payload QR formattato correttamente e scaricalo come PNG.

Generatore di meme

Aggiungi testo in alto e in basso a un’immagine JPG, PNG o WebP. Regola font, colore e contorno, quindi scarica il meme in PNG.

Vettorializzatore da PNG a SVG

Trasforma immagini raster PNG in tracciati SVG nel browser. Ideale per loghi, icone e disegni al tratto. Regola soglia, numero di colori e smussatura.

Lavagna online

Disegna idee e organizza forme, note e immagini locali su una lavagna privata nel browser. Esporta in PNG, JPEG, SVG o JSON modificabile.

Ridimensionatore di immagini per social media

Ridimensiona un’immagine con preset integrati per Instagram, Facebook, X, LinkedIn, YouTube, Pinterest e TikTok. Visualizza ogni PNG e scarica i formati che ti servono.