Одним из самых эффективных методов ускорения загрузки сайта является уменьшение количества HTML запросов для загрузки контента. Одним из способов достижения этого является использования CSS спрайтов. А именно, объединение множества изображений в один файл и отображение нужного посредством CSS свойства background-position.
Вот пример css спрайта для нашего блога:

Пример css спрайта
Цель данной статьи не научить методам ускорения загрузки  сайта, а рассказать несколько подсказок по созданию  CSS спрайтов.

Не тяните до тех пор пока вы закончите нарезку и начнете кодировать.

Проблема проволочки в том, что когда ваши таблицы стилей и графика уже готовы, вам придется вернуться назад и переписывать код CSS. Вам также придется потратить уйму времени в фотошопе, пытаясь вместить изображения 20*30 в один файл за раз, что крайне неприятно и утомительно. Значительно проще построить спрайт шаг за шагом.
Когда спрайт уже готов, инструмент http://www.spritebox.net/ поможет вам описать CSS классы и идентификаторы для таблиц стилей.
В случае если вы хотите оптимизировать уже созданный сайт, то он-лайн инструмент SрriteMe поможет вам. SрriteMe создаст возможный вариант спрайт-файла, а также необходимые стили.  http://spriteme.org/

Файл состояний кнопок в css-sprite (:hover, :activ)

Помещайте изображение в спрайт-файле в противоположной стороне от того как они будут выводиться.

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

Избегайте использование ‘bottom’ или ‘right’ в CSS позиционировании.

Когда позиционируете в CSS sprite за элементом, очень просто использовать use background-position: bottom -300px; or background-position: right -200px;. Это конечно сработает, но проблема в том, что когда вы будете увеличивать спрайт в ширине и высоту, то указанные координаты позиционирования сдвинутся, т.к. изображения будут уже не справа и не снизу.

Дайте каждому изображению достаточно свободного места.

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

Не беспокойтесь о размере спрайта в пикселях.

В случае, когда у вашего сайта сложный дизайн, ваш спрайт-файл будет содержать большое количество изображений. Кроме этого, размер «листа» на котором будут размещены все изображения должен быть достаточно большим. И это нормально. Пустое пространство добавляет не так уж много «веса» файлу. Размер спрайта используемый для addons.mozilla.org — 1,000×2,000 пикселей и весит всего лишь 16.7kb!

Источник