Остановимся поподробнее на таком интересном инструменте, как css-спрайты. Многие опытные верстальщики и веб-мастера прекрасно знают о плюсах этой незамысловатой техники. Положительная сторона использования спрайтов в том, что значительно сокращается время загрузки страницы за счет уменьшения количества отдельных изображений. В современных стандартах верстки принято небольшие иконки и изображения тем группировать в специальный сборник изображений. Проще говоря, спрайт представляет из себя картинку, включающую в себя набор мелких картинок темы.
Таким образом, когда мы группируем мелкие изображения, мы сокращаем количество запросов к серверу. Наша страница подгружает только одну картинку вместо 30 маленьких. Это дает существенный выигрыш в скорости загрузки.
Вкратце: CSS Sprites - это средство объединения нескольких изображений в один файл для использования на сайте, чтобы существенно увеличить производительность. Понятие Sprite может показаться немного неправильным, учитывая, что вы создаете большое изображение, а не работает с маленькими.
Подводя итог: термин «спрайты» происходит из техники в компьютерной графике, чаще всего используемой в видеоиграх. Идея заключалась в том, чтобы сохранить изображение в память, а затем отображать только часть этого изображения, что было быстрее, чем при получение новых изображений.
CSS Sprites - это в значительной степени точная теория: получить изображение один раз, переместить фон и отобразить только его части. Это уменьшает накладные расходы при получении нескольких изображений.
Для создания спрайтов существует огромное количество сервисов на просторах интернета. Достаточно лишь набрать соответствующий запрос в поисковике. Если очень лень искать, вот несколько популярных ресурсов на эту тему. Генератор спрайтов toptal, генератор спрайтов spritebox, генератор спрайтов spritepad, генератор спрайтов inettools. Предположим, то вы нарезали свой шаблон, выбрали все маленькие иконки, создали из него спрайт, что же дальше?
Как использовать иконки из спрайта
Теперь разберем порядок действий при работе со спрайтом.
- Создадим общий класс, например, назовем его .sprite, фоном которого является данное изображение, которое создано при помощи генератора sprite.png. Этому же классу зададим высоту и ширину, которая будет высотой и шириной иконок спрайта, если они одинаковы по размеру.
- Для блоков, где нужно использовать данную иконку, задаем смещение фона на нужную величину с помощью css-свойства background-position. Подробнее о фонах в предыдущей статье.
Пример:
.sprite {
width: 30px;
height: 30px;
background: url("/assets/img/sprite.png");
}
.sprite-icon1 {
background-position: 0 -80px;
}