Как CSS рендерит спрайт?

Question

[Монти Пайтон]

Создав смещение в сторону на половину, стало заметно соседнее изображение, тоесть что по сути весь спрайт размещается под "маской" каждый раз при размещении элемента изображения а не только его указанная вами часть?

#home {
    left: 0px;
    width: 46px;
    background: url('img_navsprites.gif') 0 0;
}

#prev {
    left: 63px;
    width: 43px;
    background: url('img_navsprites.gif') -25px 0;
}

Comments

[Lynn «Кофеман»]

В этом и идея спрайтов.
У нас есть большая картинка и мы каким-либо образом показываем из неё маленький кусочек. Если промахнуться с координатами, то будет видно не то.

[Монти Пайтон]

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

[Lynn «Кофеман»]

Может и создаст. Хотя смотреть надо на размер картинки, а не на вес. Ну и не нужно абсолютно всё пихать в один спрайт.

Вообще эту технику придумали лет десять назад когда очень важно было уменьшить количество http-запросов. Сейчас это может быть менее актуально, хотя с распространением беспроводной связи с её огромными (по сравнению с кабелем) сетевыми задержками может быть выгоднее получить один раз большую картику, чем десять мелких.