Как работает кодировка Base64 и зачем она нужна разработчикам

В разработке часто возникают ситуации, когда нужно встроить изображение в HTML-код, отправить файл через JSON-запрос или передать бинарные данные там, где протокол ожидает только текст. Для всех этих задач используется кодировка Base64, о которой мы поговорим в статье. Вы узнаете, как она устроена и где применяется.

Содержание

• Что такое кодировка Base64 и для чего её придумали
• Как работает алгоритм кодирования
• Как происходит декодирование Base64
• Инструменты для работы с Base64
• Где используется Base64 и когда его лучше не применять

Что такое кодировка Base64 и для чего её придумали

Данные в компьютерах хранятся в двоичном (бинарном) виде — как последовательность нулей и единиц, организованных в байты. Однако многие каналы передачи данных и протоколы разрабатывались для работы исключительно с текстовой информацией в определённых кодировках, таких как ASCII. Особенно это касалось SMTP-протокола для электронной почты, ранних версий HTTP API и HTML-форм.

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

Например, если отправить изображение или PDF-файл через такой канал, часть байтов может совпасть с управляющими символами. В результате к получателю придёт повреждённый файл с бессмысленным набором символов. Base64 придумали, чтобы решить эту проблему.

Base64 — это метод кодирования, который преобразует двоичные данные (байты) в текстовую строку из безопасных ASCII-символов: латинских букв (A–Z, a–z), цифр (0–9) и символов «+» и «/». Эти символы точно пройдут через любой текстовый канал без искажений. Дело в том, что метод стандартизирован в RFC 4648 — документе, который определяет правила кодирования для универсальной совместимости на любых языках программирования и платформах.

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

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

Читайте также:

Двоичная (бинарная) система счисления: что это и как ей пользоваться

Как работает алгоритм кодирования

Алгоритм Base64 преобразует каждые три байта исходных данных в четыре текстовых символа. При этом он работает не с буквами, а с их числовым представлением — битами. Вся логика сводится к перегруппировке этих битов и последующему сопоставлению получившихся чисел с символами из алфавита Base64. Давайте разберём этот процесс пошагово на примере и закодируем слово Sky.

Преобразуем символы в байты и объединяем их в битный блок

В кодировке ASCII каждый символ представлен числом. Буква S — это число 83 в десятичной системе, k — число 107, а y — 121. В памяти компьютера эти числа хранятся в двоичном виде — как байты по восемь бит:

• 83 → 01010011;
• 107 → 01101011;
• 121 → 01111001.

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

S        k        y
↓        ↓        ↓
01010011 01101011 01111001

Далее алгоритм объединяет все байты в одну непрерывную цепочку:

 010100110110101101111001
└────────────────────────┘
        24 бита

Переводим битовые группы в символы Base64

24-битный блок делится на четыре группы по шесть бит. Каждая группа представляет собой число от 0 до 63, которое используется как индекс для поиска соответствующего символа в таблице алфавита Base64:

010100 | 110110 | 101101 | 111001
↓        ↓        ↓        ↓
20       54       45       57  

Посмотрите, мы взяли все эти числа из таблицы:

Нам осталось взять полученные числа и в этой же таблице найти для каждого соответствующий символ: 20 → U, 54 → 2, 45 → t, 57 → 5. В завершение просто объединяем все символы и получаем строку U2t5.

Вот как выглядит полный процесс кодирования слова Sky в Base64:

Sky
↓
S        k        y                  
↓        ↓        ↓
83       107      121                 (ASCII-коды символов)
↓        ↓        ↓
01010011 01101011 01111001            (байты по 8 бит)
↓
010100110110101101111001            (единый 24-битный блок)
↓
010100   110110   101101   111001     (4 группы по 6 бит)
↓        ↓        ↓        ↓   
20       54       45       57  (значения для таблицы Base64)
↓        ↓        ↓        ↓
U        2        t        5          (символы Base64)
↓
U2t5

Используем паддинг для неполных блоков

