Generatore di Sprite CSS

Clicca per caricare un'immagine

Formati supportati: PNG, JPG, WebP

Layout

Spaziatura immagini: 10px

050

Carica un'immagine per l'anteprima dello sprite

Unisci più icone piccole in un foglio di sprite CSS direttamente online. L'elaborazione avviene nel browser locale senza alcun upload, e il codice CSS background-position viene generato automaticamente per i layout orizzontale, verticale e a griglia.

Raccomandazioni correlate

Generatore ICO

Comprimi immagini

Converti Immagine

Ridimensiona immagini

Ritaglia Immagine

Ruota e Rifletti Immagine

Cos'è uno sprite CSS?

Uno sprite CSS combina più immagini piccole in un'unica immagine più grande e usa background-position per mostrare le singole icone. Il termine sprite viene dalle prime console di gioco, che raggruppavano più frame di animazione in un'unica immagine e li mostravano in sequenza. Il web ha ripreso l'idea per caricare molte icone piccole con una sola richiesta.

**Perché servono gli sprite?** Nell'era HTTP/1.1, ogni file immagine generava una richiesta separata, con handshake TCP, handshake TLS e overhead delle intestazioni. Cento icone significavano cento richieste. Uno sprite colloca tutte le icone in un'unica immagine, completando il caricamento in una sola richiesta e accelerando il first paint. Il multiplexing HTTP/2 riduce parte di questo vantaggio, ma gli sprite restano utili per la cache CDN, la compressione gzip e il fallback HTTP/1.1.

**Come funziona:** immagina uno sprite 200x60 con tre icone 60x60 in fila. Per mostrare la prima, imposta su un elemento 60x60 `background: url(sprite.png); background-position: 0 0;`. Cambia a -60px 0 per la seconda e -120px 0 per la terza. Questo strumento genera automaticamente tutte queste coordinate.

**Alternative moderne:** SVG + use o symbol (consigliato, vettoriale, colorabile, animabile), Icon Font (ampia compatibilità, multipiattaforma), HTTP/2 server push e icone in web font. Ogni opzione ha i suoi punti di forza: scegli in base alle esigenze del tuo progetto.

Casi d'uso

Progetti web con molte icone piccole da unire in uno sprite per ridurre le richieste HTTP e accelerare il first paint
Sviluppatori frontend che vogliono centralizzare le icone del progetto e generare automaticamente il codice CSS background-position
Team che vogliono generare in batch sprite e CSS e consegnare un pacchetto pronto da integrare
Dopo l'unione, passa l'immagine combinata nello [strumento di compressione immagini](/image/compress/) per ridurre le dimensioni totali e migliorare la metrica LCP
App, Electron o client desktop che devono raggruppare asset di icone statiche in un'unica immagine
Template HTML email o blog statici che hanno bisogno di più icone restando compatibili con i client di posta
Designer che consegnano le icone in formato sprite per un'integrazione rapida da parte degli sviluppatori frontend
Sprite 2x dedicati per schermi Retina, adattati a display 1x e 2x tramite background-size

Come utilizzare

Clicca sull'area di caricamento o trascina più immagini (JPG, PNG, WebP e GIF sono supportati)
Riordina le icone nella lista di sinistra con la maniglia di trascinamento o i pulsanti su/giù
Scegli Orizzontale, Verticale o Griglia nella sezione layout del pannello di sinistra
Regola lo slider di padding per impostare lo spazio in pixel tra le icone (1-5 px consigliati)
Visualizza l'anteprima dello sprite in tempo reale a destra, poi clicca Scarica per salvare il PNG e Copia per recuperare il CSS

Funzionalità

Unione immagini con un clic: carica più icone piccole e combinale in un unico sprite
Tre modalità di layout: orizzontale, verticale e griglia, selezionabili in base all'uso
Padding regolabile: uno slider da 0 a 50 px controlla lo spazio tra le icone
Riordina con il drag: trascina le icone nell'elenco per cambiare l'ordine, le coordinate CSS si aggiornano da sole
Riordino su mobile: i pulsanti su e giù riordinano le icone su smartphone e tablet
CSS generato automaticamente: background-position, larghezza e altezza di ogni icona sono creati per te
Anteprima live: lo sprite si rigenera all'istante a ogni modifica per un vero WYSIWYG
Copia CSS con un clic: un pulsante integrato copia l'intero foglio di stile negli appunti
Scarica PNG con un clic: l'immagine combinata si salva in locale come sprite.png
Elaborazione locale nel browser: l'API Canvas unisce i file in locale, nulla viene caricato
Più formati di input: JPG, PNG, WebP e GIF sono supportati
Trasparenza preservata: l'output PNG mantiene lo sfondo trasparente originale per composizioni pulite

