DevToolPal
IT

Generatore di sprite CSS

Unisci le icone in un unico sprite sheet PNG e ottieni le classi CSS con background-position per ogni immagine.

Eseguito in locale, mai caricato

Opzioni

Immagini sorgente

Immagini (0)

Aggiungi immagini PNG, SVG, GIF o JPG. Non viene caricato nulla.

Sprite

CSS

Cosa fa questo strumento

Il generatore di sprite CSS unisce un insieme di icone o piccole immagini in un unico sprite sheet e scrive il CSS per mostrarle una per una. Aggiungi file PNG, SVG, GIF o JPG, scegli come disporli e scarica il PNG dello sprite insieme a un foglio di stile con una classe per ogni immagine.

I nomi delle classi derivano dai nomi dei file: Home Icon.png diventa .icon-home-icon e ai nomi duplicati viene aggiunto un numero. Il layout Compatto usa il bin packing per sistemare immagini di dimensioni diverse nel foglio più piccolo possibile; Verticale, Orizzontale e Griglia danno posizioni prevedibili.

Come si usa

  1. Premi Aggiungi immagini… e seleziona le tue icone (oppure parti dal set di esempio).
  2. Scegli un Layout e una Spaziatura. Un po’ di spaziatura evita che le icone vicine sconfinino l’una nell’altra quando il browser le ridimensiona.
  3. Imposta il Prefisso classi e il Nome file sprite usato in background-image.
  4. Scegli @2x se le immagini sono disegnate a dimensione doppia per gli schermi retina.
  5. Premi Scarica PNG e Scarica CSS (oppure Copia immagine per incollare lo sprite in uno strumento di design o in una chat), carica entrambi i file sul sito e usa le classi: <span class="icon icon-home"></span>.

Esempio

.icon {
  display: inline-block;
  background-image: url("sprite.png");
  background-repeat: no-repeat;
}

.icon-home {
  width: 32px;
  height: 32px;
  background-position: 0 0;
}

Suggerimenti

  • Tieni nello stesso sprite le icone che cambiano insieme: rigenerare il foglio cambia tutte le posizioni.
  • Per icone monocromatiche che devono cambiare colore via CSS, un icon font SVG o un SVG inline possono essere una scelta migliore.

Domande frequenti

› Cos'è uno sprite CSS?

Un'unica immagine che contiene tante immagini piccole. Ogni icona viene mostrata assegnando lo sprite come sfondo di un elemento e spostandolo con background-position, così la pagina fa una sola richiesta invece di decine.

› Gli sprite servono ancora con HTTP/2?

Meno di prima, ma aiutano ancora con molte icone minuscole, template email, giochi e progetti legacy, ed evitano l'effetto delle icone che compaiono una alla volta.

› Cosa fa l'opzione @2x?

Se le immagini sorgente sono disegnate al doppio della dimensione di visualizzazione, il CSS dimezza larghezze, altezze e posizioni e aggiunge background-size, così le icone restano nitide sugli schermi ad alta densità.

› Le mie immagini vengono caricate?

No. Lo sprite viene disegnato nel browser con un canvas e il CSS viene generato in locale.