Паддинг в Base64 — это символ = в конце закодированной строки, который появляется, когда исходные данные не делятся на три байта без остатка. Он показывает, что последний блок данных был неполным.

В примере со словом Sky паддинг не понадобился, потому что Base64 всегда обрабатывает данные блоками по три байта и длина исходных данных (три байта = 24 бита) делится на три без остатка. Однако если попробовать закодировать слово Go, получится так:

Go
↓
G        o                          
↓        ↓
71       111                     (ASCII-коды символов)
↓        ↓
01000111 01101111                (байты по 8 бит)
↓
0100011101101111                 (единый 16-битный блок)
↓
010001   110110   1111           (получаем неполный блок)
↓        ↓        ↓
010001   110110   111100         (дополняем нулями до 6 бит)
↓        ↓        ↓
17       54       60             (значения для Base64)
↓        ↓        ↓
R        2        8        =     (символы Base64 + паддинг)
↓
R28=

Как происходит декодирование Base64

Декодирование — это процесс, который восстанавливает исходные двоичные данные из Base64-строки. Алгоритм проходит те же шаги, но в обратном порядке. Давайте декодируем R28= обратно в слово Go.

Сначала алгоритм отбрасывает символы паддинга и преобразует каждый оставшийся символ обратно в его 6-битное значение:

R28=
↓
R        2        8       
↓        ↓        ↓
17       54       60

Затем каждое число преобразуется в 6-битную группу, после чего все группы объединяются в единую битовую последовательность:

17       54       60                
↓        ↓        ↓
010001   110110   111100            
↓
010001110110111100

Продолжаем и полученную битовую цепочку делим на байты по 8 бит. Поскольку у нас был паддинг, последние биты 00 нужно отбросить:

010001110110111100                   
↓
01000111 01101111 00                
↓
01000111 01101111                   
↓
71       111

Обращаемся к ASCII и преобразуем полученные числа в символы:

71       111                         
↓        ↓
G        o                           
↓
Go

Инструменты для работы с Base64

Кодировать и декодировать информацию в Base64 вручную — сложно и непродуктивно. Поэтому на практике разработчики используют инструменты, которые делают всё автоматически и без ошибок.

Онлайн-сервисы для разовых задач. Если нужно быстро закодировать строку или файл один раз, удобнее всего воспользоваться онлайн-сервисами. Например, попробуйте base64.guru. Он умеет работать с текстом, изображениями и файлами, а также содержит справочные материалы по RFC 4648 и примеры кода на разных языках.

Давайте закодируем файл smile.png. Выбираем кодер Изображение в Base64, загружаем файл и жмём Кодировать изображение в Base64.

Теперь декодируем строку обратно в изображение. Копируем её, выбираем декодер Base64, загружаем строку и нажимаем Декодировать Base64 в изображение. Получаем исходный смайлик.

Среди других сервисов можно использовать base64encode.org и CyberChef. А ещё рекомендуем попробовать наш кастомный декодер, который мы сделали для этой статьи. Его фишка в том, что он не просто кодирует, но и показывает все шаги преобразования текста в строку Base64 и обратно. Например, вот так кодируется знакомое слово Sky:

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

// Кодирование строки
const text = 'Hello, world!';
const encoded = btoa(text);
console.log(encoded); // SGVsbG8sIHdvcmxkIQ==

// Декодирование строки
const decoded = atob(encoded);
console.log(decoded); // Hello, world!

Автоматизация в сборщиках проектов. В крупных проектах с большим количеством изображений и файлов преобразовывать каждый вручную неэффективно. Поэтому этой рутиной занимаются сборщики:

• Во время сборки проекта сборщик анализирует все файлы и проверяет размер каждого изображения или ресурса.
• Если файл меньше заданного порога (обычно 4–10 КБ), сборщик конвертирует его в Base64 и встраивает в CSS или JavaScript.
• Если больше порога — сборщик оставляет его отдельным файлом, который браузер загрузит по обычной ссылке.