Best Practices

Adattamento Retina 2x: usa file sorgente 2x

Se i tuoi utenti usano schermi Retina (Mac, iPhone, Windows HiDPI), carica sorgenti a risoluzione 2x (ad esempio icone 32x32) e genera lo sprite da queste, quindi usa background-size: 32px auto nel CSS per tornare a 16x16. Così gli schermi 1x e 2x restano nitidi con un solo sprite.

Gli sprite contano ancora nei progetti HTTP/2

Il multiplexing HTTP/2 riduce di molto il collo di bottiglia legato al numero di richieste, ma gli sprite vincono in quattro scenari: riuso della cache CDN, compressione gzip o Brotli, attraversamento di proxy interni e fallback HTTP/1.1. Intranet aziendali, sistemi bancari o governativi e template HTML email funzionano ancora prevalentemente in HTTP/1.1, dove gli sprite sono insostituibili.

PNG-8 o PNG-24: scegli la profondità giusta

Lo strumento restituisce un PNG fisso, ma la profondità del file sorgente la scegli tu. Le icone piatte o monocolore dovrebbero essere PNG-8 (trasparenza senza perdite, 60-80% più piccole di PNG-24). Le icone con gradienti, ombre o riflessi richiedono PNG-24. Lo strumento accetta qualsiasi formato, quindi ottimizza prima le sorgenti con un compressore PNG.

Strategia cache CDN: hash sul nome file per cache permanente

Evita un nome fisso sprite.png. Rinomina con un hash del contenuto (ad esempio sprite.a3f2b1.png) e imposta Cache-Control: max-age=31536000 per la cache permanente. Il browser scarica una sola volta e poi serve dalla cache locale, risparmiando più banda di HTTP/2 da solo. Lo strumento produce sprite.png per impostazione predefinita; puoi rinominare dopo il download.

gzip o Brotli rendono gli sprite ancora più piccoli

Uno sprite combinato ha una continuità di pixel maggiore di immagini sparse, quindi gzip o Brotli lo comprimono molto più efficacemente. Nginx con gzip livello 1 riduce in genere gli sprite del 60-80%, e Brotli raggiunge l'85% e oltre. Con Content-Encoding attivo, uno sprite da 1 MB può essere trasmesso in 200-300 KB. È il vantaggio più sottovalutato degli sprite.

CSS Modules o Vue scoped CSS: racchiudi con :global()

Se il tuo progetto usa CSS Modules o Vue scoped CSS, i nomi delle classi .icon-home e .sprite generati da questo strumento verranno hashati localmente e smetteranno di funzionare. Racchiudi le classi condivise con :global(.sprite) { ... } nel tuo .module.css, oppure rinuncia ai CSS Modules e affidati a una nomenclatura BEM.

Mixa con Icon Font: UI essenziale in font, icone complesse in sprite

Lo schema più stabile in produzione è la combinazione. Usa Icon Font per le icone UI universali (impostazioni, chiudi, cerca, utente) perché sono colorabili, vettoriali e multipiattaforma. Usa gli sprite per le icone complesse a colori (logo di prodotto, icone banner). I due approcci si completano ed evitano il costo di manutenzione di una scelta unica.

spritesmith per i progetti di ingegneria, questo strumento per i prototipi

Per progetti di lunga durata, integra spritesmith (Webpack) o gulp.spritesmith nella pipeline di build: le modifiche rigenerano lo sprite, i nomi con hash vengono emessi e le variabili SCSS o LESS sono generate automaticamente. Questo strumento è pensato per prototipi senza dipendenze e consegne piccole, mentre i plugin di build si adattano meglio alle pipeline CI/CD.

I progetti moderni possono migrare dallo sprite a SVG symbol

Se il tuo progetto supporta i browser moderni (Chrome, Safari, Firefox, Edge, oltre a IE 11+), valuta la migrazione dallo sprite a SVG symbol: un unico file gestisce tutte le icone, il CSS controlla colore e animazione e non servono più coordinate background-position da mantenere. Lo sprite prodotto da questo strumento è un asset di transizione valido durante la migrazione.

Domande frequenti

Cos'è uno sprite CSS e perché unire le immagini?

Uno sprite CSS combina più immagini piccole in un'unica immagine più grande e usa background-position per mostrare le singole icone. Con gli sprite il browser effettua una sola richiesta HTTP per caricare tutte le icone, riducendo notevolmente il numero di richieste e accelerando il first paint rispetto al caricamento di decine di file separati. È una tecnica classica di ottimizzazione frontend.

Come unisco più icone in uno sprite online?

