Как сделать спрайт в CSS
Спрайты в CSS помогают объединить несколько изображений в одно, чтобы ускорить загрузку страниц. Это позволяет уменьшить количество HTTP-запросов, что особенно важно для сайтов с большим количеством графики.
В статье вы узнаете, как создать спрайт, правильно его подключить и использовать для эффективной работы с изображениями в веб-разработке. Мы рассмотрим практические примеры и полезные советы для улучшения производительности вашего сайта.
Введение
Вместо загрузки шести изображений теперь загружалось бы одно. В этом преимущество CSS спрайтов.
В большинстве веб-страниц используется несколько маленьких изображений. Фоновые изображения, стрелочки, иконки, пункты меню и т.д. Эти крошечные изображения действительно имеют значение, если рассматривать их влияние на скорость загрузки страницы.
Каждое изображение должно быть загружено. Браузер должен запросить на сервере изображение, сервер отправить его, а затем браузер должен его отобразить. Если бы дело касалось одного-двух изображений, особых проблем бы не возникло. Но так как рисунков загружается намного больше - это негативно сказывается на скорости загрузки страницы.
Решение – использование спрайтов, которые в одном изображении сочетают несколько маленьких, поэтому веб-страницы можно загружать значительно быстрее.
Как объединить изображения в спрайт
Существует два основных этапа создания CSS спрайтов. Сначала вы должны создать изображение и затем поместить его.
Объединение изображений
Предположим, у нас есть два изображения, которые мы хотим объединить в одно целое. Чтобы создать спрайт, мы должны знать размер изображений. Мы будем рассматривать пример, в котором оба изображения имеют одинаковый размер (50 на 50 пикселей):
Чтобы объединить их, нам нужно создать изображение размером 100 на 50 пикселей. Давайте назовем его "sprite.png". Теперь, когда у нас есть объединенное изображение, мы можем использовать информацию о нем для правильного отображения на веб-странице.
Объединенное изображение имеет ширину 50 пикселей и высоту 100 пикселей. Таким образом, мы можем сказать, что первый рисунок (мегафон) расположен в верхних 50 пикселях нового изображения, а второй (смайлик) - в нижних 50 пикселях изображения. Мы будем показывать верхнюю половину изображения, когда нужно вывести мегафон, и нижнюю половину, когда нужно вывести смайлик. Реализация создания спрайтов CSS:
Позиционирование изображения на странице
В этом примере мы будем использовать рисунки в качестве фоновых изображений, размещенных в элементах div. Мы создадим пустые теги div для отображения изображений. Если на нашей странице нам нужно вывести изображение мегафона, мы используем CSS-класс "megaphone":
.megaphone {width:50px; height:50px; background:url(images/sprite.png) 0 0px;}Приведенный выше код CSS указывает ширину и высоту изображения мегафона (50 на 50 пикселей), он также вызывает изображение "sprite.png", которое является объединенным. Часть кода "0 0px" отвечает за отображение спрайта. Указание начинать вывод изображения с "0 0px" означает, что оно должно отображаться с 0 пикселей по оси X и с 0 пикселей по оси Y. Это значит "начинать вывод изображения сверху" и "начинать вывод изображения слева".
Так как в CSS мы определили ширину и высоту изображения, то будут отображаться только 50 его верхних пикселей (где расположен мегафон). Таким образом, смайлик не будет виден вовсе. Теперь давайте выведем смайлик и посмотрим, как изменится код CSS спрайта. Мы создадим класс CSS под названием "smile":
.smile {width:50px; height:50px; background:url(images/sprite.png) 0 -50px;}Обратите внимание, что мы по-прежнему указываем те же ширину и высоту, вызываем то же изображение, но мы изменили эту часть: "0 -50px". Так мы указываем, что изображение должно начинаться на 50 пикселей ниже начальной точки координат (-50px). Потому что рисунок смайлика начинается не в начале, а на 50 пикселей вниз от верхней части объединенного изображения.
Теперь, когда CSS-код указан, мы можем вызвать div везде, где нам нужно вывести изображение. Там, где нужно вывести мегафон, мы размещаем пустой блок div с классом "megaphone":
<div class="megaphone"></div>Когда нужно вывести смайлик, мы размещаем div с классом "smile":
<div class="smile"></div>Таков основной принцип, как сделать спрайт CSS. Существует много способов реализовать это, и лучше выбрать тот, который больше подходит вам. В этой статье мы показали, как работают спрайты, но не рассмотрели их углубленно.
Комментарии