Веб-разработка Использование base64 в веб-разработке

Base64 — позиционная система счисления с основанием 64 (26). При этом основание 64 в этой системе счисления выбрано не случайно. Это наибольшая степень двойки, которая может быть представлена набором символов из кодировки ASCII. При этом в base64 используются символы A-Z, a-z и 0-9, что составляет 62 знака, а для двух недостающих знаков применяются символы «+» и «/». Эта система широко используется, например, в электронной почте для представления бинарных файлов в тексте письма (так называемое транспортное кодирование для гарантированного сохранения данных при передаче в любых сетях и между любыми устройствами). Однако совместно с технологией data:URL base64 может использоваться в веб-разработке для включения элементов данных (чаще всего файлов с изображениями) в HTML и CSS-документы.

В первую очередь все вышесказанное относится к хранению мелких картинок в base64. Зачастую оказывается, что часть мелких картинок невозможно или неудобно хранить в спрайтах, поэтому вариант с внедрением картинки в CSS в виде base64 оказывается очень удобным и, кроме того, экономит запросы к веб-серверу. Второй вариант оправданного применения внедрения картинок в веб-документ — это случай, когда важно, чтобы картинки загрузились одновременно со стилями сайта. Третий случай — когда часть картинок требуется показывать даже если в браузере пользователя включена настройка «Не показывать картинки» (например, когда меню навигации на сайте полностью состоит из картинок).

Перекодировать изображение в base64 можно с помощью онлайн-сервисов. Кроме того, на этом сайте тоже есть аналогичный base64-конвертор.

Если изображение внедряется в CSS, то код будет выглядеть примерно так:

.b-block {
    background-image:url(data:image/ТИП;base64,КОД);
}

При этом вместо «ТИП» будет тип изображения (png/jpg/gif), а вместо «КОД» — строка в base64.
Кроме этого, картинку можно внедрить в HTML, используя тег <img>, но при этом следует учесть, что картинка при этом не будет кешироваться в браузере пользователя и будет заново загружаться в составе HTML-документа при новом запросе к веб-серверу.

<img src="url(data:image/ТИП;base64,КОД)">

Итак, кодирование изображений в base64 имеет ряд очевидных преимуществ:

  • существенное уменьшение запросов к вебсерверу (гораздо быстрее загрузится один большой css-файл с внедренными картинками, нежели сотня мелких файлов-картинок);
  • меньшее засорение кеша браузера пользователя мелкими файлами с изображениями.

Но, как всегда, есть и недостатки:

  • сложнее обновлять изображения (нужно сначала перекодировать картинку из base64 в файл, отредактировать и закодировать обратно в base64);
  • в силу особенностей алгоритма base64 размер файлов после кодирования увеличивается в среднем на 33%.

Кроме того существуют неприятности при использовании data:URL в браузере Internet Explorer версии 7 и ниже. Существуют возможности эмулировать возможность внедрения data:URL в IE, или использовать для этого MHTML, но я рекомендовал бы отдавать для IE7 и ниже картинки обычным способом. Например, с использованием техники подключения отдельных CSS для IE из этой статьи код будет выглядеть примерно так:

.b-block {
    background-image:url(data:image/png;base64,КОД);
}
.lte7 .b-block {
    background-image:url(../img/image.png);
}

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

Комментарии (2)

  1. Алексей

    Спасибо за статью!

    Кстати, а для автоматизации этого процесса можно использовать сервис http://convertcss.com он только с CSS работает, но все же.

  2. Андрей Аносов

    Пожалуйста. Не спорю, сервис хорош, когда нужно быстро перекодировать все пути к картинкам в base64. Но у сервиса есть и несколько недостатков.
    Во-первых, я попробовал сконвертировать файл http://kad.arbitr.ru/css/common.css, и в результате сервис заменил в нем далеко не все пути к картинкам. Например, url вида url(/i/t/icons48x48.png?changed=1) сервис не нашел (даже не отметил как skipped).
    Во-вторых, такие сервисы плохо подходят, если один и тоже путь к картинке упоминается несколько раз в разных селекторах. В идеале нужно автоматически группировать такие селекторы, чтобы избежать ситуаций, когда одна и та же base64-кодированная картинка добавится в css несколько раз, но это не всегда возможно сделать автоматически.
    В-третьих, не учитывается несовместимость base64 с IE7 и ниже.
    В-четвертых, пустячок конечно, но сервис не работает в IE8 и ниже, хотя для подобного сервиса это не принципиально.