Generator sprite'ów CSS

Kliknij, aby przesłać obraz

Obsługiwane formaty: PNG, JPG, WebP

Układ

Odstępy Obrazu: 10px

050

Prześlij obraz, aby zobaczyć podgląd sprite

Łącz wiele małych ikon w arkusz sprite'ów CSS online. Lokalne przetwarzanie w przeglądarce bez wysyłania na serwer, a CSS z background-position jest generowany automatycznie dla układów poziomego, pionowego i siatki.

Powiązane Rekomendacje

Generator ICO

Kompresja obrazów

Konwersja obrazów

Zmiana rozmiaru obrazu

Przycinanie obrazów

Obracanie i Odbijanie Zdjęć

Czym jest sprite CSS (CSS Sprite)?

Sprite CSS to technika łączenia wielu małych obrazów w jeden duży, w którym poszczególne ikony wyświetla się przez background-position. Słowo «sprite» pochodzi z wczesnych konsol do gier, gdzie wiele klatek animacji pakowano w jeden duży obraz i szybko przełączano. Frontend WWW zapożyczył ten pomysł, by jednym żądaniem ładować wiele małych ikon na stronie.

**Dlaczego sprite'y są potrzebne?** W epoce HTTP/1.1 każdy plik graficzny generował osobne żądanie HTTP z uzgadnianiem TCP, TLS i narzutem nagłówków. Sto ikon to sto żądań. Sprite umieszcza wszystkie ikony w jednym obrazie i kończy ładowanie jednym żądaniem, znacząco przyspieszając pierwsze renderowanie. Multiplexing HTTP/2 zmniejsza część tej przewagi, ale sprite wciąż pomaga w cache CDN, kompresji gzip i kompatybilności z HTTP/1.1.

**Podstawowa zasada:** Wyobraź sobie sprite 200×60 z trzema ikonami 60×60 obok siebie. Aby pokazać pierwszą, ustaw elementowi 60×60: `background: url(sprite.png); background-position: 0 0;`. Dla drugiej użyj -60px 0, dla trzeciej — -120px 0. Nasze narzędzie generuje te współrzędne automatycznie.

**Nowoczesne alternatywy:** SVG + use/symbol (zalecane, wektor, zmienny kolor, animacja), Icon Font (szeroka kompatybilność, wieloplatformowość), HTTP/2 Server Push, ikony web font. Każde rozwiązanie ma swoje zastosowania — wybierz na podstawie realnych potrzeb projektu.

Przypadki użycia

Projekt webowy z wieloma małymi ikonami, które trzeba połączyć w sprite'a, by zmniejszyć liczbę żądań HTTP i przyspieszyć pierwsze renderowanie
Frontend chce scentralizować zarządzanie ikonami projektu i automatycznie generować kod CSS background-position
Zespół chce wygenerować sprite i kod CSS jednorazowo i przekazać je gotowe do integracji
Po połączeniu przepuść obraz przez [narzędzie kompresji](/image/compress/), by zmniejszyć całkowity rozmiar i poprawić wskaźnik LCP
Aplikacja, Electron lub klient desktopowy, w którym statyczne ikony należy spakować do jednego pliku w ramach buildu
Szablony HTML e-mail lub statyczne blogi, w których potrzeba wielu ikon z uwzględnieniem kompatybilności z klientami pocztowymi
Projektant dostarcza ikony w formie sprite'a, by frontendowiec mógł szybko zintegrować je z projektem
Odrębny sprite 2x dla ekranów Retina, adaptowany do wyświetlaczy 1x i 2x za pomocą background-size

Jak Używać

Kliknij obszar przesyłania lub przeciągnij kilka obrazów (obsługiwane JPG, PNG, WebP, GIF i inne)
Zmień kolejność ikon na liście po lewej za pomocą uchwytu lub przycisków góra/dół
Wybierz w panelu po lewej układ «Poziomo», «Pionowo» lub «Siatka»
Dostosuj odstęp pikseli między ikonami suwakiem (zalecane 1–5 px)
Podejrzyj sprite'a na żywo po prawej, a następnie kliknij «Pobierz», by zapisać PNG, i «Kopiuj», by przenieść kod CSS do projektu

Funkcje

