Привет всем! Продолжаем рассматривать оптимизацию наших сайтов. На этот раз мы рассмотрим CSS спрайты и как с ними необходимо работать. Для начала давайте разберемся, что вообще представляют из себя CSS спрайты, зачем они необходимы и как они помогут нам в работе, то есть ускорить сайт.
Что такое CSS спрайты и для чего они необходимы
Самым основным преимуществом использования CSS спрайтов является то, что они позволяют сократить количество http-запросов к серверу. Любое подключение на Вашем сайте: картинки, css-файла, js-файла и другое – это запрос к серверу.
Поэтому, если мы сможем сократить количество запросов к самому серверу (хостингу), то мы сможем увеличить скорость загрузки Вашего ресурса. Таким образом:
CSS спрайт (CSS sprite) – это такая технология, которая позволяет объединять множество мелких графических изображений в один файл. А вызов необходимо элемента (изображения) происходит уже при помощи CSS, определение идет по координатам мыши.
Тут все понятно, мы объединяем множество графических файлов в один. Это можно сделать вручную. Но это не самая главная проблема, так как нам необходимо будет еще определить координаты фрагмента изображения, который будет входить в наше целое и конечное изображение.
Для этих целей мы можем использовать профессиональные графические редакторы, но лучше всего пойти более простым путем и воспользоваться множеством графических элементов.
Как можно сделать CSS спрайт
Для этих целей нам понадобится генератор CSS спрайтов. В сети Интернет таких инструментов масса, поэтому мы воспользуемся одним из них – .
Что касается меня, то для примера я буду использовать иконки социальных сетей, которые размещены в верхнем правой углу сайта:
Изображения у нас готовы, теперь нам необходимо перейти на онлайн генератор спрайтов (ссылка размещена чуть выше). По умолчанию сервис нам предлагает объединить только 3 изображения, но если у Вас больше, то Вам стоит нажать на кнопку Need more? и добавиться еще 3 формы для загрузки изображения (данную операцию Вы можете производить до бесконечности).
Так же не забывайте про настройки, где Вы можете выбрать положение Вашего спрайта, отступы, а также цвет заливки. Настройки могут быть следующими:
- Необходимо выставить отступы между элементами, то есть картинками. Это иногда приходится делать, чтобы при масштабировании не залазили друг на друга. Да и для дизайна иногда полезно такое делать.
- Толщина рамки между объектами. Это необходимо делать тогда, когда визуально их необходимо разделить.
- Выравнивание объектов. Если иконки имеют определенный статический размер, то в принципе тут без разницы, что Вы установите.
- Цвет фона. Так как у моих икон иконок имеется свой фон, то я выбрал прозрачный
После того, как все настройки будут выставлены, то Вам необходимо нажать на кнопку GENERATE! В итоге система Вам предложит скачать готовый спрайт (изображение) и предложит их позиционирование, а Вам придется просто вставить CSS и подключить к своему сайту.
Чтобы скачать спрайт, Вам необходимо нажать на кнопку Download Sprite PNG, после чего задать свое имя файлу, я задал social.png, вот какой у меня получился спрайт:
То есть – это цельная картинка. Теперь нам остается только это все подключить. Система координаты мне выдала, поэтому я приступаю, у меня получился следующий код:
<!DOCTYPE html>
<>
<>
<>
#social{position:relative;}
#social li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#social li, #navlist a{height:32px;display:block;}
#email{left:0px;width:32px;}
#email{background:url('social.png') 0 0;}
#facebook{left:42px;width:32px;}
#facebook{background:url('social.png') -42px 0;}
#vk{left:84px;width:32px;}
#vk{background:url('social.png') -84px 0;}
#twitter{left:126px;width:32px;}
#twitter{background:url('social.png') -126px 0;}
#gplus{left:168px;width:32px;}
#gplus{background:url('social.png') -168px 0;}
#f-f{left:210px;width:32px;}
#f-f{background:url('social.png') -210px 0;}
#rss{left:252px;width:32px;}
#rss{background:url('social.png') -252px 0;}
</>
</>
<>
< id="social">
< rel="nofollow" href="#1">< id="email"></></>
< rel="nofollow" href="#2">< id="facebook"></></>
< rel="nofollow" href="#3">< id="vk"></></>
< rel="nofollow" href="#4">< id="twitter"></></>
< rel="nofollow" href="#5">< id="gplus"></></>
< rel="nofollow" href="#6">< id="f-f"></></>
< rel="nofollow" href="#7">< id="rss"></></>
</>
</>
</>Подводя к каждой картинки, у Вас будет появляться различная ссылка, но картинка будет одна, то есть у нас один спрайт. В итоге, когда пользователь будет загружать Вашу страницу, будет происходить не 7-мь http-запросов к серверу для получения картинок, а всего один. Пример Вы можете посмотреть по следующей ссылке.
Я пока что его реализовал как пример, но на следующей неделе я уже полностью реализую на своем сайте спрайт и в дальнейшем постараюсь использовать только их для оптимизации и ускорения сайта.
Притом, использование спрайтов хорошо тем, что Вы сможете довести свой дизайн до нужного вида. То есть, изображения не будут расплываться на Вашем сайте. Очень удобная вещь, советую ребята. В ближайшее время окончательно переведу это на свой сайт.
Также советуем почитать на PressDev.RU
Короткая ссылка: http://pressdev.ru/?p=3735
Loading...
У вас стоит плагин wp-postratings вот его звезды бы на спрайты перевести, наскольоко это реально?
/wp-postratings/images/stars/rating_half.gif
/wp-postratings/images/stars/rating_off.gif
/wp-postratings/images/stars/rating_on.gif
/wp-postratings/images/stars/rating_over.gif