Seryjny generator sprite'ów CSS
Połącz wiele ikon lub obrazów w jeden plik, aby zmniejszyć liczbę żądań HTTP i zwiększyć szybkość swojej strony internetowej. Automatycznie generuj idealny kod CSS.
Upuść ikony tutaj, aby wygenerować sprite'y
Obsługuje formaty PNG, JPG, WebP, AVIF. Łącz wiele obrazów w jedną arkusz CSS Sprite.
Wypróbuj na przykładach
Załadowana galeria
Sprite Studio
Podgląd Arkusza Sprite'ów
Poszczególne ikony
| Ikona | Nazwa klasy | Pozycja | Rozmiar | Akcja |
|---|
Opcje duszka
Zastosuj wsadowo
Automatyczne ponowne generowanie przy zmianie
Profesjonalne generowanie CSS Sprites
Optymalizuj swoje zasoby internetowe, łącząc wiele małych obrazów w jedną arkusz sprite. Zmniejsz opóźnienia, oszczędzaj przepustowość i uprość swój przepływ pracy CSS.
Przyspiesz stronę
Mniej żądań HTTP oznacza szybsze ładowanie stron. Łącząc 50 ikon w jedną arkusz sprite, eliminujesz 49 podróży w obie strony do serwera.
Automatycznie Generowany CSS
Koniec ręcznego liczenia pikseli. Nasze narzędzie automatycznie oblicza pozycje tła i wymiary dla każdej ikony w arkuszu.
Inteligentne Układy
Wybierz między układami siatki pionowej, poziomej lub zoptymalizowanej. Dostosuj wypełnienie, aby zapobiec "przenikaniu" między ikonami podczas skalowania.
Jak stworzyć arkusz sprite'ów CSS
Prześlij swoje ikony
Przeciągnij i upuść wszystkie małe obrazy lub ikony, które chcesz połączyć. Obsługujemy PNG, JPG, WebP i AVIF.
Konfiguruj Ustawienia Sprite'ów
Wybierz styl układu, dostosuj wypełnienie i ustaw prefiks klasy CSS. Podgląd aktualizuje się natychmiast.
Eksportuj Sprite i CSS
Pobierz końcowy arkusz sprite i odpowiadający mu kod CSS jako plik ZIP. Po prostu skopiuj i wklej do swojego projektu.
Często zadawane pytania
Dlaczego powinienem używać CSS sprites?
Sprite'y CSS to klasyczna technika optymalizacji wydajności. Zmniejszają liczbę żądań HTTP, co jest szczególnie korzystne przy wolniejszych połączeniach lub na stronach z wieloma małymi zasobami, takimi jak ikony czy elementy interfejsu użytkownika.
Który układ powinienem wybrać?
Układy pionowe i poziome są najłatwiejsze do debugowania. Układ siatkowy jest najbardziej efektywny dla minimalizacji końcowego obszaru obrazu i rozmiaru pliku.
A co z ekranami wysokiej rozdzielczości (Retina)?
Możesz wygenerować arkusz sprite'ów z ikonami o podwójnym rozmiarze i użyć właściwości "background-size" w CSS, aby je zmniejszyć, uzyskując ostre renderowanie na wyświetlaczach o wysokiej gęstości pikseli.