Łączenie jednym kliknięciem: prześlij kilka małych ikon lub obrazów i otrzymaj pojedynczego sprite'a automatycznie
Trzy tryby układu: poziomy, pionowy i siatka — dowolne przełączanie pod różne scenariusze
Regulowany odstęp: suwak 0–50 px pozwala elastycznie kontrolować odległość między ikonami
Sortowanie przeciąganiem: przeciągnij ikony na liście, by zmienić kolejność łączenia, współrzędne CSS aktualizują się automatycznie
Sortowanie mobilne: przyciski góra/dół do zmiany kolejności, wygodne także w mobilnej przeglądarce
Automatyczne generowanie CSS: dla każdej ikony generowane są background-position, szerokość i wysokość
Podgląd na żywo: sprite przebudowuje się natychmiast po każdej zmianie obrazu lub parametru
Kopiowanie CSS jednym kliknięciem: wbudowany przycisk kopiuje pełny arkusz stylów do schowka
Pobieranie PNG jednym kliknięciem: połączony obraz zapisuje się lokalnie ze stałą nazwą sprite.png
Lokalne przetwarzanie w przeglądarce: łączenie przez Canvas API bez wysyłania plików na serwer
Obsługa wielu formatów: JPG, PNG, WebP, GIF i inne popularne formaty graficzne
Zachowanie przezroczystości: wynikowy PNG zachowuje kanał alfa oryginalnych ikon, wygodne do składania

Best Practices

Adaptacja Retina 2x: używaj źródeł 2x

Jeśli Twoi użytkownicy korzystają z ekranów Retina (Mac, iPhone, HiDPI Windows), prześlij źródła w rozdzielczości 2x (np. ikony 32×32) i złóż z nich sprite'a, a w CSS użyj background-size: 32px auto, aby pomniejszyć do 16×16. Dzięki temu ekrany 1x i 2x będą ostre po jednej kompilacji, a całość zadziała na wszystkich urządzeniach.

Sprite'y wciąż mają wartość w projektach HTTP/2

Multiplexing HTTP/2 łagodzi problem liczby żądań, ale sprite'y wygrywają w czterech scenariuszach: ponowne użycie cache CDN, wysoki stopień kompresji gzip/Brotli, przechodzenie przez proxy intranetowe oraz kompatybilność z HTTP/1.1. Sieci korporacyjne, systemy rządowe i bankowe oraz szablony HTML e-mail wciąż bazują na HTTP/1.1, gdzie sprite jest niezastąpiony.

PNG-8 vs PNG-24: ikony w PNG-8, gradienty w PNG-24

Narzędzie wypluwa PNG, ale głębię bitową źródła dobierasz sam. Płaskie lub jednokolorowe ikony lepiej trzymać w PNG-8 (bezstratna przezroczystość, 60–80% mniejsze niż PNG-24). Ikony z gradientami, cieniami i rozjaśnieniami potrzebują PNG-24. Narzędzie akceptuje każdy format, więc najpierw zoptymalizuj źródła kompresorem PNG.

Strategia cache CDN: dodaj hash do nazwy pliku

Nie zostawiaj sprite'a ze stałą nazwą sprite.png. Zmień nazwę na bazie hasha treści (np. sprite.a3f2b1.png) i ustaw Cache-Control: max-age=31536000 dla stałego cache. Przeglądarka pobierze plik tylko raz, kolejne wizyty idą z lokalnego cache, co oszczędza więcej ruchu niż sam HTTP/2. Nasze narzędzie zapisuje plik jako sprite.png, więc po pobraniu zmień nazwę ręcznie.

Kompresja gzip / Brotli zmniejsza sprite'a jeszcze bardziej

Połączony obraz ma większą ciągłość pikseli, więc gzip/Brotli kompresują go znacznie lepiej niż rozproszone małe pliki. Nginx + gzip na poziomie 1 zmniejsza sprite'a o 60–80%, Brotli o ponad 85%. Przy włączonym Content-Encoding 1 MB sprite'a realnie przesyła się jako 200–300 KB — to najbardziej niedoceniana zaleta sprite'ów.

CSS Modules / Vue scoped: owijaj klasy w :global()

Jeśli projekt korzysta z CSS Modules lub Vue scoped CSS, nazwy klas .icon-home i .sprite z narzędzia zostaną zlokalizowane hashem i przestaną działać. Owiń wspólne klasy w :global(.sprite) { ... } w pliku .module.css i podłączaj je poza blokiem scoped. Alternatywnie: zrezygnuj z CSS Modules i trzymaj się konwencji nazewnictwa BEM.

