CSS спрайты

CSS спрайты — превосходная технология, которая позволяет нам уменьшить число запросов к веб-серверу для загрузки изображений. Эта технология довольно широко описана в многих книгаг, и блогах. Если на Вашем сайте используется много картинок (в основном это касается фоновых изображений) то можно вместо большого количества мелких изображений “слепить” одно большое, которое содержит внутри все маленькие и при помощи CSS определять, какая конкретно часть картинки в каком блоке будет отображаться.

Данный метод влияет на скорость загрузки страницы, но и у него есть свои “подводные камни”

В некоторых браузерах спрайты могут повлиять на производительность отрисовки, потому что при каждом использовании спрайта его большое “склеенное” изображение будет дублироваться в памяти браузера.

Нам нужно установить равновесие между ресурсами, которые были сэкономлены за счет уменьшения количества запросов на веб-сервер и ресурсами, которые были затрачены на отображение странички в этих браузерах.

Другие методы уменьшить количество запросов на веб-сервер.

Если Вы не хотите внедрять технологию спрайтов, идея с оптимизацией количества запросов все равно остается актуальной и заманчивой. Исходя из этого для некоторых ситуаций мы должны решить об других путях ее реализации.

Карта изображений

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

Встроенные изображения

Встроенные изображения — это довольно хороший метод для современных браузеров. При программировании для браузеров, которые понимают этот метод, мы можем определить каждое изображение в виде data:URL.

Объединение изображений

Если же картинки расположены рядом (по вертикали или горизонтали), то мы можем рассмотреть вариант обьединения всех изображений в одно. Это очень смахивает на спрайты, но здесь мы генерируем изображение с одноразовым использованием фона, устанавливая margin и padding так, чтобы элементы были выровнены относительно частей картинки.

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