Что такое Base64: как раскодировать строку и посмотреть, что внутри

Открываете код страницы или ответ API — и вместо картинки видите длиннющую строку из букв, цифр и символов +, /, =, которая начинается с data:image/png;base64,iVBORw0KG.... Это не мусор и не ошибка — это Base64, способ упаковать любые данные (картинку, файл, текст) в обычные символы, которые можно вставить куда угодно: в HTML, JSON, URL. Разберём, как это устроено и что делать с такой строкой дальше.

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

Base64 — это кодирование, а не шифрование: оно превращает байты (любые — текст, картинку, PDF) в текст из 64 «безопасных» символов: A-Z, a-z, 0-9, + и /. Каждые 3 байта исходных данных становятся 4 символами Base64, поэтому результат примерно на треть длиннее оригинала.

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

Что за строка data:image/png;base64 и как посмотреть картинку

Самый частый повод встретить Base64 — не файл, а data URL: способ вставить картинку прямо в HTML или CSS, без отдельного файла на сервере. Выглядит это так:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />

После data:image/png;base64, идёт содержимое самой картинки, закодированное в Base64. Браузер такую строку раскодирует и отрисовывает как обычное изображение — именно поэтому она может быть очень длинной (несколько тысяч символов на маленькую иконку).

Если у вас на руках такая строка целиком — самый быстрый способ увидеть картинку без единого инструмента: скопировать всё, что начинается с data:, и вставить это в адресную строку браузера. Браузер понимает data URL нативно и покажет картинку так же, как обычную ссылку на изображение.

Как раскодировать текст и строки Base64

Для текстовых данных — токенов, JSON, обычных строк — в кодировщике Base64 есть оба направления сразу: печатаете в поле «Обычный текст» — рядом появляется Base64, и наоборот. Здесь же можно включить URL-безопасный вариант кодирования (символы +// заменяются на -/_ — это нужно, если строка Base64 сама идёт частью URL, как в JWT) и разбивку на строки по 76 символов — так исторически форматируют Base64 в email-вложениях (MIME).

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

Частые ошибки при декодировании Base64

Если раскодировать не получается, дело почти всегда в одном из трёх:

• Лишние символы. В строку попал перенос строки, пробел или символ, которого нет в алфавите Base64 (A-Z, a-z, 0-9, +, /, =) — часто это случайно скопированный фрагмент текста рядом со строкой.
• Сломанный «паддинг». Base64 дополняется символами = до длины, кратной 4. Если строку обрезали (например, скопировали не до конца), декодер не сможет её разобрать.
• Перепутан алфавит. Обычный Base64 и Base64URL отличаются двумя символами (+// против -/_) — строка из JWT или URL не раскодируется как обычный Base64, пока не переключить соответствующую настройку.

Base64 — это не шифрование

Стоит запомнить отдельно: у Base64 нет ключа, и раскодировать его может кто угодно за секунду — это ровно то же самое кодирование, что и btoa()/atob() в JavaScript, без какой-либо защиты. Если нужно скрыть данные, а не просто передать их текстом, Base64 тут не помощник — нужно настоящее шифрование.

Коротко

• Base64 превращает любые байты в текст из 64 безопасных символов — это кодирование для передачи данных, а не шифрование.
• Строка data:image/png;base64,... — это картинка, вставленная прямо в HTML/CSS; чтобы её увидеть, можно вставить строку целиком в адресную строку браузера.
• Декодирование чаще всего падает из-за лишних символов, обрезанного паддинга или путаницы между обычным Base64 и Base64URL (как в JWT).