04.10.2012, 23:49

CSS спрайты, что это?




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

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

Данный ниже пример показывает, как спрайт помог съэкономить на картинках около 170 килобайт и убрать порядка 80 лишних запросов к серверу.

Итак, дизайн сайта предполагал такое меню:



Как вы видите, около каждого пункта меню стоит своя иконка. Таких пунктов насчитывалось 78 штук и каждый со своей иконкой. И есть люди, которые пойдут обычным путем, нарежут 78 картинок и сделают меню такого вида:
Code
<ul>
  ...
  <li><a href="#"><img src="images/menu1.png" alt="" /> Холодильные машины</a></li>
  <li><a href="#"><img src="images/menu2.png" alt="" /> Выносной холод</a></li>
  <li><a href="#"><img src="images/menu3.png" alt="" /> Встроенный холод</a></li>
  ...
</ul>


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

Процесс создания спрайта заключается в составлении одной большой картинки из мелких. После небольшой работы в фотошопе, должен выйти такой спрайт:



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

В итоге, спрайт вышел весом 55кб в формате JPEG, т.к. png выдавал размеры более 100 кб. Сэкономлено около 170кб! И всё представлено одной картинкой!

Теперь настает второй не сложный, но муторный этап создания css спрайта.

Вместо тега img задаем какой-либо тег, например короткий тег <i>, делаем его блочным, задаем размеры, ставим на фон спрайт-картинку, и каждому тегу <i> задаем свое соответствующее смещение фона. Вышел примерно такой код:

Code
<style type="text/css">
  ul li i{
  display:block;
  width:45px;
  height:45px;
  background:url(images/sprite.jpg);
  }
</style>
   
<ul>
  ...
  <li><a href="#"><i style="background-position:0px 0px"></i> Холодильные машины</a></li>
  <li><a href="#"><i style="background-position:-45px 0px"></i> Выносной холод</a></li>
  <li><a href="#"><i style="background-position:-90px 0px"></i> Встроенный холод</a></li>
  ...
</ul>


Скорость загрузки сайта существенно возросла, убита куча ненужных запросов.
На этом все.

Источник/Автор: Неизвестен

Категория: HTML, CSS, JS, JQ | Добавил: sold93 (04.10.2012) Просмотров: 3781 | Рейтинг: 4.7/3
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]