Mieszaj z Icon Font: kluczowe ikony w czcionce, złożone w sprite

Najstabilniejsze w produkcji jest podejście mieszane. Uniwersalne ikony UI (ustawienia, zamknij, szukaj, użytkownik) twórz w Icon Font (zmienny kolor, wektor, wieloplatformowość). Złożone kolorowe ikony (loga produktów, banery) trzymaj w sprite. Wykorzystujesz wtedy mocne strony obu podejść i unikasz kosztów utrzymania jednego wariantu.

W projektach inżynierskich używaj spritesmith, w prototypach naszego narzędzia

W długowiecznych projektach podepnij spritesmith (Webpack) lub gulp.spritesmith do potoku budowania: zmiany w źródłach automatycznie przebudowują sprite'a, generują plik z hashem w nazwie i tworzą zmienne SCSS/LESS. Nasze narzędzie sprawdza się do szybkich prototypów i małych dostaw bez zależności, a w potokach CI/CD lepiej działają wtyczki budujące.

Nowoczesne projekty mogą przejść ze sprite'a na SVG symbol

Jeśli projekt wspiera nowoczesne przeglądarki (Chrome / Safari / Firefox / Edge, a także IE 11+), warto rozważyć migrację ze sprite'a na SVG symbol: jeden plik zarządza wszystkimi ikonami, CSS kontroluje kolor i animację, nie trzeba utrzymywać współrzędnych background-position. Sprite z naszego narzędzia zostaje jednorazowym zasobem i nadaje się jako rozwiązanie przejściowe.

Często Zadawane Pytania

Czym jest sprite CSS i dlaczego łączyć obrazy w jeden?

Sprite CSS to technika łączenia wielu małych obrazów w jeden duży i wyświetlania pojedynczych ikon przez background-position. Po połączeniu wszystkie ikony ładują się jednym żądaniem HTTP, co znacząco zmniejsza liczbę żądań i przyspiesza pierwsze renderowanie w porównaniu z ładowaniem dziesiątek osobnych plików. To klasyczny sposób optymalizacji frontendu.

Jak połączyć wiele ikon w sprite'a online?

Prześlij obrazy, a narzędzie automatycznie połączy je w wybranym układzie z podglądem na żywo. Jednocześnie po prawej stronie generowany jest kod CSS background-position (z szerokością i wysokością) dla każdej ikony, gotowy do wklejenia do arkusza stylów. Gotowy sprite zapisywany jest w formacie PNG i można go pobrać jednym kliknięciem.

Jak użyć wygenerowanego kodu CSS?

Umieść sprite.png w katalogu projektu (np. /img/sprite.png) i wklej kod CSS do arkusza stylów. Dodaj klasę .sprite oraz pasującą klasę .icon-xxx do elementu, który ma wyświetlać ikonę, np.: <i class="sprite icon-home"></i>. Nazwy klas generowane są automatycznie na podstawie oryginalnych nazw plików.

Jakie tryby układu są obsługiwane?

Trzy tryby: poziomy (ikony w jednym rzędzie od lewej do prawej), pionowy (ikony w jednej kolumnie od góry do dołu) oraz siatka (ikony automatycznie układane w macierz kwadratową, liczba kolumn to pierwiastek kwadratowy zaokrąglony w górę). Tryby przełączasz w panelu po lewej stronie, by zobaczyć podgląd.

Czy mogę regulować odstęp między ikonami?

Tak. W panelu po lewej stronie jest suwak odstępu od 0 do 50 px, zalecane 1–5 px. Rozsądny odstęp zapobiega zakłóceniom skrajnych pikseli podczas pozycjonowania w CSS, ale nie wpływa na końcowe użycie — odstęp znajduje się wewnątrz sprite'a, a w CSS używane są dokładne współrzędne background-position.

Czy mogę zmienić kolejność ikon?

Tak. Każdy element na liście po lewej stronie można przeciągać myszą za uchwyt, a na urządzeniach mobilnych kolejność zmienia się przyciskami góra/dół. Po zmianie sprite jest przebudowywany w nowej kolejności, a współrzędne CSS aktualizowane automatycznie.

Jakie formaty obrazów są obsługiwane?