Среди популярных сборщиков вы можете попробовать Webpack, Vite, Parcel и Rollup. Только имейте в виду, что для работы любого сборщика потребуется Node.js и базовая настройка проекта через npm или yarn.

Где используется Base64 и когда его лучше не применять

Base64 — это универсальный стандарт, который работает везде: на серверах, в браузерах, в API и мобильных приложениях. Давайте посмотрим, в каких областях разработки он применяется чаще всего.

Веб-разработка. Мелкие изображения и иконки встраивают в HTML или CSS, чтобы уменьшить количество HTTP-запросов и ускорить загрузку страницы. Например, добавим маленькую иконку в HTML:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJ..." alt="icon">

Или фоновое изображение в CSS:

.icon {
  background-image: url(data:image/png;base64,iVBORw0KGg...);
}

Также в CSS-файл через Base64 можно подключить веб-шрифты:

@font-face {
  font-family: 'CustomFont';
  src: url(data:font/woff2;base64,d09GMgABAAAAAH8QAA8AAAAAV...) format('woff2');
}

В JavaScript можно конвертировать содержимое HTML5 Canvas в Base64 с помощью метода toDataURL (). Это удобно, когда нужно сохранить изображение, нарисованное пользователем, на клиенте или отправить графику на сервер без создания отдельного файла:

const canvas = document.getElementById('myCanvas'); 
const dataURL = canvas.toDataURL('image/png'); // dataURL: "data:image/png;base64,iVBORw0KGgo..."

API и передача данных. Base64 позволяет передавать бинарные данные (изображения, PDF-файлы, аудио) через REST API в формате JSON или XML без использования multipart-форматов. Это очень помогает, когда клиент и сервер обмениваются данными через протоколы, которые не поддерживают бинарные форматы напрямую.

Например, мобильное приложение может отправить фотографию профиля пользователя на сервер через простой JSON-запрос:

{
  "userId": "12345",
  "profilePhoto": "iVBORw0KGgoAAAANSUhEUgAAAAUA...",
  "timestamp": "2025-11-27T10:13:00Z"
}

Сервер получает строку Base64, декодирует её и сохраняет файл. Без Base64 пришлось бы использовать multipart/form-data, что усложнило бы код и потребовало дополнительной обработки на стороне сервера.

Электронная почта. Все прикреплённые файлы в письмах кодируются в Base64 перед отправкой согласно стандарту MIME. Затем почтовый клиент получателя декодирует эту строку и показывает файл в его исходном виде. Например, когда вы отправляете письмо с прикреплённым PDF-файлом, он выглядит примерно так:

Content-Type: application/pdf; name="document.pdf"
Content-Transfer-Encoding: base64

JVBERi0xLjQKJeLjz9MKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQg...
[закодированное содержимое файла]
...RU9GCg==

Криптография и безопасность. Ключи шифрования, SSL-/TLS-сертификаты и цифровые подписи часто хранятся в текстовом формате Base64. Это упрощает их копирование, передачу и хранение в конфигурационных файлах. Например, SSL-сертификат выглядит так:

-----BEGIN CERTIFICATE-----
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAn6...
-----END CERTIFICATE-----

Несмотря на универсальность, Base64 не подходит для работы с большими файлами. Причина в том, что закодированные данные увеличиваются примерно на 33% по сравнению с исходным размером. Например, изображение размером 100 КБ после кодирования в Base64 займёт около 133 КБ, а файл в 1 МБ превратится в 1,33 МБ — это довольно ощутимая разница для производительности веб-страницы.

Ещё один момент — влияние на SEO и доступность. Поисковые системы не индексируют изображения в Base64, а скринридеры могут обрабатывать их некорректно. Если эти моменты важны для вашего проекта, лучше использовать обычный тег <img> с атрибутом alt.

И напоследок напомним о безопасности: Base64 — это способ кодирования, а не шифрования. Любой человек или программа может декодировать строку обратно в исходный вид. Поэтому никогда не используйте Base64 для защиты конфиденциальных данных — для этого есть свои алгоритмы шифрования вроде AES, RSA или bcrypt.