Генератор на CSS спрајт лист

Како да направите спрајт лист

1. Повлечете ги вашите слики во полето или кликнете на него за да ги изберете. Се прифаќаат PNG, SVG, WebP, JPG и другите формати што вашиот прелистувач може да ги чита, до 500 слики. Секоја датотека се појавува во листата Слики со својата големина; копчето × отстранува една слика, а Отстрани ги сите слики ја празни листата.
2. Изберете Распоред: Мрежа, Збиен (најмал лист), Хоризонтална лента или Вертикална лента. Со Мрежа, Колони (0 = автоматски) го поставува бројот на колони.
3. Поставете Растојание (px) меѓу спрајтовите (по стандард 2) и штиклирајте Големина степен на два (256, 512, 1024…) ако вашиот engine или GPU го бара тоа.
4. Изберете Датотека со податоци: CSS (класи со background-position), JSON (мапа на кадри) или CSS и JSON. Прилагодете го Име на датотеката и Префикс на CSS класите (двете по стандард „sprite“).
5. Проверете го прегледот, Големина на листот и Искористен простор, па кликнете Преземи ZIP (PNG + податоци) или Преземи само PNG. Генериран код може да се копира и директно.

Сликите се декодираат во вашиот прелистувач и ништо не се качува. SVG без своја ширина и висина се растеризира со подолгата страна од 256 px.

Избор на распоред

• Мрежа му дава на секоја слика ќелија со големина на најголемата слика. Со автоматски колони мрежата е приближно квадратна. Едноставна е и предвидлива, а идеална кога сите спрајтови се со иста големина, како збир од плочки.
• Збиен (најмал лист) користи пакување по полици: сликите се сортираат прво највисоките и се поставуваат од лево кон десно во редови. Алатката проба многу ширини на листот и ја задржува онаа со најмала површина, земајќи го предвид заокружувањето на степен на два кога таа опција е вклучена. Најдобро за икони со различни големини.
• Хоризонтална лента и Вертикална лента ги ставаат сликите во еден ред или колона по редоследот на додавање. Тоа го очекуваат многу плејери за анимации за кадрите.

Листот не може да надмине 16 384 px по страна или околу 16,7 мегапиксели, границата што прелистувачите можат да ја исцртаат.

Користење на CSS

CSS содржи основна класа со листот како background-image и no-repeat, а потоа по една класа за секој спрајт именувана според неговата датотека: home.png станува sprite-home. Имињата се со мали букви, акцентите се отстрануваат, другите знаци стануваат цртички, а дупликатите добиваат -2, -3.

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

Секоја класа на спрајт поставува width, height и background-position со негативни поместувања. Спрајт на x = 40, y = 20 добива background-position: -40px -20px: целиот лист се поместува 40 px лево и 20 px нагоре во елементот, па низ рамката на елементот се гледа само тој спрајт. Растојанието спречува соседните спрајтови да се прелеваат кога страницата е зголемена или текстурата е филтрирана.

Екрани со висока густина (high-DPI): нацртајте ги сликите на двојно од големината на прикажување, генерирајте го листот, па додајте background-size поставено на половина од големината на листот во основната класа и преполовете ги ширините, висините и поместувањата. Алатката не го генерира ова; тоа е рачно подесување.

Дали спрајтовите се уште се корисни со HTTP/2?

Спрајтовите беа измислени за да штедат HTTP барања. Со мултиплексирањето на HTTP/2, многу мали датотеки се вчитуваат речиси исто брзо како една, па добивката за веб-страници е многу помала, а SVG икони или фонтови со икони често се подобри за скалабилни икони. Спрајт листовите остануваат стандард за 2D игри и кадри за анимации: една текстура значи помалку префрлања на текстури во GPU и една датотека за вчитување.