Слово о спрайтах

В последнее время приходится теснее сотрудничать с front-end разработкой, поэтому недавно познакомилась с такой вещью как спрайты. Вообще понятие спрайтов пришло к нам из игр, когда на одной картинке располагаются несколько мелких и нужная выбирается в зависимости от координат. Например, спрайт от известной ностальгической игры Super Mario.
В веб-приложениях такая технология способствует:

1. ускорению загрузки картинок сайта;
2. уменьшению количества запросов на сервер - вместо запросов к каждой картинке по отдельности, идет загрузка сразу всех.

Например, есть на сайте 4 картинки Соединить их в одну мы можем:

1. в любом графическом редакторе;
2. а можем воспользоваться любой веб-утилитой, например, spritegen.

В результате получается примерно такой результат:

Теперь касаемо CSS.
Если раньше стили были прописаны в таком формате:

.open{
background:url(open_window.png) 100% 100% no-repeat;
}

то теперь нужный фон устанавливается с помощью background-position (поддерживается всеми браузерами):

.sprite-open_window{
background-image: url(csg-4f54c057b225e.png);
background-position: 0 -163px; width: 30px; height: 30px; 
} 

Из прогугленных недостатков спрайтов:

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