CSS спрайты — это способ сократить количество HTTP запросов для графических ресурсов, которые посылает ваш сайт. Изображения объединяются в одно большое изображение с определёнными X и Y координатами. После установки полученного изображения соответствующим элементам страницы в качестве background-position, CSS свойство может затем быть использовано для смены видимой области до необходимого компонента изображения.

Эта техника может быть очень эффективной для того, чтобы улучшить работу сайта, особенно в ситуации, когда используется много маленьких изображений, таких как иконки меню. Yahoo!, например, использует эту технику именно для этого.

Заплатки

Есть несколько действительно раздражающих ошибок браузеров, на которые надо обратить внимание при создании CSS спрайтов.

Opera

Opera (по крайней мере до версии 9.0) не признаёт позиции фона больше 2042px или меньше -2042px, используя вместо этого эти крайние значения. Этот инструмент исправляет это за счет создания новых колонок в выводимом изображении каждый раз, когда вертикальный предел достигнут.

Safari

У Safari есть проблема с повторением фоновых изображений. К счастью, эта проблема может быть легко решена определением достаточно большого горизонтального смещения (настраивается).

Дополнительно прочесть

A List Apart опубликовал статью под названием CSS Sprites: Image Slicing's Kiss of Death в которой разъясняются понятия CSS спрайтов. Если вы новичок в этой технике, мы настоятельно рекомендуем посмотретьA List Apart.