Base64 – способ кодирования произвольных двоичных данных в ASCII текст. По своей сути кодирование очень простое. Каждые шесть бит на входе кодируется в один из символов 64-буквенного алфавита. “Стандартный” алфавит, который для этого используется – это A-Z, a-z, 0-9,+,/ и = в качестве заполняющего символа в конце. Таким образом, на каждые 3 байта данных приходится 4 символа. Существуют и другие вариации Base64 (в основном это касается использования других символов вместо + и /, но в веб разработке вы вряд ли когда-либо с ними встретитесь) 
Зачем это нужно?
Так исторически сложилось, что многие форматы передачи и хранения данных используют текст вместо бинарных кодов (html, url схемы, xml, email… и тп). Но что, если формат передачи данных текстовый, а передать необходимо бинарные данные (отдельно либо вместе с текстовыми данными). Вот тут на помощь и приходит base64.
Типовое применение в веб разработке
- data: URL схемы для изображений (css, html) .. см. далее подробнее.
- Получение base64 представления бинарных данных canvas битмапа .. см. далее подробнее.
- Передача картинок и других данных в XML (не используя внешние файлы).
- Хранение изображений в базе данных (только если вы знаете, что делаете и зачем).
- Включение изображений в 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). Этот пример будет выглядеть так – 
Пример использования в 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 файл.
PDF и версия для печати
Так а чем лучше такой подход для изображений? Не раскрыта тема, зачем надо такое использовать.
Хорошее замечание ;) попробуем разобраться.
Такой подход лучше только в тех случаях, когда в зависимости от задачи Вам удобно:
Включение картинки непосредственно в CSS в виде base64, позволит браузеру отобразить ее при первой отрисовке страницы, не делая дополнительных запросов к серверу. Это особенно заметно в медленных мобильных браузерах и при медленном соединении.
Так же можно поступить с подгружаемыми шрифтами. Включая их в CSS в виде base64, вы гарантируете, что кастомный шрифт уже будет правильно отображен во время первой отрисовки страницы, а не спустя некоторое время (которое обычно браузер тратит на подгрузку внешнего шрифта)
Я не советую использовать этот подход везде, но в зависимости от задачи и требований к приложению, иногда такой подход может быть лучше. В целом.. Если пункты a) и b) не критичны для Ваших проектов, то включать изображения в css/html в виде base64 не стоит :)
Другие области применения в веб
Отличная статья, спасибо. Особенно актуально для email-писем.
Можно заметить что при малых размерах изображений css, применяя gzip сжатие для файла стилей(и отдачу сжатого файла с сервера) получаем не только устранение запросов но и сокращение объёма(20%-25%).
Конвертер изображения в base64
http://crazysquirrel.ru/#!image_to_base64
Хорошая тулза по теме:
http://www.opinionatedgeek.com/dotnet/tools/base64encode/
Вот интересный конвертер. Есть и base64 тут: http://true-converter.com/ru/converters/text_encoding.html
Спасибо за статью, как раз то что нужно.
Давно использую данный метод. Могу сразу сказать, что если картинок не слишком много, т.е. когда не нужна автоматизация, можно использовать обычный Total Commander: Файлы -> Кодировать (MIME, UUE, XXE)… Можете посмотреть у меня на сайте CrewingTop. Эпоха старых IE давно прошла, так что метод весьма действенный. Единственное, что у меня вызывает некоторые сомнения, так это валидаторы css, что-то они уж сильно ругаются.
Апдейт для предыдущего поста: нашел решение, как подружить css с валидатором.
Так например для моего сайта будет выглядеть маленькая картинка:
td.pic2 {background-image: url(“data:image/gif;base64,R0lGODlhAQAUAJEAAJinsxMVRBgARv///ywAAAAAAQAUAAACBtSOORA6BQA7”);}
Обязательно нужно использовать кавычки url(“…, соответственно и в конце. Тогда валидация проходит без проблем.
Спасибо большое за статью и примеры.
Пригодились для отсылки писем.
https://ibstore.ru/base64decoder – пользуйтесь ))