Генератор CSS-спрайтів

Як створити спрайт-аркуш

1. Перетягніть зображення в зону завантаження або натисніть на неї, щоб вибрати файли. Приймаються PNG, SVG, WebP, JPG та інші формати, які може прочитати ваш браузер, до 500 зображень. Кожен файл з’являється в списку Зображення з його розміром; кнопка × видаляє одне зображення, а Видалити всі зображення очищає список.
2. Виберіть Розкладку: Сітка, Щільна (найменший аркуш), Горизонтальна смуга або Вертикальна смуга. У режимі Сітка поле Стовпці (0 = автоматично) задає кількість стовпців.
3. Задайте Відступ (px) між спрайтами (за замовчуванням 2) і позначте Розмір – степінь двійки (256, 512, 1024…), якщо цього потребує ваш рушій чи відеокарта.
4. Виберіть Файл даних: CSS (класи background-position), JSON (карта кадрів) або CSS і JSON. За потреби змініть Ім’я файлу та Префікс CSS-класів (за замовчуванням в обох випадках «sprite»).
5. Перевірте перегляд, Розмір аркуша та Використаний простір, потім натисніть Завантажити ZIP (PNG + дані) або Завантажити лише PNG. Згенерований код також можна скопіювати безпосередньо.

Зображення декодуються у вашому браузері, і нічого не завантажується на сервер. SVG без власних width і height растеризується так, що його довша сторона дорівнює 256 px.

Вибір розкладки

• Сітка дає кожному зображенню клітинку розміром із найбільше зображення. За автоматичної кількості стовпців сітка приблизно квадратна. Вона проста й передбачувана та ідеально підходить, коли всі спрайти однакового розміру, як-от набір тайлів.
• Щільна (найменший аркуш) використовує полицеве пакування: зображення сортуються від найвищого й розміщуються зліва направо рядами. Інструмент пробує багато ширин аркуша й залишає ту, що дає найменшу площу, враховуючи округлення до степеня двійки, якщо цей параметр увімкнено. Найкраща для іконок різних розмірів.
• Горизонтальна смуга і Вертикальна смуга розміщують зображення в один рядок чи стовпець у порядку, в якому ви їх додали. Саме цього очікують багато програвачів анімації для кадрів.

Аркуш не може перевищувати 16 384 px з кожного боку чи близько 16,7 мегапікселя – це межа, яку можуть намалювати браузери.

Використання CSS

CSS містить базовий клас, що задає аркуш як background-image з no-repeat, а потім по одному класу на кожен спрайт, названому за його файлом: home.png стає sprite-home. Імена переводяться в нижній регістр, діакритика прибирається, інші символи перетворюються на дефіси, а дублікати отримують -2, -3.

<link rel="stylesheet" href="sprite.css">
<span class="sprite sprite-home"></span>
<span class="sprite sprite-search"></span>

Кожен клас спрайта задає width, height і background-position із від’ємними зсувами. Спрайт у позиції x = 40, y = 20 отримує background-position: -40px -20px: весь аркуш зсувається всередині елемента на 40 px ліворуч і на 20 px угору, тож крізь рамку елемента видно лише цей спрайт. Відступ не дає сусіднім спрайтам просочуватися, коли сторінку масштабують або текстуру фільтрують.

Екрани з високою щільністю пікселів: малюйте зображення вдвічі більшими за розмір показу, згенеруйте аркуш, потім додайте до базового класу background-size зі значенням, що дорівнює половині розміру аркуша, і поділіть навпіл ширини, висоти та зсуви. Інструмент цього не генерує; це ручне доопрацювання.

Чи потрібні спрайти за HTTP/2?

Спрайти придумали, щоб заощаджувати HTTP-запити. За мультиплексування в HTTP/2 багато малих файлів завантажуються майже так само швидко, як один, тому виграш для вебсайтів значно менший, а SVG-іконки чи шрифти з іконками для масштабованих значків часто кращі. Спрайт-аркуші залишаються стандартом для 2D-ігор і кадрів анімації: одна текстура – менше перемикань текстур на відеокарті та один файл для завантаження.