Бесплатный онлайн-генератор CSS-спрайтов — объединяйте изображения и автоматически генерируйте CSS
Создавайте оптимизированные CSS-спрайты из нескольких изображений с помощью нашего бесплатного онлайн-генератора. Загрузите ваши иконки или изображения, выберите направление расположения (горизонтальное, вертикальное или сетка), задайте отступ и мгновенно получите объединённый спрайт и точный CSS-код с правильными background-position. CSS-спрайты уменьшают количество HTTP-запросов, объединяя множество маленьких изображений в одно, что ускоряет загрузку вашего сайта. Идеально для наборов иконок, элементов интерфейса и состояний кнопок. Вся обработка происходит локально в вашем браузере.
Загрузите несколько изображений (иконки, кнопки или элементы интерфейса) для объединения в один спрайт.
Выберите направление расположения (горизонтальное, вертикальное или сетка) и настройте отступ между изображениями.
Просмотрите спрайт, скопируйте сгенерированный CSS-код и скачайте изображение спрайта.
Советы по созданию CSS-спрайтов
- Используйте изображения примерно одинакового размера для лучшего результата. Большие различия в размерах могут сделать позиционирование менее предсказуемым.
- Сетка идеально подходит для наборов иконок с одинаковыми размерами. Горизонтальное расположение хорошо работает для состояний кнопок и элементов навигации.
- Сохраняйте отступ как минимум 2-4 пикселя между изображениями, чтобы избежать визуального наложения при использовании спрайта в продакшене.
Часто задаваемые вопросы — генератор CSS-спрайтов
Что такое CSS-спрайт?
CSS-спрайт — это один файл изображения, который объединяет несколько меньших изображений (иконки, кнопки и т.д.) в одно. Используя CSS background-position, вы отображаете только нужную часть спрайта. Это уменьшает количество HTTP-запросов и ускоряет загрузку страницы.
Генератор CSS-спрайтов бесплатный?
Да, полностью бесплатный. Без регистрации, скрытых платежей и водяных знаков. Вся обработка происходит локально в вашем браузере.
Какие форматы изображений поддерживаются?
Инструмент поддерживает все распространённые форматы, включая JPG, PNG, WebP, GIF, BMP, AVIF, SVG и другие. Для спрайтов рекомендуется PNG для сохранения прозрачности.
Как использовать сгенерированный CSS-код?
Скопируйте CSS-код и вставьте его в вашу таблицу стилей. Поместите скачанное изображение спрайта в папку assets вашего проекта и обновите путь к background-image URL в соответствии со структурой вашего проекта.
Какое расположение выбрать?
Горизонтальное расположение размещает изображения в ряд — идеально для состояний кнопок и элементов навигации. Вертикальное располагает их столбцом — отлично для выпадающих меню и списков. Сетка располагает их компактно — лучше всего для наборов иконок с одинаковыми размерами.
Поддерживает ли инструмент изображения с высоким DPI (Retina)?
Инструмент сохраняет исходные размеры ваших изображений. Для поддержки Retina загружайте изображения в 2× размере и используйте CSS background-size для масштабирования в вашей таблице стилей.
Можно ли изменить порядок изображений в спрайте?
Изображения располагаются в порядке их загрузки. Чтобы изменить порядок, удалите и загрузите их заново в нужном порядке.