Generator sprite sheet

Combină mai multe imagini într-un singur sprite sheet cu cod CSS.

Distribuie:

Trage & Plasează imaginile aici

sau click pentru a încărca

De ce să folosiți acest instrument?

Funcții profesionale de generare sprite sheet

Reduce HTTP requests and speed up loading.

1

Aranjare automată eficientă

Algoritm inteligent de bin packing care aranjează imaginile compact, minimizând spațiul pierdut pe foaia sprite.

2

Cod CSS gata de producție

Generează clase CSS exacte cu background-position, dimensiuni și referințe corecte pentru fiecare icoană.

3

Suport dimensiuni multiple

Gestionează imagini de dimensiuni diferite pe aceeași foaie sprite, aranjându-le optim.

4

Spațiere personalizabilă

Definește spațierea între icoane pentru a preveni 'sângerarea' pixelilor la marginile elementelor.

5

Previzualizare vizuală

Vizualizează foaia sprite generată și verifică aranjamentul înainte de descărcare.

6

Procesare locală

Toate imaginile sunt procesate în browser. Asset-urile de brand nu părăsesc niciodată dispozitivul tău.

Ghid: Creează un sprite sheet profesional

Create sprites in minimal steps.

1

Încarcă icoanele

Trage toate imaginile individuale (icoane, steaguri, avatare) în zona de upload. Suportă PNG, JPG și WebP.

2

Configurează setările

Ajustează spațierea între elemente și prefixul numelui claselor CSS pentru integrare ușoară.

3

Generare automată

Instrumentul aranjează automat toate imaginile pe o singură foaie și calculează coordonatele CSS.

4

Previzualizează rezultatul

Verifică foaia sprite generată. Asigură-te că toate icoanele sunt vizibile și bine aranjate.

5

Copiază codul CSS

Revizuiește clasele CSS generate. Fiecare icoană are propria clasă cu coordonatele exacte.

FAQ sprite sheet: Întrebări frecvente

Ce este un sprite sheet?
O singură imagine care conține mai multe imagini mai mici (icoane, grafice) aranjate pe o grilă. CSS-ul 'decupează' fiecare element folosind background-position.
Mai sunt relevante sprite sheet-urile azi?
Da! Pentru imagini raster (fotografii mici, avatare, steaguri), sprite sheet-urile rămân eficiente pentru reducerea cererilor HTTP.
Câte imagini pot include?
Practic nelimitat, dar recomandăm păstrarea foii sprite sub 500KB pentru performanță optimă.
Ce dimensiuni pot avea imaginile?
Imaginile pot fi de dimensiuni diferite. Algoritmul de aranjare le organizează eficient indiferent de dimensiune.
Funcționează cu PNG-uri transparente?
Da! Transparența este păstrată perfect în foaia sprite rezultată.
Cum folosesc codul CSS generat?
Adaugă CSS-ul în stylesheet-ul tău. Folosește clasele generate pe elementele HTML (div sau span) care trebuie să afișeze icoanele.
Pot actualiza un sprite sheet existent?
Recomandăm regenerarea completă cu toate imaginile. Adăugarea la un sprite existent poate cauza probleme de coordonate.
Care este alternativa modernă?
SVG inline și font-uri de icoane sunt alternative populare, dar sprite sheet-urile rămân superioare pentru imagini raster.
Instrumentul este gratuit?
Da, complet gratuit și fără limite.
Datele mele sunt în siguranță?
Da. Toată procesarea se face local în browser.