Carica le immagini e lo strumento le unisce nel layout scelto con anteprima live. A destra genera il codice CSS background-position (con larghezza e altezza) per ogni icona, pronto da incollare nel foglio di stile. Lo sprite generato è in PNG e si scarica con un clic.

Come si usa il codice CSS generato?

Posiziona sprite.png nel tuo progetto (ad esempio /img/sprite.png) e incolla il CSS nel foglio di stile. Aggiungi la classe .sprite e la classe .icon-xxx corrispondente a qualsiasi elemento che deve mostrare un'icona, ad esempio <i class="sprite icon-home"></i>. I nomi delle classi sono generati automaticamente dal nome del file originale.

Quali modalità di layout sono supportate?

Tre modalità: orizzontale (icone da sinistra a destra in una riga), verticale (icone impilate dall'alto in basso in una colonna) e griglia (icone disposte automaticamente in una matrice quadrata; il numero di colonne è la radice quadrata arrotondata per eccesso). Cambia modalità nel pannello di sinistra per vedere l'anteprima del risultato.

Posso regolare lo spazio tra le icone?

Sì. Nel pannello di sinistra c'è uno slider di padding da 0 a 50 px; sono consigliati 1-5 px. Un padding ragionevole evita lo sconfinamento dei pixel del bordo nel posizionamento CSS, ma non incide sull'uso finale. Il padding vive dentro lo sprite, mentre il CSS usa solo le coordinate precise di background-position.

Posso riordinare le icone?

Sì. Ogni elemento della lista di sinistra si sposta con il drag-and-drop tramite l'apposita maniglia, e i pulsanti su/giù funzionano su mobile. Lo sprite e le coordinate CSS si rigenerano automaticamente non appena l'ordine cambia.

Quali formati immagine sono supportati?

Tutti i formati comuni: JPG, PNG, WebP, GIF e altri. L'output è sempre PNG (preserva la trasparenza). È consigliato PNG come input, perché gli sfondi trasparenti sopravvivono all'unione nello sprite.

Gli sprite CSS sono ancora utili nei progetti moderni?

Il multiplexing HTTP/2 riduce parte del vantaggio degli sprite, ma questi continuano ad aggiungere valore tramite la cache CDN, la compressione gzip e un first paint più rapido delle icone chiave. Se hai meno di 10 icone o ti servono colore e animazione, preferisci SVG symbol o Icon Font. Per molte icone PNG statiche, lo sprite resta una scelta stabile e affidabile.

Gli sprite diventano sfocati sugli schermi Retina? Come si risolve?

Sì, può succedere. Gli schermi Retina (Mac, iPhone, Windows HiDPI) hanno 2x o 3x pixel fisici, quindi uno sprite 1x viene stirato e appare sfocato. La soluzione è caricare sorgenti 2x (32x32 invece di 16x16) e riportare lo sprite a 16x16 nel CSS con background-size: 32px auto.

L'unione delle icone riduce la qualità dell'immagine?

No. L'unione si limita a posizionare ogni immagine nella sua posizione su una grande tela. Non vengono applicati ricampionamento, compressione o regolazioni di colore. Il PNG di output mantiene la qualità originale. Se devi ridurre ulteriormente il file unito, passalo nello [strumento di compressione immagini](/image/compress/).

Le mie immagini dello sprite vengono caricate su un server?

No. Tutta l'unione avviene nel tuo browser locale tramite l'API Canvas. I file non lasciano mai il tuo dispositivo e vengono eliminati alla chiusura della pagina. Icone interne, loghi non ancora pubblicati e altri asset sensibili possono essere trattati in tutta tranquillità.

Come scarico lo sprite generato?

Appena le immagini vengono caricate, viene generata un'anteprima. Clicca il pulsante Scarica nel pannello di sinistra per salvare sprite.png in locale. Anche il CSS viene generato automaticamente e con un clic su Copia lo porti negli appunti.

Posso personalizzare i nomi delle classi?

I nomi delle classi sono generati automaticamente dal nome del file originale con il prefisso .icon-. Ad esempio, home.png diventa .icon-home. Usa nomi in inglese, cifre e trattini per ottenere nomi di classe puliti e leggibili.

Come scelgo tra sprite, Icon Font e SVG symbol?

Dipende dal caso d'uso. Molte icone PNG statiche o necessità di supportare vecchie versioni di IE: sprite. Icone UI universali che devono cambiare colore e restare multipiattaforma: Icon Font. Progetti moderni che richiedono colore, animazione e un unico file: SVG symbol è la prima scelta. In pratica la combinazione è comune: Icon Font per le icone UI essenziali, sprite per le icone complesse a colori.

Posso ridurre lo sprite unito con lo strumento di compressione?

Sì. Questo strumento produce un PNG senza perdite, che può essere grande. Un buon flusso di lavoro: genera lo sprite qui, poi usa lo [strumento di compressione immagini](/image/compress/) per ridurre il PNG o convertirlo in JPG (se non ti serve la trasparenza) e infine il [convertitore di immagini](/image/convert/) per passare a WebP se lo desideri. Combinare gli strumenti massimizza le prestazioni di caricamento.

Glossario

Sprite CSS: Tecnica che combina molte immagini piccole in un'unica immagine più grande e usa background-position per mostrare le singole icone. Una classica ottimizzazione frontend.
background-position: Proprietà CSS che imposta le coordinate di partenza dell'immagine di sfondo. Gli sprite usano valori negativi per spostare lo sfondo a sinistra o in alto fino all'icona desiderata. Ad esempio, background-position: -60px 0 mostra l'icona con uno spostamento di 60 px.
background-size: Proprietà CSS che controlla la dimensione di rendering dell'immagine di sfondo. La chiave per l'adattamento Retina: dopo aver generato uno sprite da sorgenti 2x, usa background-size: 32px auto nel CSS per tornare a 1x e mantenere nitidi gli schermi 1x e 2x.
Layout a griglia: La modalità griglia di questo strumento calcola automaticamente il numero di colonne come radice quadrata del numero di icone (arrotondata per eccesso) e dispone le icone riga per riga in un quadrato. Nove icone diventano una griglia 3x3.
Padding (spazio tra icone): Lo spazio in pixel tra sotto-immagini adiacenti in uno sprite. Sono consigliati 1-5 px per evitare lo sconfinamento dei pixel del bordo. Il padding vive nello sprite, mentre il CSS usa solo le coordinate precise.
Trasparenza PNG: Il PNG supporta un canale alfa, quindi le icone possono avere sfondi trasparenti. L'output dello sprite mantiene il formato PNG, dunque le icone trasparenti restano trasparenti dopo l'unione.
Multiplexing HTTP/2: HTTP/2 elabora più richieste in parallelo su una singola connessione, riducendo parte del vantaggio dello sprite. HTTP/2 resta però indietro rispetto a uno sprite combinato per configurazione CDN, compatibilità con vecchi browser e compressione gzip.
SVG symbol: L'elemento <symbol> di SVG con riferimenti <use>. Tutte le icone vivono in un unico file SVG e il CSS controlla fill, stroke e animazione. La prima scelta per sostituire lo sprite nei progetti moderni.
DPR (Device Pixel Ratio): Il rapporto tra pixel fisici e pixel CSS. Gli schermi Retina hanno DPR = 2, quindi un'icona CSS 16x16 richiede 32x32 pixel fisici. Il DPR è il parametro centrale per adattare gli sprite agli schermi Retina.

Confronto tra i layout dello sprite

Layout	Regola di disposizione	Uso tipico
Orizzontale	Icone disposte da sinistra a destra su una sola riga	Barre di navigazione, tab, toolbar orizzontali
Verticale	Icone impilate dall'alto in basso su una sola colonna	Menu verticali, prefissi di elenco, strutture top-down
Griglia	Icone disposte automaticamente in una matrice quadrata in base al numero	Uso generico, scelta predefinita migliore con conteggi sconosciuti

Valori di padding consigliati per gli sprite

Padding (px)	Ideale per	Note
`0px`	Bordi puliti, icone con padding trasparente integrato	Massima compattezza; i pixel del bordo possono sforare
`1-2px`	Icone di alta qualità con margine di sicurezza minimo	Consigliato: bilancia compattezza e stabilità
`3-5px`	Icone standard con ombre o contorni	Distanza sicura, standard del settore
`6-10px`	Icone con dimensioni molto diverse o con contorni	Evita che le icone grandi coprano quelle piccole
`10-50px`	Debug o raggruppamento visivo	Sconsigliato in produzione

Riferimento adattamento sprite Retina 2x

DPR dello schermo	Dimensione CSS	Dimensione file sorgente	background-size
`1x`	`16x16`	`16x16`	`auto`
`2x`	`16x16`	`32x32`	`32px auto`
`3x`	`16x16`	`48x48`	`48px auto`
`2x`	`24x24`	`48x48`	`48px auto`

Authoritative References

ReferenceMDN - CSS background-position
ReferenceMDN - Implementare gli sprite di immagini in CSS
ReferenceMDN - background-size
ReferenceMDN - SVG <symbol> e <use>
ReferenceWeb.dev - Sostituisci le immagini con i CSS sprite
ReferenceWikipedia - Sprite (grafica)