In questo articolo
Cosa sono CSS Sprite Sheets
Uno sprite sheet combina piu immagini piccole in un unico file immagine piu grande. Ogni singola immagine occupa una regione definita all'interno del foglio. Nello sviluppo web, CSS background-position viene utilizzato per visualizzare solo la porzione dello sprite sheet necessaria per ogni elemento, riducendo le richieste HTTP e migliorando le prestazioni di caricamento della pagina.
Gli sprite sheet erano essenziali nelle prime ottimizzazioni delle prestazioni web quando ogni immagine richiedeva una richiesta HTTP separata. Anche con il multiplexing HTTP/2 moderno, gli sprite sheet rimangono preziosi per set di icone, elementi UI e animazioni di giochi dove decine di piccole immagini vengono utilizzate insieme e beneficiano del caricamento come singolo file memorizzato nella cache.
Come funziona Sprite Sheet di Works
Carica piu immagini, scegli una direzione di layout e ottieni sia l'immagine dello sprite sheet che il codice CSS pronto all'uso.
- Carica la tua immagine — trascina e rilascia o fai clic per selezionare un file JPG, PNG o WebP dal tuo dispositivo
- Scegli il layout — seleziona striscia orizzontale, striscia verticale o disposizione a griglia e configura la spaziatura tra gli sprite
- Scarica il risultato — visualizza l'anteprima dell'effetto ed esporta l'immagine elaborata
Prova gratuitamente — nessuna registrazione richiesta
Apri strumento Sprite Sheet di →Quando usare Sprite Sheets
Gli sprite sheet ottimizzano la distribuzione delle risorse e semplificano i flussi di lavoro delle animazioni.
- Prestazioni web — combina set di icone ed elementi UI in un unico sprite sheet per ridurre il numero di richieste di immagini, particolarmente vantaggioso per siti con molte icone piccole
- Sviluppo di giochi — impacchetta i fotogrammi delle animazioni in sprite sheet per un rendering efficiente in giochi basati su canvas o animati con CSS, dove i fotogrammi sequenziali vengono raggiunti tramite l'offset della posizione di sfondo
- Email e supporto legacy — crea sprite sheet per email HTML e ambienti legacy dove le tecniche moderne di caricamento immagini non sono disponibili
Domande frequenti
Quale layout dovrei scegliere?
Le strisce orizzontali funzionano bene per i fotogrammi delle animazioni che vengono riprodotti in sequenza. Le strisce verticali sono adatte per menu e icone di navigazione. Il layout a griglia e il piu efficiente in termini di spazio per grandi set di icone. Lo strumento genera i valori CSS background-position corretti per qualsiasi layout scelto.
Lo strumento genera codice CSS?
Si. Lo strumento genera automaticamente codice CSS con l'offset background-position esatto per ogni sprite nel foglio. Puoi copiare il CSS direttamente nel tuo foglio di stile e utilizzare i nomi delle classi forniti per visualizzare i singoli sprite.
L'elaborazione avviene su un server?
No. Tutta l'elaborazione avviene localmente nel tuo browser tramite l'API Canvas. La tua immagine non lascia mai il tuo dispositivo, garantendo totale privacy senza limiti di dimensione o tempi di attesa.