W tym artykule
Czym są CSS Sprite Sheets
Arkusz sprite łączy wiele małych obrazów w jeden większy plik obrazu. Każdy pojedynczy obraz zajmuje zdefiniowany region w arkuszu. W tworzeniu stron internetowych CSS background-position jest używany do wyświetlania tylko tej części arkusza sprite, która jest potrzebna dla danego elementu, redukując zapytania HTTP i poprawiając wydajność ładowania strony.
Arkusze sprite były niezbędne we wczesnej optymalizacji wydajności stron, gdy każdy obraz wymagał oddzielnego zapytania HTTP. Nawet przy nowoczesnym multiplexingu HTTP/2, arkusze sprite pozostają wartościowe dla zestawów ikon, elementów interfejsu i animacji gier, gdzie dziesiątki małych obrazów są używane razem i korzystają z ładowania jako jeden plik w pamięci podręcznej.
Jak działa Sprite Sheet do Works
Prześlij wiele obrazów, wybierz kierunek układu i otrzymaj zarówno obraz arkusza sprite, jak i gotowy do użycia kod CSS.
- Przeslij obraz — przeciagnij i upusc lub kliknij, aby wybrac plik JPG, PNG lub WebP z urzadzenia
- Wybierz układ — wybierz pasek poziomy, pasek pionowy lub układ siatkowy i skonfiguruj odstępy między sprite'ami
- Pobierz wynik — podglad efektu i eksport przetworzonego obrazu
Wypróbuj za darmo — bez rejestracji
Otwórz narzędzie Sprite Sheet do →Kiedy używać Sprite Sheets
Arkusze sprite optymalizują dostarczanie zasobów i upraszczają procesy animacji.
- Wydajność stron — łącz zestawy ikon i elementów interfejsu w jeden arkusz sprite, aby zmniejszyć liczbę zapytań o obrazy, szczególnie korzystne dla stron z wieloma małymi ikonami
- Tworzenie gier — pakuj klatki animacji do arkuszy sprite do wydajnego renderowania w grach opartych na canvas lub animacjach CSS, gdzie sekwencyjne klatki są dostępne przez przesunięcie pozycji tła
- E-mail i wsparcie legacy — twórz arkusze sprite do e-maili HTML i starszych środowisk, gdzie nowoczesne techniki ładowania obrazów nie są dostępne
Czesto zadawane pytania
Jaki układ wybrać?
Paski poziome sprawdzają się dobrze przy klatkach animacji odtwarzanych sekwencyjnie. Paski pionowe są odpowiednie dla menu i ikon nawigacji. Układ siatkowy jest najbardziej efektywny przestrzennie dla dużych zestawów ikon. Narzędzie generuje prawidłowe wartości CSS background-position dla wybranego układu.
Czy narzędzie generuje kod CSS?
Tak. Narzędzie automatycznie generuje kod CSS z dokładnym przesunięciem background-position dla każdego sprite'a w arkuszu. Możesz skopiować CSS bezpośrednio do swojego arkusza stylów i użyć dostarczonych nazw klas do wyświetlania poszczególnych sprite'ów.
Czy przetwarzanie odbywa sie na serwerze?
Nie. Cale przetwarzanie odbywa sie lokalnie w przegladarce za pomoca Canvas API. Obraz nigdy nie opuszcza urzadzenia, co gwarantuje pelna prywatnosc bez ograniczen rozmiaru pliku ani czasu oczekiwania.