Генератор CSS-спрайтов
Бесплатный онлайн генератор CSS-спрайтов
Что такое CSS-спрайт?
CSS-спрайт объединяет несколько мелких изображений в один файл. background-position отображает отдельные иконки. Уменьшает количество HTTP-запросов.
Как создать CSS-спрайт
Загрузите изображения, выберите раскладку. Инструмент создаст спрайт-лист и CSS с background-position.
▶Актуальны ли CSS-спрайты?
С HTTP/2 польза уменьшилась, но спрайты помогают при множестве мелких иконок.
▶Какая раскладка лучше?
Горизонтальная — для малого числа. Сеточная — для множества одинаковых иконок. Вертикальная — для одинаковой ширины.
▶Как использовать CSS?
Примените сгенерированные классы к HTML-элементам. CSS задаёт background-image и background-position.