Generator sprite sheetów CSS

Jak zrobić sprite sheet

1. Upuść obrazy na pole albo kliknij je, aby je wybrać. Akceptowane są PNG, SVG, WebP, JPG i inne formaty, które potrafi odczytać twoja przeglądarka – do 500 obrazów. Każdy plik pojawia się na liście Obrazy wraz z wymiarami; przycisk × usuwa pojedynczy obraz, a Usuń wszystkie obrazy czyści listę.
2. Wybierz Układ: Siatka, Upakowany (najmniejszy arkusz), Pasek poziomy lub Pasek pionowy. Przy Siatka opcja Kolumny (0 = automatycznie) ustala liczbę kolumn.
3. Ustaw Odstęp (px) między sprite’ami (domyślnie 2) i zaznacz Rozmiar będący potęgą dwójki (256, 512, 1024…), jeśli wymaga tego twój silnik lub GPU.
4. Wybierz Plik danych: CSS (klasy z background-position), JSON (mapa klatek) lub CSS i JSON. Dostosuj Nazwa pliku i Prefiks klas CSS (domyślnie oba to „sprite”).
5. Sprawdź podgląd, Rozmiar arkusza i Wykorzystane miejsce, a potem kliknij Pobierz ZIP (PNG + dane) lub Pobierz tylko PNG. Wygenerowany kod można też skopiować bezpośrednio.

Obrazy są dekodowane w twojej przeglądarce i nic nie jest przesyłane. Plik SVG bez własnej szerokości i wysokości jest rasteryzowany tak, że jego dłuższy bok ma 256 px.

Wybór układu

• Siatka daje każdemu obrazowi komórkę o rozmiarze największego obrazu. Przy automatycznej liczbie kolumn siatka jest mniej więcej kwadratowa. To układ prosty i przewidywalny, idealny, gdy wszystkie sprite’y mają ten sam rozmiar, np. w zestawie kafelków.
• Upakowany (najmniejszy arkusz) stosuje pakowanie półkowe: obrazy są sortowane od najwyższego i układane od lewej do prawej w rzędach. Narzędzie sprawdza wiele szerokości arkusza i wybiera tę o najmniejszej powierzchni, uwzględniając zaokrąglanie do potęgi dwójki, gdy ta opcja jest włączona. Najlepszy do ikon o różnych rozmiarach.
• Pasek poziomy i Pasek pionowy umieszczają obrazy w jednym wierszu lub jednej kolumnie w kolejności dodania. Tego oczekuje wiele odtwarzaczy animacji dla klatek.

Arkusz nie może przekroczyć 16 384 px na bok ani około 16,7 megapiksela – to limit tego, co potrafią narysować przeglądarki.

Jak używać CSS

Plik CSS zawiera klasę bazową z arkuszem jako background-image i no-repeat, a potem po jednej klasie na każdy sprite, nazwanej od pliku: home.png staje się sprite-home. Nazwy są zamieniane na małe litery, znaki diakrytyczne usuwane, inne znaki zamieniane na myślniki, a duplikaty dostają -2, -3.

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

Każda klasa sprite’a ustawia width, height i background-position z ujemnymi przesunięciami. Sprite w punkcie x = 40, y = 20 dostaje background-position: -40px -20px: cały arkusz jest przesuwany wewnątrz elementu o 40 px w lewo i 20 px w górę, więc przez obszar elementu widać tylko ten sprite. Odstęp zapobiega przenikaniu sąsiednich sprite’ów przy powiększeniu strony lub filtrowaniu tekstury.

Ekrany o wysokiej gęstości pikseli: narysuj obrazy w dwukrotnie większym rozmiarze niż wyświetlany, wygeneruj arkusz, a potem dodaj do klasy bazowej background-size równe połowie rozmiaru arkusza i podziel na pół szerokości, wysokości i przesunięcia. Narzędzie tego nie generuje – to ręczna poprawka.

Czy sprite’y mają sens przy HTTP/2?

Sprite’y wymyślono, żeby oszczędzać żądania HTTP. Dzięki multipleksowaniu w HTTP/2 wiele małych plików ładuje się prawie tak szybko jak jeden, więc zysk dla stron internetowych jest dużo mniejszy, a do skalowalnych ikon często lepsze są ikony SVG lub fonty z ikonami. Sprite sheety pozostają za to standardem w grach 2D i klatkach animacji: jedna tekstura oznacza mniej przełączeń tekstur na GPU i jeden plik do wczytania.