Бузочок

Как оказалось, css-спрайты за бугром — весьма распространённая фишка. А чем мы хуже? :) Мы, правда, далеко не так активно апробируем всяческие инновации. Даже такие полезные. Еле-еле перешли от табличной вёрстки к блочной, и то хорошо. Но планку надо поднимать, поэтому сегодня мы обсудим простую технику, которая изменит ваше представление о применении однотипной графики на сайте.

Спрайты — это несколько небольших картинок, объединённых в один графический файл.

Во-первых, объём одного файла как правило меньше, чем сумма объёмов отдельных файлов. Это можно объяснить снижением издержек на сохранение одного изображения: всякие там заголовки, указывающие на формат изображения, или общая палитра цветов. Если вы помните рекомендацию 90-х годов про разбивку одного большого файла на несколько мелких, чтобы создать иллюзию, что сайт грузится быстрее — забудьте сейчас же :) Такой подход создавал именно иллюзию, так как суммарный объём нескольких файлов был больше, чем объём одного файла, а сама картинка грузилась дольше.

Во-вторых — самое главное — сокращается количество HTTP-запросов к серверу. Многие не обращают на это внимание, а зря. Зачастую отдельный запрос обходится намного дороже, чем десяток «лишних» данных в одном изображении.

В общем спрайты — это круто и модно. Сегодня разберём первый пример.

Допустим, для красоты, необходимо изменить цвет иконки при наведении на неё мышкой. Живой пример.

#nav li a {background:none no-repeat left center}
#nav li a.item1 {background-image:url('../img/image1.gif')}
#nav li a:hover.item1 {background-image:url('../img/image1_over.gif')}
#nav li a.item2 {background-image:url('../img/image2.gif')}
#nav li a:hover.item2 {background-image:url('../img/image2_over.gif')}
и т.д.

Обычно мы используем такой подход, так как он очевиден. Но он ещё и неэффективен. Если вы применяете этот код на практике, то наверняка заметили, что изображениям надо время, чтобы подгрузиться. А иконки, которые появляются при наведении, подгружаются только по запросу, что визуально нифига не эстетично, так как это создаёт ощущение тормознутости и дёрганости у сайта.

Используя спрайты, мы можем исправить ситуацию. Вместо использования 10-ти отдельных изображений кнопок (5 на таковые и 5 на состояние при наведении), можно объединить их все в одну большую картинку. В общем создайте новое изображение, которое по ширине такое же как ваша самая большая картинка, а в высоту такое же как сумма высот всех ваших картинок плюс X пикселей, где X — количество картинок в спрайте. Дополнительные пиксели нужны для однопиксельного расстояния между картинками, незачем им сливаться в одну белиберду. Ну и теперь, на таких условиях, расположите картинки одна под другой, с однопиксельным просветом между ними.

Зацените результат:

#nav li a {background-image:url('../img/image_nav.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}
и т.д.

Нехило оптимизировали, правда? Теперь представьте как это круто, когда на сайте очень много мелкой однотипной графики. Те же кнопки, звёздочки рейтингов, смайлики и т.п.

Если вы не поняли что мы сделали в коде — поясню. По факту, мы указали для всех кнопок одно фоновое изображение. Оно у нас большое и хранит в себе все 10 кнопочек. Простой арифметикой мы вычисляем какой участок изображения надо показать, применимо к пунктам списка. Всё остальное прячется. Люблю этот принцип с диафильмом сравнивать :) Если вы всё равно ничего не поняли — не отчаивайтесь. В следующий раз рассмотрим ещё один пример во всех-всех подробностях.

Пара спрайтов для затравки :)