Генератор CSS-спрайта (объединение значков в одно изображение)

Генератор CSS-спрайта (объединение значков в одно изображение): для чего нужен

Спрайт объединяет несколько значков в одно изображение, а CSS показывает нужную часть в каждом месте через background-position. Браузер делает один запрос вместо десяти, а значки hover не мигают.

Выберите значки, расположение (сетка, строка или столбец), расстояние между ними и формат. Скачайте спрайт и скопируйте CSS с классом на каждый значок (имя файла становится именем класса), шириной, высотой и позицией. Опция retina показывает значки, сделанные вдвое больше, в половинном размере — чёткими на экранах высокой плотности.

Как пользоваться

1. Выберите значки.
2. Настройте расположение, отступы и формат.
3. Скачайте спрайт и скопируйте CSS.

Когда использовать

• Значки соцсетей с hover.
• Флаги и эмблемы.
• Спрайты для игр в HTML.

Частые вопросы

Для чего нужен спрайт?

Вместо того чтобы браузер загружал десять отдельных значков, он загружает одно изображение, а CSS показывает нужную часть в каждом месте через background-position. Это сокращает число запросов к серверу и не даёт значкам мигать при наведении мыши, потому что состояние hover уже загружено.

Стоит ли использовать спрайт при HTTP/2?

При HTTP/2 стоимость множества мелких файлов заметно снизилась, поэтому выгода меньше, чем раньше. Спрайты по-прежнему полезны для наборов значков с hover, флагов, значков-эмблем и игр на canvas, а также если нельзя использовать встроенный SVG.

Что такое опция retina?

Если ваши значки сделаны вдвое больше, чем отображаются, отметьте опцию: CSS покажет каждый вдвое меньшим через background-size, и они будут чёткими на экранах высокой плотности, например на телефонах и Mac.

Правда бесплатно?

Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.

Похожие инструменты