Что такое 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-позиционирование.
Кроме того, для автоматической генерации спрайтов в интернете можно подыскать сервис, который облегчит их создание.