CSS спрайты

Да, вы уже наверняка слышали о них... но действительно ли вы понимаете, что они из себя представляют? Название немного сбивает с толку. CSS спрайты -- это не множество маленьких изображений, как вы могли бы подумать. На самом деле это одно большое изображение. Сама соль этой техники заключается в объединении множества маленьких изображений в одно большое.

• Фрай
• Лила
• Бендер
• Зольдберг
• Эми

«А нахрена это нам?» или «А что это нам даст?» -- возможно спросите вы. А вот ответьте мне на такой вопрос: что быстрее скачается с флешки: «полтыщи» картинок, старательно надерганых из интернет, суммарным объемом 1 гигабайт или те же «полтыщи» картинок, но одним архивом объемом в гиг? Поэкспериментируйте ;).

Ну да таки перейдем качественных рассуждений к количественным.

Список-меню без использования CSS спрайтов

Пример 1. Стили CSS

.list-item {top:30px; position:relative; font-weight:bold;}
#nav li {list-style: none;}
#nav li a {background:none no-repeat left center; display: block; height:85px; width:200px; padding-left:85px;}

#nav li a.fry {background-image:url('images/fry_bw.jpg')}
#nav li a.leela {background-image:url('images/leela_bw.jpg')}
#nav li a.bender {background-image:url('images/bender_bw.jpg')}
#nav li a.zoldberg {background-image:url('images/zoldberg_bw.jpg')}
#nav li a.amy {background-image:url('images/amy_bw.jpg')}

#nav li a:hover.fry {background-image:url('images/fry.jpg')}
#nav li a:hover.leela {background-image:url('images/leela.jpg')}
#nav li a:hover.bender {background-image:url('images/bender.jpg')}
#nav li a:hover.zoldberg {background-image:url('images/zoldberg.jpg')}
#nav li a:hover.amy {background-image:url('images/amy.jpg')}

Пример 1. Код HTML

<ul id="nav">
  <li><a class="fry" href="#fry"><div class="list-item">Фрай</div></a></li>
  <li><a class="leela" href="#leela"><div class="list-item">Лила</div></a></li>
  <li><a class="bender" href="#bender"><div class="list-item">Бендер</div></a></li>
  <li><a class="zoldberg" href="#zoldberg"><div class="list-item">Зольдберг</div></a></li>
  <li><a class="amy" href="#amy"><div class="list-item">Эми</div></a></li>
</ul>

Результат:

• Объём страницы: 1.45 Kb
• Запросов: 6
• Время загрузки: 0.181 s

Список-меню с использованием CSS спрайтов

Пример 2. Стили CSS

.list-item {left:10px; top:30px; position:relative; font-weight:bold;}
#nav li {list-style: none; clear:both; height:85px; width:200px;}
#nav li a {background:url('images/futurama.jpg') no-repeat; display: block; height:75px; width:75px; float:left;}

#nav li a.fry {background-position:0 0;}
#nav li a.leela {background-position:0 -75px;}
#nav li a.bender {background-position:0 -150px;}
#nav li a.zoldberg {background-position:0 -225px;}
#nav li a.amy {background-position:0 -300px;}

#nav li a:hover.fry {background-position:-75px 0;}
#nav li a:hover.leela {background-position:-75px -75px;}
#nav li a:hover.bender {background-position:-75px -150px;}
#nav li a:hover.zoldberg {background-position:-75px -225px;}
#nav li a:hover.amy {background-position:-75px -300px;}

Пример 2. Код HTML

<ul id="nav">
  <li><a class="fry" href="#fry"></a><span class="list-item">Фрай</span></li>
  <li><a class="leela" href="#leela"></a><span class="list-item">Лила</span></li>
  <li><a class="bender" href="#bender"></a><span class="list-item">Бендер</span></li>
  <li><a class="zoldberg" href="#zoldberg"></a><span class="list-item">Зольдберг</span></li>
  <li><a class="amy" href="#amy"></a><span class="list-item">Эми</span></li>
</ul>

Результат:

• Объём страницы: 1.40 Kb
• Запросов: 2
• Время загрузки: 0.137 s

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