Что такое CSS-спрайты?

CSS-спрайт - это изображение, объединяющее в себе нескольких небольших картинок (иконок). Но под этим термином понимается не просто изображение, а технология использования части изображения по средствам позиционирования CSS.

Такой подход имеет ряд преимуществ:

• снижает количество HTTP-запросов к серверу;
• уменьшает общий размер файла изображения;
• структурирует набор картинок (иконок) на сайте.

Пример использования спрайта для кроссбраузерного hover-эффекта?

a.sedan    {
    background: url(images/cars.png) top 0px left 0 no-repeat;
    width: 78px;
    height: 35px;
}

a.sedan:hover    {
    background: url(images/cars.png) top -35px left 0 no-repeat;
}

Подготовка CSS-спрайта

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

Нужно максимально плотно расположить элементы изображений в файле. Если они одного размера создать сетку, чтобы упростить CSS-позиционирование.

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