Храните мелкие картинки в 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
}

Это необходимо, что бы следующий верстальщик вас не материл и мог легко найти картинку источник.

Литература:

  1. Храните мелкие картинки в CSS
Вредные советы
Начать проект вместе с нами
Заполните форму и отправьте
нам сообщение!
Если у Вас возникли вопросы, предложения, либо Вы желаете оформить заявку на заказ услуги — Добро пожаловать!
Телефоны и мессенджеры:
Москва: +7 (499) 389-42-40
Санкт-Петербург: +7 (812) 456-72-40