Верстка с использованием png файлов

Как то иногда для повышения знаний просматриваю как верстаются сайты и периодически встречаю верстку когда изображения берутся с png файла в котором множество элементов диза. Но непойму как с казалось бы одного файла выдергивают то что нужно.
Подскажите где почитать, желательно на RU, а не на другом языке.
За ранее благодарен!

google.ru - css спрайты

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

"графика одной картинкой верстка"
:)

кстати есть ли в этом какой то плюс? что то так глянул заморочек много, это как по мне. Хотя еще полностью не вникал. Понял что всё завязано на позиционировании элементов на странице.

быстрее грузится + нагрузка на сервер меньше

ibiz писал:

быстрее грузится + нагрузка на сервер меньше

+1, причем если делать hover, не будет подзагрузки изображения, т.к. оно уже загружено. ;)

где-то я таблицу видел /может кто напомнит/ там идет экспоненциальное сравнение целесообразности использования спрайтов в зависимости от веса

ну да. обычно мало где юзают. хотя видел упоротых которые 22 картинки склеивают в 1. и потом дотошно X и Y подгоняют
background: url(image.png) X Y no-repeat #000;

после таких упоротых клиент снова идет и выворачивает карманы.
- потому что заменить картинку проблема
- поменять размер картинки проблема
- сменить размер блока в котором из всего спрайта "подсвечен" один кусочек проблема
- в некоторых браузерах при увеличении (ctrl+, или ctrl+колесико мыши) страницы такой блок (сверстаный не по феншую) начинает ехать и "внутри" будет уже не нужный кусочек а и соседние области спрайта

ну и вес, да. браузер вроде в 10 потоков грузит (настройка в IE6. современные браузеры больше?) все что в хтмл найдет (скрипты стили картинки...) и зачастую 1 большая картинка - кроме невыигрывания в скорости еще и дает проигрыш в юзабилити и дальнейшей поддержке

вот есть кнопка. у ней 3 состояния:
- обычное
- ховер
- актив

вот эти три картинки можно склеить. все остальное дурь полная

Мелкие элементы интерфейса ещё имеет смысл склеивать. Типа маленьких кнопочек для редакторов, и пр. В-приницпе там выигрыш в скорости загрузки заметен!

понял, благодарю!

Кнопки всегда так делаю. Там где ":hover" - там "background-position:0 -40px;", например. Получается, что видна либо верхняя, либо нижняя половина картинки. )

А можно глянуть сайт или другой пример, где не только кнопки так выводятся?

Делаю проще для кнопок (если два состояния): "background-position:top;", "background-position:bottom;" Впрочем если есть третье состояни, то: "background-position:center;"

FXIX писал:

ну да. обычно мало где юзают. хотя видел упоротых которые 22 картинки склеивают в 1. и потом дотошно X и Y подгоняют background: url(image.png) X Y no-repeat #000; после таких упоротых клиент снова идет и выворачивает карманы. - потому что заменить картинку проблема - поменять размер картинки проблема - сменить размер блока в котором из всего спрайта "подсвечен" один кусочек проблема - в некоторых браузерах при увеличении (ctrl+, или ctrl+колесико мыши) страницы такой блок (сверстаный не по феншую) начинает ехать и "внутри" будет уже не нужный кусочек а и соседние области спрайта ну и вес, да. браузер вроде в 10 потоков грузит (настройка в IE6. современные браузеры больше?) все что в хтмл найдет (скрипты стили картинки...) и зачастую 1 большая картинка - кроме невыигрывания в скорости еще и дает проигрыш в юзабилити и дальнейшей поддержке вот есть кнопка. у ней 3 состояния: - обычное - ховер - актив вот эти три картинки можно склеить. все остальное дурь полная

для клиента спрайт конечно не удобен, но если сделать спрайты по логических группам, а не в один все загонять, будет нормально