Generatore di sprite sheet CSS

Come creare uno sprite sheet

1. Trascina le immagini nell’area di caricamento, oppure cliccaci sopra per sceglierle. Sono accettati PNG, SVG, WebP, JPG e gli altri formati che il tuo browser sa leggere, fino a 500 immagini. Ogni file compare nell’elenco Immagini con le sue dimensioni; il pulsante × rimuove un’immagine e Rimuovi tutte le immagini svuota l’elenco.
2. Scegli una Disposizione: Griglia, Compatta (foglio più piccolo), Striscia orizzontale o Striscia verticale. Con Griglia, Colonne (0 = automatico) imposta il numero di colonne.
3. Imposta la Spaziatura (px) tra gli sprite (2 per impostazione predefinita) e spunta Dimensione potenza di due (256, 512, 1024…) se il tuo motore o la tua GPU lo richiede.
4. Scegli il File di dati: CSS (classi background-position), JSON (mappa dei frame) oppure CSS e JSON. Modifica il Nome del file e il Prefisso delle classi CSS (entrambi «sprite» per impostazione predefinita).
5. Controlla l’anteprima, le Dimensioni del foglio e lo Spazio occupato, poi clicca su Scarica ZIP (PNG + dati) o Scarica solo il PNG. Il Codice generato si può anche copiare direttamente.

Le immagini vengono decodificate nel browser e nulla viene caricato. Un SVG senza larghezza e altezza proprie viene rasterizzato con il lato più lungo a 256 px.

Scegliere una disposizione

• Griglia assegna a ogni immagine una cella grande quanto l’immagine più grande. Con le colonne automatiche la griglia è più o meno quadrata. È semplice e prevedibile, ideale quando tutti gli sprite hanno la stessa dimensione, come in un tileset.
• Compatta (foglio più piccolo) usa l’impacchettamento a ripiani: le immagini vengono ordinate dalla più alta alla più bassa e disposte da sinistra a destra su più file. Lo strumento prova molte larghezze di foglio e tiene quella con l’area più piccola, tenendo conto dell’arrotondamento a potenze di due quando l’opzione è attiva. Ideale per icone di dimensioni diverse.
• Striscia orizzontale e Striscia verticale mettono le immagini in una sola riga o colonna nell’ordine in cui le hai aggiunte. È quello che si aspettano molti player di animazioni per i fotogrammi.

Il foglio non può superare 16.384 px per lato né circa 16,7 megapixel, il limite che i browser riescono a disegnare.

Usare il CSS

Il CSS contiene una classe di base con il foglio come background-image e no-repeat, poi una classe per ogni sprite, con il nome preso dal file: home.png diventa sprite-home. I nomi vengono convertiti in minuscolo, gli accenti vengono rimossi, gli altri caratteri diventano trattini e i doppioni ricevono -2, -3.

<link rel="stylesheet" href="sprite.css">
<span class="sprite sprite-home"></span>
<span class="sprite sprite-search"></span>

Ogni classe di sprite imposta width, height e un background-position con offset negativi. Uno sprite in x = 40, y = 20 riceve background-position: -40px -20px: l’intero foglio viene spostato di 40 px a sinistra e 20 px in alto all’interno dell’elemento, così attraverso il riquadro dell’elemento si vede solo quello sprite. La spaziatura evita che gli sprite vicini «sbordino» quando la pagina viene ingrandita o una texture viene filtrata.

Schermi ad alta densità: disegna le immagini al doppio della dimensione di visualizzazione, genera il foglio, poi aggiungi alla classe di base un background-size pari alla metà delle dimensioni del foglio, e dimezza larghezze, altezze e offset. Lo strumento non lo genera: è una modifica manuale.

Gli sprite servono ancora con HTTP/2?

Gli sprite sono nati per risparmiare richieste HTTP. Con il multiplexing di HTTP/2, molti piccoli file si caricano quasi veloci come uno solo, quindi il vantaggio per i siti web è molto minore, e per le icone scalabili spesso sono preferibili le icone SVG o i font di icone. Gli sprite sheet restano invece lo standard per i giochi 2D e i fotogrammi delle animazioni: una sola texture significa meno cambi di texture sulla GPU e un solo file da caricare.