Generator obrazów typu CSS Sprite
Bezpłatny online generator obrazów typu CSS Sprite
Co to jest CSS Sprite?
CSS sprite laczy wiele malych obrazow w pojedynczy plik obrazu (sprite sheet). CSS background-position jest nastepnie uzywany do wyswietlania poszczegolnych obrazow z polaczonego pliku. To zmniejsza liczbe zadan HTTP, poprawiajac wydajnosc ladowania strony.
Jak stworzyc CSS Sprite
Przeslij wiele obrazow. Wybierz uklad (poziomy, pionowy lub siatke). Narzedzie laczy je w pojedynczy sprite sheet i generuje CSS z wartosciami background-position dla kazdego obrazu.
▶Czy CSS sprite sa nadal przydatne?
Dzieki multipleksowaniu HTTP/2 korzysc wydajnosciowa sprite'ow zmniejszyla sie. Jednak sprite'y nadal pomagaja przy serwowaniu wielu malych ikon lub przy systemach ikon wymagajacych buforowania w jednym pliku.
▶Jaki uklad jest najlepszy dla sprite'ow?
Uklad poziomy jest kompaktowy dla malo obrazow. Uklad siatki sprawdza sie dobrze dla wielu ikon podobnego rozmiaru. Uklad pionowy jest przydatny, gdy wszystkie obrazy maja te sama szerokosc.
▶Jak uzywac wygenerowanego CSS?
CSS uzywa background-image na sprite sheet i background-position dla kazdej ikony. Zastosuj wygenerowane klasy do swoich elementow HTML.
Jeśli ten tool był dla ciebie przydatny, pomyśl o tym, aby kupić mi kawę.
Kup mi kawę.