Использование CSS спрайтов

Для начала определимся, что такое CSS спрайт. CSS спрайт (css sprite) это несколько меленьких изображений, собранных в одно. Так для чего же используют CSS спрайты? CSS спрайты применяют для увеличения скорости загрузки сайта и уменьшения количества запросов к серверу. Причем уменьшение количества запросов к серверу играет немаловажную роль для увеличения скорости загрузки сайта.

Итак, предположим, Вы используете у себя на сайте четыре меленьких изображения:

Таким образом, при загрузке браузером данной странички, будет сделано четыре запроса к серверу (т.к. четыре изображения) и скачано 1017 байт (их суммарный вес).

Если объединить все четыре изображения в одно (склеим их слева направо), то в результате получим изображение (спрайт) весом всего 544 байта. Для загрузки полученного спрайта понадобится всего один запрос к серверу, а не четыре как ранее.

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

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

Получить нужное нам изображение из CSS спрайта можно при помощи CSS кода. Для этого в файле style.css (либо между тегами <style></style>) добавляем описание новых стилей при помощи следующего кода:

В первой строчке данного кода указываем, что четырем различным стилям соответствует один графический файл с изображениями. Далее, поочередно для каждого стиля указываем позицию начала изображения (его координаты) и размеры.

После того, как описали стили с указанием координат и размеров нужных нам изображений, можно выводить на экран изображения, содержащиеся в нашем CSS спрайте. Для получения отдельных изображений, как в примере выше, используйте, например, блоки div с описанными ранее стилями:

Как видите, ничего сложного на самом деле нет. Плюсами данного метода использования CSS спрайтов являются уменьшение веса изображений и уменьшение количества запросов к серверу, что безусловно положительно влияет на скорость загрузки сайта. Может, приведен конечно не совсем удачный пример с уменьшением веса полученного графического файла, но при объединении большого количестве изображений в CSS спрайт разница будет более весомой.

Если для описания стилей Вы используете файл style.css, то скорее всего, он будет закеширован браузером, так что не стоит волноваться о том, что сэкономив на размере картинок, был немного увеличен CSS код.