Что такое base64 и зачем он нужен в веб разработке?

Base64 – способ кодирования произвольных двоичных данных в ASCII текст. По своей сути кодирование очень простое. Каждые шесть бит на входе кодируется в один из символов 64-буквенного алфавита. “Стандартный” алфавит, который для этого используется – это A-Z, a-z, 0-9,+,/ и = в качестве заполняющего символа в конце. Таким образом, на каждые 3 байта данных приходится 4 символа. Существуют и другие вариации Base64 (в основном это касается использования других символов вместо + и /, но в веб разработке вы вряд ли когда-либо с ними встретитесь)

Зачем это нужно?

Так исторически сложилось, что многие форматы передачи и хранения данных используют текст вместо бинарных кодов (html, url схемы, xml, email… и тп). Но что, если формат передачи данных текстовый, а передать необходимо бинарные данные (отдельно либо вместе с текстовыми данными). Вот тут на помощь и приходит base64.

Типовое применение в веб разработке

  1. data: URL схемы для изображений (css, html) .. см. далее подробнее.
  2. Получение base64 представления бинарных данных canvas битмапа .. см. далее подробнее.
  3. Передача картинок и других данных в XML (не используя внешние файлы).
  4. Хранение изображений в базе данных (только если вы знаете, что делаете и зачем).
  5. Включение изображений в email. … (Автор с удовольствием добавит пункты в этот список, если вы подскажете в комментариях).

data: URL и base64 data: URL — это определённая стандартом RFC 2397 схема, которая позволяет включать небольшие элементы данных в строку URL, как если бы они были ссылкой на внешний ресурс. Согласно RFC «data: URI» – это фактически «data: URL» (URL — унифицированный указатель ресурса), хотя реально он ни на что не указывает.

Формат data: URL следующий:

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

Несколько типовых применений на примерах.


Пример использования в HTML:

HTML

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA
AAAoAAAAKCAYAAACNMs+9AAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJ
TUUH1ggDCwMADQ4NnwAAAFVJREFUGJWNkMEJADEIBEcbSDkXUnfSg
nBVeZ8LSAjiwjyEQXSFEIcHGP9oAi+H0Bymgx9MhxbFdZE2a0s9kT
Zdw01ZhhYkABSwgmf1Z6r1SNyfFf4BZ+ZUExcNUQUAAAAASUVORK5
CYII="/>

(Переносы на новую строку осуществлены для облегчения восприятия. Их не должно быть) Все, что следует за data:image/png;base64, – это base64 код небольшого png изображения (красная точка 10×10 px). Этот пример будет выглядеть так – enter image description here


Пример использования в CSS:

CSS

div.red_dotted {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA
AAAoAAAAKCAYAAACNMs+9AAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJ
TUUH1ggDCwMADQ4NnwAAAFVJREFUGJWNkMEJADEIBEcbSDkXUnfSg
nBVeZ8LSAjiwjyEQXSFEIcHGP9oAi+H0Bymgx9MhxbFdZE2a0s9kT
Zdw01ZhhYkABSwgmf1Z6r1SNyfFf4BZ+ZUExcNUQUAAAAASUVORK5
CYII=") center center repeat-x;
    width:100%;
    height:10px;
}
 Сами догадайтесь, как это будет выглядеть ;) 

Получение бинарных данных из canvas в виде текстового base64 представления

HTML

<canvas id="mycanvas" width="300" height="300"></canvas>

JS

// находим canvas
var canvas = document.getElementById('mycanvas');
// получаем контекст
var ctx = canvas.getContext('2d'); 
// рисуем что-нибудь
ctx.beginPath();
ctx.arc(100, 100, 50, 1.5 * Math.PI, 0.5 * Math.PI, false);
ctx.lineWidth = 10;
ctx.stroke();
// получаем base64
console.log(canvas.toDataURL()); 
 Далее вы можете передать base64 на сервер любым удобным способом (это обычный текст), декодировать его и сохранить как png файл.

Метки: , , ,
11 комментариев на “Что такое base64 и зачем он нужен в веб разработке?
  1. Владимир пишет:

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

    1. Есть ведь спрайты, в которые мелкие картинки можно запихнуть
    2. Рост css не будет сильно критичным, какой длины может достигать base64 строка, при каких размерах файла будет целесообразно использовать base64? Спасибо
  2. admin пишет:

    Хорошее замечание ;) попробуем разобраться.

    Такой подход лучше только в тех случаях, когда в зависимости от задачи Вам удобно:

    • Избавится от одного или нескольких внешних подгружаемых файлов (изображений, шрифтов, SVG..), включив их непосредственно в CSS в виде base64.
    • Устранить время задержки между загрузкой (отрисовкой) основного CSS и внешнего подгружаемого содержимого (изображений, шрифтов, SVG..)

    Включение картинки непосредственно в CSS в виде base64, позволит браузеру отобразить ее при первой отрисовке страницы, не делая дополнительных запросов к серверу. Это особенно заметно в медленных мобильных браузерах и при медленном соединении.

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

    Я не советую использовать этот подход везде, но в зависимости от задачи и требований к приложению, иногда такой подход может быть лучше. В целом.. Если пункты a) и b) не критичны для Ваших проектов, то включать изображения в css/html в виде base64 не стоит :)

    Другие области применения в веб

    • Работа c canvas ( там практически никуда не денешься не зная, что такое base64 :) )
    • Передача картинок и других данных в XML (не используя внешние файлы).
    • Включение изображений в email.
  3. Ян пишет:

    Отличная статья, спасибо. Особенно актуально для email-писем.

  4. Андрей пишет:

    Можно заметить что при малых размерах изображений css, применяя gzip сжатие для файла стилей(и отдачу сжатого файла с сервера) получаем не только устранение запросов но и сокращение объёма(20%-25%).

  5. Сергей пишет:

    Конвертер изображения в base64
    http://crazysquirrel.ru/#!image_to_base64

  6. Алексей пишет:

    Вот интересный конвертер. Есть и base64 тут: http://true-converter.com/ru/converters/text_encoding.html

  7. Константин.М пишет:

    Спасибо за статью, как раз то что нужно.

  8. Станислав пишет:

    Давно использую данный метод. Могу сразу сказать, что если картинок не слишком много, т.е. когда не нужна автоматизация, можно использовать обычный Total Commander: Файлы -> Кодировать (MIME, UUE, XXE)… Можете посмотреть у меня на сайте CrewingTop. Эпоха старых IE давно прошла, так что метод весьма действенный. Единственное, что у меня вызывает некоторые сомнения, так это валидаторы css, что-то они уж сильно ругаются.

    • Станислав пишет:

      Апдейт для предыдущего поста: нашел решение, как подружить css с валидатором.

      Так например для моего сайта будет выглядеть маленькая картинка:

      td.pic2 {background-image: url(“data:image/gif;base64,R0lGODlhAQAUAJEAAJinsxMVRBgARv///ywAAAAAAQAUAAACBtSOORA6BQA7″);}

      Обязательно нужно использовать кавычки url(“…, соответственно и в конце. Тогда валидация проходит без проблем.

  9. Мария пишет:

    Спасибо большое за статью и примеры.
    Пригодились для отсылки писем.

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

*

* Copy This Password *

* Type Or Paste Password Here *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Узнавай о новых статьях первым!

Спасибо за лайк в FACEBOOK
Подписывайтесь на новости вконтакте
Последние статьи от html5.by