Obsługiwane są wszystkie popularne formaty: JPG, PNG, WebP, GIF i inne. Wyjściem zawsze jest PNG (z zachowaniem przezroczystości). Dla ikon zalecany jest format PNG — przezroczyste tło prawidłowo zachowuje się po złączeniu w sprite.

Czy sprite'y są nadal potrzebne w nowoczesnych projektach?

Po upowszechnieniu HTTP/2 multiplexing zmniejszył część przewagi sprite'ów, ale wciąż dają korzyści w postaci cache CDN, kompresji gzip i szybkiego ładowania kluczowych ikon na pierwszym ekranie. Jeśli masz mniej niż 10 ikon lub potrzebujesz koloru i animacji, lepiej przejść na SVG symbol lub Icon Font. Dla dużych zestawów statycznych ikon PNG sprite pozostaje stabilnym i niezawodnym rozwiązaniem.

Czy sprite rozmywa się na ekranach Retina? Jak to naprawić?

Może się rozmywać. Ekrany Retina (Mac, iPhone, HiDPI Windows) mają 2–3 razy więcej pikseli fizycznych niż pikseli CSS, więc zwykły sprite 1x rozciągany jest do 2x, przez co krawędzie wyglądają na rozmyte. Rozwiązanie: użyj źródeł 2x (32×32 zamiast 16×16) i w CSS wskaż background-size: 32px auto, pomniejszając sprite z powrotem do 16×16.

Czy łączenie ikon obniża jakość obrazu?

Jakość nie spada. Łączenie jedynie rozmieszcza obrazy w odpowiednich pozycjach dużego płótna. Nie zachodzi resampling, kompresja ani korekta kolorów. Wynikowy PNG zachowuje pierwotną jakość. Jeśli chcesz dodatkowo zmniejszyć plik, użyj naszego [narzędzia do kompresji obrazów](/image/compress/).

Czy obrazy sprite'a trafiają na serwer? Czy to bezpieczne?

Nie trafiają. Wszystkie operacje łączenia wykonywane są w Twojej lokalnej przeglądarce przez Canvas API. Pliki nie opuszczają urządzenia i są usuwane po przetworzeniu. Wewnętrzne ikony i niepublikowane logo możesz przetwarzać bez obaw.

Jak pobrać gotowego sprite'a?

Po przesłaniu obrazów narzędzie automatycznie generuje podgląd. Kliknij przycisk «Pobierz» po lewej, by zapisać sprite.png lokalnie. Kod CSS jest generowany automatycznie — przycisk «Kopiuj» przenosi go do schowka.

Czy mogę samodzielnie ustawić nazwy klas?

W bieżącej wersji nazwy klas generowane są automatycznie na podstawie oryginalnych nazw plików z prefiksem .icon-. Na przykład home.png staje się .icon-home. Używaj w nazwach plików łaciny, cyfr i myślników, by uzyskać czytelne klasy CSS.

Co wybrać: sprite, Icon Font czy SVG Symbol?

Zależy od scenariusza. Wiele statycznych ikon PNG lub potrzebna zgodność ze starym IE — sprite. Uniwersalne ikony UI wymagające zmiany koloru i wieloplatformowości — Icon Font. Nowoczesny projekt z kolorem, animacją i jednym plikiem — pierwszy wybór to SVG Symbol. W praktyce podejścia często się łączy: kluczowe ikony UI w Icon Font, złożone kolorowe w sprite.

Czy mogę dodatkowo zmniejszyć sprite'a narzędziem do kompresji?

Tak. Nasze narzędzie generuje PNG bezstratnie, więc plik może być duży. Zalecany przepływ: wygeneruj sprite'a tutaj, potem zmniejsz PNG lub przekonwertuj na JPG (gdy przezroczystość nie jest potrzebna) za pomocą [narzędzia do kompresji](/image/compress/), a w razie potrzeby zmień format na WebP przez [narzędzie konwersji](/image/convert/). Połączenie narzędzi maksymalnie przyspiesza ładowanie.

Słownik

