Creation
Генератор спрайт-листів
Об'єднайте кілька зображень у спрайт-лист з виведенням CSS, JSON та SCSS для розробників.
Your files stay on your device - processed locally via WebAssembly, never uploaded
Drop sprites (PNG, JPEG, WebP)
Drop multiple files at once. Add more anytime.
Embed this tool on your website
Copy this code to add the Генератор спрайт-листів to your site for free. It runs entirely in your visitors' browsers - no API key, no usage limits.
<iframe src="https://optipix.art/embed/sprite-sheet" width="100%" height="600" style="border:1px solid #e4e4e7;border-radius:8px;" title="Генератор спрайт-листів by OptiPix" loading="lazy"></iframe> <p style="font-size:12px">Free tool by <a href="https://optipix.art/sprite-sheet">OptiPix Генератор спрайт-листів</a></p>
❤️ Love this tool? Support our team.
No ads, no tracking, no limits. Tips keep 104 tools free for everyone.
Secure payment via Stripe · No account needed
About Генератор спрайт-листів
Last updated: May 2026
Генератор спрайт-листів OptiPix об'єднує кілька зображень в один оптимізований спрайт-лист з готовим до вставки CSS, координатами JSON та змінними SCSS. Виберіть макет: горизонтальна смуга, вертикальна смуга, сітка (з власним числом стовпців) або упакований (з використанням алгоритму пакування для мінімізації втраченого простору). Встановіть відступи між спрайтами, щоб запобігти розмиванню країв. Результатом є один спрайт-лист PNG плюс згенерований CSS для кожного спрайта ('.sprite-icon-home { background-position: -0px -0px; … }'), карта координат JSON та змінні SCSS. Підтримується масштабування Retina @1x та @2x. Кожен спрайт отримує ім'я вихідного файлу. Все працює локально - ваші зображення ніколи не покидають ваш пристрій. Створено для розробників ігор, веб-розробників, які використовують CSS-спрайти, та всіх, хто хоче об'єднати маленькі іконки в один мережевий запит.
How It Works
Кожне вхідне зображення завантажується в пам'ять; вибраний алгоритм компонування (смуга, сітка або пакування полиць) обчислює координати (x, y, w, h) для кожного спрайта; спрайт-лист візуалізується на полотні; CSS / JSON / SCSS генеруються з тієї ж карти координат.
Use Cases
- •Об'єднати іконки інтерфейсу в один спрайт-лист PNG + CSS
- •Створити атлас спрайтів для 2D-гри в Phaser або Pixi
- •Об'єднати іконки соціальних мереж в один CSS-спрайт для швидшого сайту
- •Упакувати кадри анімації персонажів в горизонтальну смугу
- •Створити спрайт-лист @2x, готовий для Retina, з вихідних зображень
You Might Also Like
If you find Генератор спрайт-листів useful, check out these related tools: Image Crop, Image Resizer, and Format Converter. All tools run entirely in your browser with no uploads or signups required.
Explore more: Browse all tools · Step-by-step guides · Tips & tutorials · Compare tools
Frequently Asked Questions
Який макет слід використовувати?
Що таке пакування (bin-packing)?
Чи можу я експортувати CSS / JSON / SCSS?
Навіщо використовувати спрайт-лист?
Чи завантажуються мої зображення?
Related Tools
Обрізання зображень
Обрізайте до будь-якого співвідношення сторін або форми - коло, серце, зірка, шестикутник - з обертанням та вирівнюванням.
Змінювач розміру зображень
Змінюйте розмір зображень для Instagram, Twitter, LinkedIn та інших.
Конвертер форматів
Конвертуйте зображення між JPEG, PNG, WebP та іншими.
Генератор Favicon
Генеруйте кожен розмір favicon + файл ICO + веб-маніфест з будь-якого зображення, тексту або емодзі.