Generator de sprite sheet CSS

Cum faci un sprite sheet

1. Trage imaginile în zona de plasare sau fă clic pe ea ca să le alegi. Se acceptă PNG, SVG, WebP, JPG și celelalte formate pe care le poate citi browserul, până la 500 de imagini. Fiecare fișier apare în lista Imagini cu dimensiunea lui; butonul × elimină o imagine, iar Elimină toate imaginile golește lista.
2. Alege un Aranjament: Grilă, Împachetat (cea mai mică foaie), Bandă orizontală sau Bandă verticală. La Grilă, Coloane (0 = automat) stabilește numărul de coloane.
3. Stabilește Spațiere (px) între sprite-uri (implicit 2) și bifează Dimensiune putere a lui doi (256, 512, 1024…) dacă motorul sau placa ta grafică o cere.
4. Alege Fișier de date: CSS (clase cu background-position), JSON (hartă de cadre) sau CSS și JSON. Ajustează Numele fișierului și Prefixul claselor CSS (ambele sunt „sprite” implicit).
5. Verifică previzualizarea, Dimensiunea foii și Spațiu folosit, apoi apasă Descarcă ZIP (PNG + date) sau Descarcă doar PNG. Cod generat poate fi copiat și direct.

Imaginile sunt decodate în browserul tău și nimic nu este încărcat pe un server. Un SVG fără lățime și înălțime proprii este rasterizat cu latura mai lungă de 256 px.

Alegerea aranjamentului

• Grilă dă fiecărei imagini o celulă de mărimea celei mai mari imagini. Cu coloane automate, grila este aproximativ pătrată. Este simplă și previzibilă, ideală când toate sprite-urile au aceeași dimensiune, ca la un set de plăci.
• Împachetat (cea mai mică foaie) folosește împachetarea pe rafturi: imaginile sunt sortate începând cu cea mai înaltă și așezate de la stânga la dreapta, pe rânduri. Instrumentul încearcă multe lățimi de foaie și o păstrează pe cea cu aria cea mai mică, ținând cont de rotunjirea la putere a lui doi când opțiunea este activă. Cel mai potrivit pentru pictograme de mărimi diferite.
• Bandă orizontală și Bandă verticală pun imaginile într-un singur rând sau într-o singură coloană, în ordinea în care le-ai adăugat. Asta așteaptă multe playere de animație pentru cadre.

Foaia nu poate depăși 16.384 px pe latură sau aproximativ 16,7 megapixeli, limita pe care o pot desena browserele.

Folosirea codului CSS

CSS-ul conține o clasă de bază, cu foaia ca background-image și no-repeat, apoi câte o clasă pentru fiecare sprite, numită după fișier: home.png devine sprite-home. Numele sunt scrise cu litere mici, diacriticele sunt eliminate, celelalte caractere devin cratime, iar duplicatele primesc -2, -3.

<link rel="stylesheet" href="sprite.css">
<span class="sprite sprite-home"></span>
<span class="sprite sprite-search"></span>

Fiecare clasă de sprite stabilește width, height și un background-position cu decalaje negative. Un sprite aflat la x = 40, y = 20 primește background-position: -40px -20px: toată foaia este deplasată cu 40 px la stânga și cu 20 px în sus în interiorul elementului, astfel încât doar acel sprite se vede prin caseta elementului. Spațierea împiedică sprite-urile vecine să se scurgă în imagine când pagina este mărită sau când o textură este filtrată.

Ecrane de înaltă densitate: desenează imaginile la de două ori dimensiunea de afișare, generează foaia, apoi adaugă în clasa de bază background-size setat la jumătate din dimensiunea foii și înjumătățește lățimile, înălțimile și decalajele. Instrumentul nu generează asta; este o ajustare manuală.

Mai sunt utile sprite-urile cu HTTP/2?

Sprite-urile au fost inventate ca să economisească cereri HTTP. Cu multiplexarea HTTP/2, multe fișiere mici se încarcă aproape la fel de repede ca unul singur, deci câștigul pentru site-uri este mult mai mic, iar pictogramele SVG sau fonturile de pictograme sunt adesea mai bune pentru pictograme scalabile. Sprite sheet-urile rămân standardul pentru jocurile 2D și pentru cadrele de animație: o singură textură înseamnă mai puține schimbări de textură pe placa grafică și un singur fișier de încărcat.