Что такое Base64: как картинка превращается в строку текста

Что такое Base64 простыми словами

Base64 — это способ записать любые данные с помощью всего 64 безопасных символов: латинских букв, цифр и пары знаков. Главное, что нужно понять сразу: Base64 — это не формат картинки. Это кодировка, «обёртка» поверх файла. Сама картинка не меняется — меняется только её запись: вместо непонятных байтов получается длинная строка из букв и цифр, которую можно вставить куда угодно как обычный текст.

Представьте, что вам нужно продиктовать другу содержимое фотографии по телефону. Байты диктовать невозможно — там полно «непечатаемых» значений. А вот строку из букв A–Z, a–z, цифр и пары символов продиктовать реально. Base64 решает ровно эту задачу: переводит «непроизносимые» данные в текст, который спокойно проходит по каналам, рассчитанным только на буквы.

Зачем превращать данные в текст

Многие системы исторически умеют работать только с текстом. Электронная почта была придумана для писем из обычных букв (так называемый набор ASCII); JSON — текстовый формат, в котором программы обмениваются данными; адрес страницы (URL) — тоже текст. Если попытаться засунуть в них «сырые» байты картинки, что-нибудь обязательно сломается: один из байтов совпадёт со служебным символом, и данные испортятся.

Base64 — это универсальный переходник. Он гарантирует, что в результате не будет ни одного «опасного» символа, и данные доедут целыми. Именно поэтому кодировку используют десятилетиями: вложения в письмах, токены авторизации, встроенные картинки на веб-страницах — везде, где двоичные данные должны притвориться текстом.

Кстати, сам приём гораздо старше веба. Ещё в 1990-х этот приём встроили в стандарт электронной почты, чтобы пересылать вложения по каналам, которые умели передавать только обычные буквы и цифры. Так что когда вы прикрепляете фотографию к письму, она почти наверняка путешествует к адресату именно в виде Base64 — просто почтовый клиент прячет это от ваших глаз.

Как это работает: 3 байта → 4 символа

Принцип на удивление простой. Компьютер берёт данные по 3 байта (это 24 бита) и нарезает их не по 8 бит, как обычно, а по 6 бит. Получается ровно четыре кусочка по 6 бит. Каждый такой кусочек — это число от 0 до 63, и для каждого числа в алфавите Base64 есть свой символ.

Разберём на коротком слове Man. Его три буквы в кодах ASCII — это 77, 97 и 110. В двоичном виде: 01001101 01100001 01101110. Перегруппируем по 6 бит: 010011 010110 000101 101110. Это числа 19, 22, 5 и 46. По таблице Base64 им соответствуют символы T, W, F, u. Итог: слово Man превращается в TWFu.

"Man"  →  01001101 01100001 01101110
       →  010011 | 010110 | 000101 | 101110
       →    19   |   22   |   5    |   46
       →    T    |   W    |   F    |   u
"Man"  →  "TWFu"

С картинкой то же самое, только байтов миллионы. Программа просто прогоняет весь файл через этот конвейер «3 байта → 4 символа» от начала до конца — и на выходе получается длинная текстовая строка.

Алфавит и загадочные знаки =

Стандартный алфавит Base64 описан в спецификации RFC 4648 и состоит из 64 символов в строгом порядке: сначала заглавные A–Z (числа 0–25), затем строчные a–z (26–51), потом цифры 0–9 (52–61) и в самом конце два знака — + (62) и / (63).

А что делать, если данные не делятся ровно на 3 байта? Тогда в конце появляются знаки = — это padding, выравнивание. Один = означает, что в последнем блоке было 2 байта, два == — что всего 1 байт. Эти символы не несут данных, они лишь подсказывают декодеру, как правильно восстановить хвост.

Data URI: картинка прямо в адресе

Самое полезное применение Base64 для веба — это data URI (описан в RFC 2397). Обычно картинка подключается ссылкой: src="logo.png", и браузер идёт за файлом на сервер. Data URI переворачивает идею: вместо ссылки на файл прямо в адрес кладут сами данные.

Выглядит он так: data: + тип данных + ;base64, + сама строка. Например:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg
AAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9
awAAAABJRU5ErkJggg==">

Браузер видит такой src, понимает «данные внутри уже есть» и рисует картинку без отдельного запроса к серверу. Та же строка работает и в CSS — например, background: url(data:image/png;base64,…). Это и есть способ «вшить» изображение прямо в страницу.

Почему текст тяжелее файла

У красивого трюка есть цена. Раз мы кодируем каждые 3 байта четырьмя символами, итоговая строка получается ровно на треть длиннее исходных данных — рост примерно +33%. Картинка на 9 КБ превратится в строку около 12 КБ.

Поэтому Base64 хорош для маленьких вещей — иконок, крошечных фоновых текстур, SVG-значков. Для больших фотографий лишние 33% и потеря кеширования обычно перевешивают выгоду. Подробнее о балансе скорости мы разбираем в статье «Base64-картинки в вебе» и сравниваем с обычными файлами в материале «Base64 против файлов».

Как закодировать картинку

Руками считать биты, конечно, никто не будет. Проще всего загрузить файл в онлайн-конвертер и получить готовую строку data URI, которую можно сразу вставить в код.

Если у вас, наоборот, есть строка Base64 и нужно получить из неё обычный файл — поможет обратное преобразование Base64 в PNG. А все доступные конвертеры собраны на странице всех форматов.