To narzędzie pozwala zautomatyzować proces generowania sprajtów CSS. Wystarczy podać mu plik ZIP zawierający 2 lub więcej obrazków (GIF, PNG lub JPG), a wygeneruje jeden duży obrazek i odpowiadające mu reguły CSS, pozwalające na wyświetlenie każdego sprajta z osobna.

Opcje

Narzędzie posiada opcje, które możesz konfigurować aby dostosować charakterystykę generowanego obrazka i arkusza styli CSS do specyfiki Twojej strony. Opcje te przedstawiają się następująco:

Zmiana rozmiaru obrazków źródłowych

Szerokość & Wysokość
Jeśli wysokość lub szerokość zostanie ustawiona na mniej niż 100%, obrazki źródłowe będą zmniejszone zanim zostaną sklejone w sprajta wyjściowego. Narzędzie nie pozwala ustalić wartości większej niż 100%, ponieważ powiększanie obrazków powoduje utratę jakości. Domyślną wartością dla szerokości i wysokości jest 100% (nie zmienia rozmiarów).

Duplikaty obrazków

Nie szukaj duplikatów
Jeśli znajdą się identyczne obrazki, i tak zostaną dla nich utworzone osobne reguły CSS.
Nie dołączaj duplikatów obrazków tylko połącz ich reguły CSS
Narzędzie porównuje sumy MD5 każdego obrazka żeby sprawdzić, które z nich się powtarzają w archiwum ZIP. Te powtarzające się nie są przetwarzane, a jedynie tworzona jest dla nich jedna zbiorcza reguła CSS.

Opcje Sprajta

Odstęp w poziomie
Determinuje poziome odstępy pomiędzy kolumnami obrazków w sprajcie wyjściowym. Wartość ta powinna być na tyle duża, aby uwzględnić błąd powtarzania tła przeglądarki Safari. Sugerujemy zostać przy wartości domyślnej.
Odstęp w pionie
Determinuje pionowe odstępy między sąsiednimi obrazkami. Wartość powinna być na tyle duża, aby uwzględniała większe wielkości czcionek użytkownika. Generalnie zalecamy projektować stronę tak, aby odwiedzający mogli zwiększyć rozmiar czcionki dwukrotnie, zanim zacznie pojawiać się następny obrazek w sekwencji sprajta.
Kolor tła
Ustawia kolor tła obrazka wyjściowego. Pole powinno zawierać 6 cyfrową wartość heksadecymalną. Jeśli pozostanie puste i format wyjściowy pliku zostanie ustawiony jako GIF lub PNG, to tło będzie przezroczyste.
Format wyjściowy
Obsługuje GIF, PNG i JPG. GIF i PNG mogą mieć przezroczyste tła. Wartość domyślna to PNG.
Liczba kolorów
Określa liczbę kolorów użytych w wyjściowym pliku, aby zredukować wielkość pliku. Ma zastosowanie do formatów PNG oraz GIF.
Jakość obrazka
Określa jakość obrazka wyjściowego (stopień kompresji) w procentach. Dotyczy tylko formatu JPEG.
Kompresuj obrazek programem OptiPNG
Kiedy zaznaczone, plik wyjściowy obrazka jest przetwarzany narzędziem OptiPNG, aby zredukować jego rozmiar. Często zmniejsza to rozmiar pliku o połowę. Ma zastosowanie tylko do obrazków PNG.

Opcje CSS

Przyrostek CSS
Każda reguła w CSS jest poprzedzana wpisanym tekstem. Można tutaj wpisać podstawowe selektory id i klas. Dozwolone są następujące znaki - a-z, 0-9, _, -, # i .
Wzorzec nazwy pliku
Może być tutaj użyte każde poprawne wyrażenie regularne. Obejmij zwykłymi nawiasami sekcję dopasowaną przez wyrażenie regularne, która będzie użyta jako nazwa podstawowa przy generowaniu nazw klas CSS.
Przedrostek Klasy
Wpisany tekst będzie doklejony z przodu każdej wygenerowanej nazwy klasy. Jest to ważne w przypadku gdy istnieje prawdopodobieństwo, że generowane nazwy klas mogą rozpoczynać się od cyfr. Prowadziłoby to powstawania nieprawidłowych (wg rekomendacji W3C) selektorów. Dozwolone są następujące znaki - a-z, 0-9, _ i -. Przedrostek nie może rozpoczynać się od cyfry.
Przyrostek CSS
Wpisany tekst zostanie dodany na koniec każdej reguły CSS. "Przyrostek CSS" dopuszcza stosowanie takich samych znaków jak "Przedrostek Klasy".