Sprite CSS (CSS Sprite): Technika łączenia wielu małych obrazów w jeden duży, w którym poszczególne ikony wyświetla się przez background-position. Klasyczny sposób optymalizacji wydajności frontendu.
background-position: Właściwość CSS określająca początkową współrzędną obrazu tła. Sprite'y używają wartości ujemnych, by przesunąć tło w lewo lub w górę do wybranej ikony. Na przykład background-position: -60px 0 pokazuje ikonę z przesunięciem 60 px.
background-size: Właściwość CSS określająca rozmiar wyświetlanego obrazu tła. Klucz do adaptacji Retina: po wygenerowaniu sprite'a ze źródeł 2x użyj w CSS background-size: 32px auto, by wrócić do rozmiaru 1x — ekrany 1x i 2x pozostaną ostre.
Układ siatki (Grid Layout): Tryb siatki tego narzędzia automatycznie oblicza liczbę kolumn jako pierwiastek kwadratowy z liczby ikon (zaokrąglony w górę) i rozmieszcza ikony wierszami w kwadrat. Na przykład dziewięć ikon tworzy siatkę 3×3.
Odstęp ikon (Padding): Odstęp w pikselach między sąsiednimi podobrazami w sprite. Zalecane 1–5 px, by uniknąć zakłóceń skrajnych pikseli przy pozycjonowaniu w CSS. Odstęp znajduje się wewnątrz sprite'a, a w CSS używane są tylko dokładne współrzędne.
Kanał przezroczystości PNG: Format PNG obsługuje kanał alfa, dzięki czemu tło ikon może być przezroczyste. Sprite zachowuje format PNG, więc przezroczyste ikony prawidłowo wyświetlają się po połączeniu.
Multiplexing HTTP/2: Protokół HTTP/2 przetwarza wiele żądań równolegle w jednym połączeniu, co zmniejsza część przewagi sprite'ów. HTTP/2 wciąż jednak ustępuje połączonemu obrazowi w konfiguracji CDN, kompatybilności ze starszymi przeglądarkami i stopniu kompresji gzip.
SVG Symbol: Element <symbol> w SVG wraz z odwołaniami <use>: wszystkie ikony trafiają do jednego pliku SVG, a CSS steruje wypełnieniem, obwódką i animacją. Pierwszy zamiennik sprite'ów w nowoczesnych projektach.
DPR (współczynnik pikseli urządzenia): Device Pixel Ratio — stosunek pikseli fizycznych do pikseli CSS. Ekrany Retina mają DPR = 2, więc ikona 16×16 w CSS potrzebuje 32×32 pikseli fizycznych. DPR to kluczowy parametr adaptacji sprite'ów do ekranów Retina.

Porównanie trzech trybów układu sprite'a

Tryb układu	Reguła rozmieszczenia	Typowe zastosowanie
Poziomo	Ikony w jednym rzędzie od lewej do prawej	Nawigacja, przyciski Tab, poziome paski
Pionowo	Ikony w jednej kolumnie od góry do dołu	Menu pionowe, prefiksy list, struktury góra-dół
Siatka	Automatycznie w macierz kwadratową wg liczby ikon	Uniwersalne zastosowanie, najlepszy start przy nieznanej liczbie

Zalecane wartości odstępu Padding dla sprite'a

Odstęp (px)	Scenariusz	Zalecenie
`0px`	Czyste krawędzie ikon, mają własny przezroczysty padding	Maksymalna zwięzłość, możliwe zakłócenia na krawędziach
`1-2px`	Wysokiej jakości ikony, minimalny margines	Wartość zalecana, balans zwięzłości i stabilności
`3-5px`	Standardowe ikony z cieniem lub obwódką	Bezpieczna odległość, popularny wybór
`6-10px`	Duże różnice rozmiarów ikon, obwódki	Duże ikony nie zasłaniają małych
`10-50px`	Debugowanie, wizualne grupowanie	Tylko do podglądu, nie dla produkcji

Parametry adaptacji sprite'a 2x dla ekranów Retina

DPR ekranu	Rozmiar CSS	Rozmiar źródła	background-size
`1x`	`16×16`	`16×16`	`auto`
`2x`	`16×16`	`32×32`	`32px auto`
`3x`	`16×16`	`48×48`	`48px auto`
`2x`	`24×24`	`48×48`	`48px auto`

Authoritative References

ReferenceMDN - CSS background-position
ReferenceMDN - Implementacja sprite'ów w CSS
ReferenceMDN - background-size
ReferenceMDN - SVG <symbol> i <use>
ReferenceWeb.dev - Zastępowanie obrazów sprite'ami CSS
ReferenceWikipedia - Sprite (grafika komputerowa)