Generatore di sprite CSS (unire icone in un’immagine)
Scegli le icone (PNG, SVG, WebP o JPG). Il nome di ogni file diventa il nome della classe nel CSS.
Come si usaPiù icone in un solo file
Disponibile in: 
Generatore di sprite CSS (unire icone in un’immagine): a cosa serve
Uno sprite unisce più icone in una sola immagine e il CSS mostra la parte giusta in ogni punto con background-position. Il browser fa una richiesta invece di dieci e le icone hover non lampeggiano.
Scegli le icone, la disposizione (griglia, riga o colonna), lo spazio tra loro e il formato. Scarica lo sprite e copia il CSS con una classe per icona (il nome del file diventa il nome della classe), larghezza, altezza e posizione. L’opzione retina mostra a metà le icone create al doppio della dimensione, nitide sugli schermi ad alta densità.
Come si usa
- Scegli le icone.
- Regola disposizione, spazio e formato.
- Scarica lo sprite e copia il CSS.
Quando usarlo
- Icone dei social con hover.
- Bandiere e badge.
- Sprite di giochi in HTML.
Domande frequenti
A cosa serve uno sprite?
Invece di scaricare dieci icone separate, il browser scarica una sola immagine e il CSS mostra la parte giusta in ogni punto con background-position. Questo riduce il numero di richieste al server ed evita icone che lampeggiano al passaggio del mouse, perché lo stato di hover è già caricato.
Vale ancora la pena usare gli sprite con HTTP/2?
Con HTTP/2 il costo di molti file piccoli è calato parecchio, quindi il vantaggio è minore di un tempo. Gli sprite restano utili per set di icone hover, bandiere, badge e giochi in canvas, e per chi non può usare SVG inline.
Cos’è l’opzione retina?
Se le tue icone sono state create al doppio della dimensione con cui compaiono, seleziona l’opzione: il CSS mostra ciascuna a metà con background-size, e restano nitide sugli schermi ad alta densità, come quelli di smartphone e Mac.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.