Спрайт это Современный веб одним из приоритетов ставит скорость и оптимизацию сайтов.

 Так одним из методов оптимизации является использование на сайте изображений называемых спрайтами.

  Что такое спрайт, когда, зачем и как их используют, я постараюсь вам объяснить в этой записи.

 


Спрайт это

Спрайт — это одно изображение, которое объединяет в себе два и более изображений.

Пример спрайта:

спрайт соцсетей

  Основная идея использование спрайтов - это сократить количество запросов к серверу, тем самым уменьшив время загрузки страницы сайта. А уже при помощи CSS можно вывести любой фрагмент из спрайта в нужном нам месте. При этом размер у объединённого изображения (у спрайта) будет меньше, чем сумма размеров исходных картинок.

  Если мы рассмотрим спрайт который я привёл выше в качестве примера, то он состоит из 60-ти иконок. Всего одним запросом спрайт загружается в браузер вместо 60-ти (если загружать каждую иконку по отдельности), а при помощи CSS мы можем вывести любую из иконок входящую в спрайт в нужном нам месте, при чём можем выводит одну и ту же иконку много раз.


Использование спрайтов

 Думаю всем понятно, что веб-страница содержащая много изображений, будет загружаться долго, генерируя при этом много запросов к серверу. Использование спрайтов уменьшает количество запросов серверу, в результате снижая время загрузки страницы сайта и сокращая потребляемый пользователем трафик.

  Спрайты можно использовать в самых разных местах, но наиболее распространённые случаи когда через спрайт выводят иконки для пунктов меню, разные кнопки и соцсети. Так же спрайты можно использовать в анимациях, играх и ещё много где.

  Как пример на этом сайте можно посмотреть форум, где иконки разделов форума это и есть кусочки одного изображения спрайта.


Как работают спрайты

  Спрайты работают напрямую через CSS.

  Чтобы вывести изображение из спрайта, нужно задать к элементу в HTML class и в CSS задать этому классу стили.

Обязательные для спрайтов стили CSS :

background: url() -   задаём путь к изображению (спрайту)

background-position - координаты выводимого фрагмента из спрайта

width и height - задаём размер (ширину и высоту) выводимого фрагмента

 


Пример вывода иконок из спрайта

   Я возьму спрайт который был выше в примере и сделаю из него меню. Чтобы не липить шестьдесят пунктов меню, возьму пять пунктов, иконки которых будут из разных участков спрайта.

 

 Итак, создаём меню у которого HTML следующего вида:

<ul>
	<li>Гугл</li>
	<li>Вордпресс</li>
	<li>Инстаграмм</li>
	<li>Ютуб</li>
	<li>Фотогалерея</li>
</ul>

 

Получится следующий результат:

  • Гугл
  • Вордпресс
  • Инстаграмм
  • Ютуб
  • Фотогалерея

  Теперь добавим к каждому из пунктов класc.  В примере я специально назову класс длинным названием demoSpIcon, чтобы у меня в основных стилях сайта такое название больше никогда не вылезло, вы же можете называть классы как вам удобно:

<ul>
	<li class="demoSpIcon">Гугл</li>
	<li class="demoSpIcon">Вордпресс</li>
	<li class="demoSpIcon">Инстаграмм</li>
	<li class="demoSpIcon">Ютуб</li>
	<li class="demoSpIcon">Фотогалерея</li>
</ul>

 

 Для заданного класса demoSpIcon пропишем CSS стили, где:

  • сразу к имени класса добавим псевдокласс ::before
  • бекграундом зададим ссылку на спрайт который выложен выше как примером
  • размер я подобрал в консоле браузера, он равен 38px в длину и ширину

Прописываем стили:

