Храните мелкие картинки в CSS
Храните мелкие картинки, которые нельзя засунуть в спрайты, в data:image base64 в CSS — это экономит кучу запросов к вебсерверу.
.some_background {
background-image: url("data:image/ТИП;base64,КОД");
}
Кодируем изображение в base64 с помощью онлайн сервисов, вроде сервиса от DailyCoding (очень удобно, ничего лишнего). Кладем получившуюся строку в CSS файл, заменяя «ТИП» на MIME-тип вашего изображения — jpeg/png/gif или (OMG!) bmp и «КОД» на нужную строку в base64. Например так:
.back {background:url("data:image/GIF;base64,R0lGODlhAQAGAIAAANXV1QAAACH5BAAAAAAALAAAAAABAAYAAAIChF8AOw==") 298px 0 repeat-y}
Теперь можно смело подключать нужному элементу стиль/ Таким образом мы можем сократить количество запросов на сервер и нагрузку на винчестер. Особенно это выглядит полезно для мелких картинок.
Плюсы:
- Уменьшение числа запросов к вебсерверу;
- Меньшее засорение кеша пользователя;
- Иногда уменьшение результативного объема изображения на больших файлах.
Минусы:
- Сложность обновления изображений;
- Иногда незначительное увеличение результативного объема изображения на мелких файлах.
- Internet Explorer 5, 6 и 7 не добавляли в друзья base64, но в IE8 работает нормально. Исправляется легким движением руки.
Мне кажется, что увеличение объема CSS файла лучше, чем лишний запрос к вебсерверу, поскольку по-умолчанию браузеры открывают в среднем 8 паралленьных соединений к вебсерверу, а 50—70 изображений это уже очередь, а кто любит очереди? :)
Использовать этот метод стоит уже после утверждения дизайна и верстки, поскольку обновлять изображения таким методом несколько дольше, чем обычно.