Меню показать Меню скрыть
Современные
проекты
от ПаЛыЧа
Сайк ПавелСайк Павел
5 г. назад

Храните мелкие картинки в 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 изображений – это уже очередь, а кто любит очереди? :)

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

Использование в проектах Base64

Обязательно указывать название картинки, она должно храниться в папке images или другой. Но строчку комментируем, например так

.some_background { /*background-image: url(../images/i__select.png);*/ background:url("data:image/GIF;base64,R0lGODlhAQAGAIAAANXV1QAAACH5BAAAAAAALAAAAAABAAYAAAIChF8AOw==") 298px 0 repeat-y
}

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

Литература:

  1. Храните мелкие картинки в CSS
  2. Base64 Encoded Images for Internet Explorer (sexy version)

Добавить комментарий

Наверх