.demoSpIcon::before {
	content: '';
	display: inline-block;
	width: 38px;
	height: 38px;
	background: url(https://inter-net.pro/images/css/sprajt-demo.jpg);
	vertical-align: middle;
}

 

 Получим результат:

  • Гугл
  • Вордпресс
  • Инстаграмм
  • Ютуб
  • Фотогалерея

   Как видно, возле пунктов появилась иконка, но у всех одна и не соответствует названию пунктов меню.

Всё дело в том, что их спрайта был взят фрагмент с нулевыми координатами и поэтому вывелась первая верхняя иконка.

 Так как в спрайте все иконки из набора одинаковые по размеру, мы прописали через CSS для класса demoSpIcon те стили, которые будут повторятся для каждой иконки.


Теперь через пробел добавим к каждому пункту по классу с индивидуальным названием, к которым зададим координаты на спрайте:

<ul>
	<li class="demoSpIcon sprajtGoogle">Гугл</li>
	<li class="demoSpIcon sprajtWordpress">Вордпресс</li>
	<li class="demoSpIcon sprajtInstagramm">Инстаграмм</li>
	<li class="demoSpIcon sprajtYoutube">Ютуб</li>
	<li class="demoSpIcon sprajtFotogallery">Фотогалерея</li>
</ul>

 

и добавим стили с соответствующими координатами иконок:

.demoSpIcon::before {
	content: '';
	display: inline-block;
	width: 38px;
	height: 38px;
	background: url(https://inter-net.pro/images/css/sprajt-demo.jpg);
	vertical-align: middle;
}
.sprajtGoogle::before {background-position: 0px -112px;}
.sprajtWordpress::before {background-position: -41px -38px;}
.sprajtInstagramm::before {background-position: -328px -38px;}
.sprajtYoutube::before {background-position: -246px 0px}
.sprajtFotogallery::before {background-position: -451px -148px;}

 

Результат

  • Гугл
  • Вордпресс
  • Инстаграмм
  • Ютуб
  • Фотогалерея

 Как видим теперь возле пунктов отображаются нужные иконки из спрайта.

Дальше можем делать всё что захотим. Например, чтобы теперь сделать из нашего вертикального меню горизонтальное, мы к тегу ul добавим класс horizont и в CSS пропишем для него стили.

Получится следующий HTML макет:

<ul class="horizont">
	<li class="demoSpIcon sprajtGoogle">Гугл</li>
	<li class="demoSpIcon sprajtWordpress">Вордпресс</li>
	<li class="demoSpIcon sprajtInstagramm">Инстаграмм</li>
	<li class="demoSpIcon sprajtYoutube">Ютуб</li>
	<li class="demoSpIcon sprajtFotogallery">Фотогалерея</li>
</ul>

 

А стили CSS теперь будут выглядеть так:

.horizont li {
    display: inline-block;
    border: solid 1px #888;
    padding: 2px 10px 2px 2px;
    border-radius: 4px;
    cursor: pointer;
}
.horizont li:hover {
    background: #3e5d75;
    color: #fff;
}
.demoSpIcon::before {
	content: '';
	display: inline-block;
	width: 38px;
	height: 38px;
	background: url(https://inter-net.pro/images/css/sprajt-demo.jpg);
	vertical-align: middle;
}
.sprajtGoogle::before {background-position: 0px -112px;}
.sprajtWordpress::before {background-position: -41px -38px;}
.sprajtInstagramm::before {background-position: -328px -38px;}
.sprajtYoutube::before {background-position: -246px 0px;}
.sprajtFotogallery::before {background-position: -451px -148px;}

 

Результат:

  • Гугл
  • Вордпресс
  • Инстаграмм
  • Ютуб
  • Фотогалерея

Как видим - получилось горизонтальное меню.

Единственное что я упустил - это ссылки на пунктах меню. Я их не ставил чтобы они не мешали. Чтобы добавить ссылки, переделываем конструкцию на пунктах меню вот так:

<li><a class="demoSpIcon sprajtGoogle" href="https://google.com">Гугл</a></li>

 


Координаты спрайта

  Координаты спрайта подбираются через консоль браузера. Для этого наводим курсор мышки на пункт меню где нужно определить координаты и жмём правую кнопку мышки.

  В меню выбираем Исследовать элемент (браузер мазила) или Просмотреть код (в гугл-хром).

 В консоле в поле HTML-кода выделяем псевдокласс ::before после чего в поле со стилями видим наш CSS класс отвечающий за вывод координат (background-position). Подбираем координаты - выделяем координату и стрелками вверх/вниз на клавиатуре ищем нашу иконку.

  Обратите внимание что для спрайтов принято брать минусовые значения координат. После того как координаты нашли, копируем и вставляем их в CSS

Опредиление координат в спрайте


Анимация из спрайта

Так же спрайты используют для анимации.

Например возьмём вот такую картинку-спрайт, которая состоит из шести фрагментов

спрайт для анимации идущего человечка

 

Теперь в HTML вставим div с айдишником marsch

<div id="marsch"></div>

 

и пропишем следующие CSS стили:

#marsch {
  width:112px;
  height:156px;
  margin:auto;  
  background:url(https://inter-net.pro/images/css/sprite-marsch.png) repeat-x;
  animation:walk .8s steps(6) infinite;
}
@keyframes walk {
  0% { background-position:0 } 
  100% { background-position:-672px }
}

 

  То в результате получим вот такого идущего человечка: