CSS Sprite - по-бързо, по-лесно, по-удобно!

Sprite-ът не представлява нищо повече от колекция от всички елементи на графичния интерфейс на дадено приложение, събрани в едно изображение, или казано с по-прости думи - една голяма картинка в която са поместени всички картинки изграждащи визията на даден сайт. Феновете на ретро игрите от 90-те вероятно познават идеята на спрайтовете, тъй като графиката там се изграждаше на същият принцип, но със сигурност всеки занимавал се с разработка на приложения за уеб среда се е сблъсквал със спрайт - например две картинки представляващи две различни състояния на даден бутон, събрани в едно изображение, една под друга.

Използването на спрайтове при създаването на уебсайт има няколко основни предимства:

    1. Спестява GET заявки при извличането на съдържанието на сайта (по една за всяко изображение)

    2. Спестява трафик

    3. Позволява групово оптимизиране на изображенията

Концепцията всъщност е доста проста - след създаването на визията, всички изображения изграждащи интерфейса се събират в един файл, който се използва като background-image в css стиловете за елементите от HTML.

Например:

Имаме елемент котва, който визуално изглежда като бутонче:

- създаваме елемента в HTML, а в css декларацията му задаваме стил:

a{
    background-image: url("css_sprite.png");
}

 - намираме координатите на изображението върху спрайта, които са ни необходими да декларираме background-position отстъпа. Да приемем че картинката на бутончето се намира на 200px от левият ръб на спрайта и 300px от горният ръб на спрайта и е с размери 60 на 25px. Цялото стилово оформление на нашето "бутонче" е:

a{
    display: block;
    width: 60px;
    height: 25px;
    background-image: url("css_sprite.png");
    background-position: -200px -300px;
    background-repeat: no-repeat;
}

Готово!

Ако пък имаме второ състояние на бутона, което да кажем е предвидено за mouseover събитието и се намира под първата картинка, с координати 200px от ляво и 335px от горе, можем да добавим в стила:

a:hover{
    background-position: -200px -335px;
}

Така ще имаме интерактивно бутонче с две състояния, без досадно премигване поради зареждането на втората картинка, тъй като реално се зарежда само една - css_sprite.png.

Идеята на спрайтовете е обединяването на графичните елементи на самият интерфейс - всички останали изображения е редно да бъдат оставени като отделни файлове. Някои изображения които носят посещения на сайта (като например логото на дадена фирма, или снимка на продукт) също е добра идея да бъдат извън спрайта. Въпреки тези основни положения, всеки разработчик сам преценя кога и къде е удачно да се използва спрайт и къде не е. Ето едно просто правило с оглед по-лесната поддръжка на сайта: ако картинката се променя често, нека остане на отделно изображение, в противен случай може да бъде поставена на спрайта.

Основният недостатък, който вече споменахме, е малко по-сложната поддръжка на уебсайт чиито интерфейс е изграден със спрайтове. До голяма степен това зависи от правилното и рационално използване на този похват. Друг недостатък, за някои разработчици, е леко нетрадиционният начин на кодиране на интерфейса изграден със спрайтове, но когато характерните особености на този похват бъдат усвоени, става ясно че няма нищо трудно, дори напротив - по-лесно е.

Използвайте спрайтове! Сравнете производителността на сайт чиито интерфейс е изграден на базата на спрайтове, с тази на сайт създаден без тяхната помощ, експериментирайте и открийте правилният подход за вас при изготвянето и прилагането на CSS sprite във вашият уеб сайт.

Ето и малко полезни линкове по темата:
http://css-tricks.com/css-sprites/
http://www.w3schools.com/css/css_image_sprites.asp
http://spriteme.org/