CSS sprites с изображения

[SandPrince]

напоследък забелязвам че доста от световно известните сайтове ползват техниката с CSS sprite-товете.

това е една картинка с наредени всички изображения и малки иконки

и след това с CSS се взимат и се зарецдат в сайта.

въпросите ми са:

1. как става това???
2. оказва ли влияние на SEO-то това ?
3. подбрява ли сайта от гледна точка на ползваемост, зарежда ли по-бързо??? по-валиден ли е сайта така?

 

[RiddleR]

1. http://css-tricks.com/css-sprites/
2.Да
3.Да

 

[SandPrince]

1. http://css-tricks.com/css-sprites/
2.Да
3.Да

преди да пусна темата , разбира се проверих в гугъл, даже и този линк разледах. въпросът е че нищо не разбрах, енглиша ми е малко съкат...

ако може някой накратко да обясни принципте на тази техника ще съм му много благодарен

 

[StormBreaker]

2. Не влияе на СЕОто ама хич. Паяка не му пука дали всички картинки са ти на една или са много. Него го интересува информацията.
3. Зарежда малко по-бързо. Но се усеща само при хора със слаб интернет. Около 2% ще го усетят демек. Това не оказва влияние на валидността.
1. Слагаш си иконките на една голяма картинка и ги нареждаш примерно на 2-3 px растояние и после в CSS ги слагаш като му задаваш:

background-position: 0 -20px

Това -20px оказва по y да почне от 20-тия пиксел. Ще изкара картинката дето започва от X: 0 и Y: 20 и ще изкара толкова, колкото ти е ширината и дължината на контейнера, на който слагаш стила.

Общо взето слагаш всички картинки на 1 голяма такава и после в CSS задаваш от къде до къде да вземе от голямата картинка.

 

[emagi]

Я дайте линк към такова CSS Sprites, да видим за какво иде реч?

 

[SandPrince]

Я дайте линк към такова CSS Sprites, да видим за какво иде реч?

с тази техника е изграден favit.bg например.

@StormBreaker добре де, ти му казваш да почне от 20-тия пиксел примерно, но как ще разбере къде да свърши? в смисъл, ако захапе от другите изображения до това дето са наредени?