Что такое Base64
Base64 — способ представить любые двоичные данные с помощью 64 печатных символов: латинских букв, цифр, плюса и слэша. Изначально он появился в стандарте электронной почты MIME, где по каналу можно было передавать только текст, а вложения нужно было как-то доставить.
Алгоритм берёт по три байта исходных данных (24 бита) и разбивает их на четыре группы по 6 бит. Каждая группа превращается в один символ из таблицы. Отсюда главное следствие: объём вырастает примерно на треть. Файл в 300 КБ после кодирования займёт около 400 КБ.
Где применяется
- Data URL в вёрстке — маленькая иконка или SVG встраивается прямо в HTML или CSS, экономя один HTTP-запрос
- Вложения в письмах — стандарт MIME по-прежнему кодирует все файлы именно так
- JSON и API — двоичные данные нельзя положить в JSON напрямую, Base64 решает эту проблему
- JWT-токены — заголовок и полезная нагрузка токена закодированы в URL-safe варианте
- HTTP Basic Auth — логин и пароль передаются в виде
base64(login:password) - Ключи и сертификаты — формат PEM хранит их в Base64 между строками BEGIN и END
Обычный и URL-safe варианты
Стандартный алфавит содержит символы + и /, которые имеют особое значение в веб-адресах. В URL плюс интерпретируется как пробел, а слэш разделяет части пути. Поэтому существует URL-safe вариант, где они заменены на - и _.
| Символ | Стандартный | URL-safe |
|---|---|---|
| 62-й | + | - |
| 63-й | / | _ |
| Дополнение | = | часто опускается |
Символ = в конце — это padding, дополнение до кратности четырём. Он нужен, чтобы декодер понял, сколько байт было в последней неполной группе. В URL и JWT его обычно убирают, а при декодировании восстанавливают автоматически.
Data URL: когда стоит и когда нет
Встраивание картинки прямо в код избавляет от отдельного запроса к серверу. Но у подхода есть цена, и решение зависит от размера файла.
- Стоит применять — для иконок, простых SVG и картинок меньше 5 КБ, особенно если они нужны сразу при первой отрисовке
- Не стоит — для крупных изображений: они раздувают HTML или CSS, а главное, теряют возможность кешироваться отдельно. Браузер будет скачивать их заново при каждом изменении страницы
- Учтите сжатие — Base64 плохо сжимается gzip по сравнению с оригинальным двоичным файлом
Кириллица и кодировки
Русский текст кодируется корректно: перед преобразованием строка переводится в байты UTF-8, где каждая кириллическая буква занимает два байта. Именно поэтому закодированная русская фраза выходит примерно вдвое длиннее аналогичной английской.
Простая функция btoa() в браузере с кириллицей падает с ошибкой, поскольку работает только с однобайтовыми символами. Здесь этот момент обработан через TextEncoder, так что текст на любом языке кодируется и восстанавливается без потерь.
Безопасность
Преобразование выполняется прямо в браузере. Ни текст, ни файлы не отправляются на сервер и нигде не сохраняются. Файлы обрабатываются через FileReader локально — они не покидают ваше устройство.
Частые вопросы
Base64 — это шифрование?
Почему закодированная строка длиннее оригинала?
Что означают знаки равенства в конце?
Когда нужен URL-safe вариант?
+ и / в этих контекстах ломают разбор, поэтому их заменяют на - и _.