У цій статті
Що таке CSS Sprite Sheets
Спрайт-лист об'єднує кілька малих зображень в один більший файл зображення. Кожне окреме зображення займає визначену ділянку у листі. У веброзробці CSS background-position використовується для відображення лише потрібної частини спрайт-листа для кожного елемента, зменшуючи кількість HTTP-запитів та покращуючи швидкість завантаження сторінки.
Спрайт-листи були незамінними для ранньої оптимізації вебпродуктивності, коли кожне зображення потребувало окремого HTTP-запиту. Навіть із сучасним мультиплексуванням HTTP/2 спрайт-листи залишаються цінними для наборів іконок, елементів інтерфейсу та ігрових анімацій, де десятки малих зображень використовуються разом та виграють від завантаження як один кешований файл.
Як працює Sprite Sheet Works
Завантажте кілька зображень, оберіть напрямок макету та отримайте як спрайт-лист, так і готовий до використання CSS-код.
- Завантажте зображення — перетягніть або натисніть для вибору файлу JPG, PNG або WebP з вашого пристрою
- Оберіть макет — виберіть горизонтальну стрічку, вертикальну стрічку або сіткове розташування та налаштуйте відступи між спрайтами
- Завантажте результат — перегляньте ефект та експортуйте оброблене зображення
Спробуйте безкоштовно — реєстрація не потрібна
Відкрити інструмент Sprite Sheet →Коли використовувати Sprite Sheets
Спрайт-листи оптимізують доставку ресурсів та спрощують робочі процеси анімації.
- Вебпродуктивність — об'єднуйте набори іконок та елементи інтерфейсу в один спрайт-лист для зменшення кількості запитів зображень, особливо корисно для сайтів із багатьма малими іконками
- Розробка ігор — пакуйте кадри анімації у спрайт-листи для ефективного рендерингу в іграх на основі canvas або CSS-анімації, де послідовні кадри доступні шляхом зміщення позиції фону
- Email та підтримка застарілих систем — створюйте спрайт-листи для HTML-листів та застарілих середовищ, де сучасні техніки завантаження зображень недоступні
Поширені запитання
Який макет обрати?
Горизонтальні стрічки добре підходять для кадрів анімації, що відтворюються послідовно. Вертикальні стрічки підходять для меню та навігаційних іконок. Сітковий макет найбільш ефективний за простором для великих наборів іконок. Інструмент генерує правильні значення CSS background-position для будь-якого обраного макету.
Чи генерує інструмент CSS-код?
Так. Інструмент автоматично генерує CSS-код із точним зміщенням background-position для кожного спрайта у листі. Ви можете скопіювати CSS безпосередньо у свою таблицю стилів та використовувати надані імена класів для відображення окремих спрайтів.
Обробка відбувається на сервері?
Ні. Вся обробка виконується локально у вашому браузері за допомогою Canvas API. Ваше зображення ніколи не залишає ваш пристрій, що гарантує повну конфіденційність без обмежень розміру файлу або часу очікування.