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