Что же такое CSS Sprite? Это технология, позволяющая объединить множество небольших изображений в одно большое. Такой принцип позволяет делать к серверу всего один запрос, что сокращает время загрузки сайта.
Также есть и другое преимущество — если объединенные изображения похожи (по палитре), то вес итогового файла будет меньше, чем вес всех вместе взятых исходников.
Есть и бонус — таким образом, Вы загружаете изображения, которые могут понадобиться в будущем, что также влияет на комфорт работы с сайтом.
Как CSS Sprite может помочь в SEO?
CSS Спрайт, как и другие работы по оптимизации изображений, позволяет увеличить скорость загрузки Вашего ресурса. С точки зрения поисковой системы, идеальный сайт, кроме всего прочего, должен быстро загружаться на любых устройствах с любой скоростью Интернета. Достигнуть «идеальной» скорости загрузки невозможно, но сделать ее хорошей можно и нужно. CSS Sprite поможет Вам в этом.
Как использовать данную технологию, пошагово описано ниже.
Как работать с css sprite?
На первый взгляд может показаться, что это достаточно сложный и запутанный способ вывода изображений, но на самом деле, все довольно просто. Все делится на 2 простых шага.
Шаг 1 — собираем все изображения в одно
Основным принципом работы css sprite является вывод изображения как фона (background), а никак картинки (img) . Именно поэтому, данная технология применяется, в основном, при работе с дизайном сайта и мелкими изображениями.
К примеру, нам необходимо вывести иконку социальной сети ВКонтакте так, что бы при наведении курсора, логотип становился цветным. Это возможно сделать при помощи 2-х изображений:
цветной версии логотипа
и черно-белой версии логотипа
А возможно при помощи одного с применением технологии css sprite.
Объединить все необходимые изображения в одно Вы можете вручную, если изображений не так много, а можете при помощи многочисленных онлайн-сервисов. К примеру, http://seo-tols.com/tools/cssspritesgen/
Особой разницы, как Вы будите объединять картинки, нет, главное, что бы итоговое изображение имело минимальный вес и размер.
Шаг 2 — выводим изображения как фон
Для начала прописываем сам HTML код для нашей иконки социальной сети ВКонтакте.
<div class="soc-seti">
<a href="/" target="blank"><div class="vk"></div></a>
</div>
Тут все просто. Имеется слой «vk», который и будет нашим изображением, а также ссылка для перехода на соц. сеть.
Самое интересное происходит в стилях.
.vk{
background: url('vkontakte.png');
width: 50px;
height: 50px;
background-position: 0 0px;
}
.vk:hover {
background: url('vkontakte.png');
width: 50px;
height: 50px;
background-position: 0 -50px;
}
Тут мы видим, что логотип VK выводится не через тэг img, а через background. Таким образом, в классе .vk, у нас задается слой размером 50х50 пикселей (точные размеры одной картинки-логотипа ВК) с логотипом на фоне. Обратите внимание, что позиция слоя background-position: 0 0px;
При наведении же (класс .vk:hover) позиция фона смещается на 50px, как раз туда, где у нас размещен цветной логотип.
Использование такой технологии оправдано для большого количества небольших изображений.