Храните мелкие картинки в CSS
Храните мелкие картинки, которые нельзя засунуть в спрайты, в data:image base64 в CSS — это экономит кучу запросов к веб-серверу.
.some_background {
background-image: url("data:image/ТИП;base64,КОД");
}Кодируем изображение в base64 с помощью онлайн-сервисов, вроде Base64 Image (плюс оптимизация картинок с помощью jpegoptim и optipng).
Кладем получившуюся строку в CSS-файл, заменяя «ТИП» на MIME-тип вашего изображения — svg/jpeg/png/gif или (OMG!) bmp и «КОД» на нужную строку в base64. Например так:
.back { background:url("data:image/GIF;base64,R0lGODlhAQAGAIAAANXV1QAAACH5BAAAAAAALAAAAAABAAYAAAIChF8AOw==") 298px 0 repeat-y
}Теперь можно смело подключать нужному элементу стиль. Таким образом мы можем сократить количество запросов на сервер и уменьшить нагрузку на винчестер. Особенно это полезно для мелких картинок.
Совместимость с браузерами
- Chrome 4+
- Firefox 2+
- Edge
- Safari 3.1+
- Opera 9+
- IE 8+
Плюсы:
- Уменьшение числа запросов к веб-серверу;
- Меньшее засорение кеша пользователя;
- Иногда уменьшение результативного объема изображения на больших файлах.
Минусы:
- Сложность обновления изображений;
- Иногда незначительное увеличение результативного объема изображения на мелких файлах;
- Internet Explorer 5, 6 и 7 не добавляли в друзья base64. Исправляется легким движением руки.
Рекомендации
По личному опыту, мы упаковываем изображения в BASE64 при весе исходной картинки до 1кб.
Мне кажется, что увеличение объема CSS-файла лучше, чем лишний запрос к веб-серверу, поскольку по-умолчанию браузеры открывают в среднем 8 параллельных соединений к веб-серверу, а 50-70 изображений — это уже очередь, а кто любит очереди? :)
Использовать этот метод стоит уже после утверждения дизайна и верстки, поскольку обновлять изображения таким методом несколько дольше, чем обычно.
При использовании протокола передачи данных HTTP/2 выигрыша в скорости загрузки не будет, так как не формируется очередь отдачи, а отдается вся статика одним пакетом.
Такой подход очень актуален когда у Вас сервер очень сильно нагружен соединениями, в остальных случаях обычные картинки предпочтительней, все равно кешируется все. Не забываем настроить кеширование на стороне сервера.
Использование в проектах Base64
Обязательно указывать путь к картинке, которую заменили на BASE64, она должно храниться в папке images или другой. Но строчку комментируем, например так
.some_background {
/*background-image: url(../images/i__select.png);*/
background:url("data:image/GIF;base64,R0lGODlhAQAGAIAAANXV1QAAACH5BAAAAAAALAAAAAABAAYAAAIChF8AOw==") 298px 0 repeat-y
}Это необходимо, что бы следующий верстальщик вас не материл и мог легко найти картинку источник.
