Техника CSS-спрайтов. Экономия траффика больших проектов.

В этой статье я хотела бы рассказать вам о технике под названием css-спрайты.

Мы все помним старые 8ми-битные игры, которые использовали картинки (спрайты), вроде картинки слева. Спрайты сохранялись в минимальном количестве файлов, и назывались битмапы (популярный формат картинок windows .bmp - сокращение от bitmap).

Казалось бы время спрайтов давно кануло в небитие? Как бы ни так. Для того чтобы понять где и зачем их используют отвлекусь и покажу что запрашивает ваш браузер у сервера чтобы показать вам картинку примера:

GET /news_imgs/21.gif HTTP/1.1
Host: usabili.ru
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6
Accept: image/png,image/*;q=0.8,*/*;q=0.5
Accept-Language: ru,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: windows-1251,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Referer: http://usabili.ru/
If-Modified-Since: Wed, 29 Apr 2009 22:12:39 GMT
If-None-Match: "516264-cc6-468b8e0a4a3c0"

Вместе с cookies около 550 байт. Для одной картинки. Даже если картинка будет 12х12 пикселей и весить сто байт. Плюс браузер делает запрос dns, ждёт ответа сервера, ужас просто. Спросите какой ужас? А представьте что у вас в оформлении различные кнопочки и галочки, уголки и градиентики и всего на сайте картинок более 100 штук. Пользователь должен будет отправить 50 килобайт данных на сервер только для того чтобы начать скачивать картинки. А представьте что вы владелец маленькой компании google и ежедневно только входящего трафика запросов у вас набегает на несколько терабайт. Что же делать?

Посмотрим прямо на логотип который использует гугл для экономии лишних террабайт запросов.

На этой картинке у гугла целая кучка элементов, давайте попробуем сделать что-нибудь прямо с ней? Вооружимся чем-нибудь что может помочь нам определять координаты картинок (это умеет даже mspaint) и начнём.

Вырежем отдельно картинку с плюсиком:

<div style="background: url(http://www.google.ru/images/nav_logo4.png) no-repeat -114px -78px; display: block;width:12px;height:12px;float:left;">&nbsp;</div>

 - вот такой вот плюсик получился. -114px и -78px -координаты начала плюсика по X и Y. Float:left - чтобы див был на одной строке с надписью.

Тем же способом я вырезала картинки минуса и подсвеченного плюса и минуса

<style>
b.head {float:left;line-height:12px;padding-left:5px;clear:right;}
.minus a.controls{background-position:-126px -78px;}
.minus a.controls:hover {background-position:-142px -96px;}
.minus .hidden {padding:15px 0 15px 17px;clear:both;}
.plus, .minus {clear:all;padding:15px;}
.plus a.controls{background-position:-114px -78px;line-height:10px;font-size:10px;}
.plus a.controls:hover {background-position:-156px -96px;}
.plus .hidden {display:none;}
a.controls {cursor:pointer;width:12px; height:12px; background:url(http://www.google.ru/images/nav_logo4.png) no-repeat;display:block;font-size:0 !important;float:left;vertical-align:bottom;}
</style>
<script>
function expand(el){
        if(el.parentNode.className=='plus') el.parentNode.className='minus';
        else el.parentNode.className='plus';
}
</script>

Потом сделала небольшой пример использования этих элементов:

<div class="plus">
        <a class="controls" onclick="expand(this);return false;">expand</a>
        <b class="head">нажмите на плюсик чтобы появился текст, на минус чтобы убрать</b>
        <div class="hidden">текст
                <div class="plus">
                        <a class="controls" onclick="expand(this);return false;">expand</a>
                        <b class="head">второй уровень вложенности</b>
                        <div class="hidden">а вот тут кнопочка без заголовка
                                <div class="plus">
                                        <a class="controls" onclick="expand(this);return false;">expand</a>
                                        <div class="hidden">третий уровень вложенности
                                        </div>
                                </div>
                        </div>
                </div>
        </div>
</div>

и вот что получилось:

Всё что у меня получилось можно посмотреть отдельным файлом тут: http://usabili.ru/examples/css_sprites.html