Batch Generatore di Sprite CSS
Combina più icone o immagini in un singolo file per ridurre le richieste HTTP e aumentare la velocità del tuo sito web. Genera automaticamente il codice CSS perfetto.
Rilascia le icone qui per generare sprite
Supporta PNG, JPG, WebP, AVIF. Combina più immagini in un unico CSS Sprite Sheet.
Prova con esempi
Galleria caricata
Sprite Studio
Anteprima Sprite Sheet
Icone Individuali
| Icona | Nome della Classe | Posizione | Dimensione | Azione |
|---|
Opzioni Sprite
Applicazione in Batch
Rigenerazione Automatica alla Modifica
Generazione Professionale di Sprite CSS
Ottimizza le tue risorse web combinando più immagini piccole in un'unica sprite sheet. Riduci la latenza, risparmia larghezza di banda e semplifica il tuo flusso di lavoro CSS.
Aumenta la Velocità del Sito
Meno richieste HTTP significano caricamenti di pagina più veloci. Unendo 50 icone in un unico sprite sheet, si eliminano 49 round-trip al server.
CSS Generato Automaticamente
Niente più conteggio manuale dei pixel. Il nostro strumento calcola automaticamente posizioni e dimensioni dello sfondo per ogni icona nel tuo foglio.
Layout Intelligenti
Scegli tra layout a griglia verticale, orizzontale o ottimizzati. Regola il padding per prevenire la "sanguinatura" tra le icone durante il ridimensionamento.
Come Creare un CSS Sprite Sheet
Carica le tue icone
Trascina e rilascia tutte le piccole immagini o icone che vuoi unire. Supportiamo PNG, JPG, WebP e AVIF.
Configura Impostazioni Sprite
Scegli lo stile del layout, regola il padding e imposta il prefisso della tua classe CSS. L'anteprima si aggiorna istantaneamente.
Esporta Sprite e CSS
Scarica il foglio sprite finale e il codice CSS corrispondente come file ZIP. Basta copiare e incollare nel tuo progetto.
Domande Frequenti
Perché dovrei usare gli sprite CSS?
Gli sprite CSS sono una tecnica classica per le prestazioni. Riducono il numero di richieste HTTP, il che è particolarmente vantaggioso su connessioni più lente o su siti con molte risorse piccole come icone o elementi dell'interfaccia utente.
Quale layout dovrei scegliere?
I layout verticali e orizzontali sono i più semplici da correggere. Il layout a griglia è il più efficiente per ridurre al minimo l'area dell'immagine finale e la dimensione del file.
E per quanto riguarda gli schermi ad alta densità di pixel (Retina)?
Puoi generare un foglio sprite con icone a doppia dimensione e utilizzare "background-size" nel tuo CSS per ridurlo e ottenere un rendering nitido su display ad alta densità di pixel.