CSS спрайты
CSS спрайты — превосходная технология, которая позволяет нам уменьшить число запросов к веб-серверу для загрузки изображений. Эта технология довольно широко описана в многих книгаг, и блогах. Если на Вашем сайте используется много картинок (в основном это касается фоновых изображений) то можно вместо большого количества мелких изображений “слепить” одно большое, которое содержит внутри все маленькие и при помощи CSS определять, какая конкретно часть картинки в каком блоке будет отображаться.
Данный метод влияет на скорость загрузки страницы, но и у него есть свои “подводные камни”
В некоторых браузерах спрайты могут повлиять на производительность отрисовки, потому что при каждом использовании спрайта его большое “склеенное” изображение будет дублироваться в памяти браузера.
Нам нужно установить равновесие между ресурсами, которые были сэкономлены за счет уменьшения количества запросов на веб-сервер и ресурсами, которые были затрачены на отображение странички в этих браузерах.
Другие методы уменьшить количество запросов на веб-сервер.
Если Вы не хотите внедрять технологию спрайтов, идея с оптимизацией количества запросов все равно остается актуальной и заманчивой. Исходя из этого для некоторых ситуаций мы должны решить об других путях ее реализации.
Карта изображений
Карта изображений — первое что приходит в голову – это метод, который не рекомендуется использовать для устройств без сенсорной навигации, потому что в противном случае может резко пострадать юзабилити.
Встроенные изображения
Встроенные изображения — это довольно хороший метод для современных браузеров. При программировании для браузеров, которые понимают этот метод, мы можем определить каждое изображение в виде data:URL.
Объединение изображений
Если же картинки расположены рядом (по вертикали или горизонтали), то мы можем рассмотреть вариант обьединения всех изображений в одно. Это очень смахивает на спрайты, но здесь мы генерируем изображение с одноразовым использованием фона, устанавливая margin и padding так, чтобы элементы были выровнены относительно частей картинки.
Если мы будем использовать изначальный код, позаботившись о правильном кэшировании на веб-сервере, то следующие странички будут загружаться намного быстрее, чем при использовании CSS спрайтов, потому что уменьшаться затраты времени на отрисовку.