Base64 кодирование

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

Чтобы получить Data URI картинки для CSS или <img>, удобнее отдельная страница «Картинка в Base64».

Действие

Кодировать Декодировать

base64url (для URL и JWT)Data URI

Кодируем…

Текст

Открыть файл

Файл не выбран

До 2 МБ, файл можно перетащить на поле. Для Base64 подходит любой файл, например картинка; файл обрабатывается только в вашем браузере.

Привет, basicweb! 👋

Base64

Что такое Base64

Base64 записывает любые байты 64 печатными символами: латинскими буквами, цифрами, + и /. Так двоичные данные можно передать там, где допускается только текст: в JSON, в письме, в атрибуте HTML. Каждые 3 байта превращаются в 4 символа, поэтому результат примерно на треть длиннее исходника. Если байтов не хватает до тройки, в конце ставится = или ==.

Base64 — это кодирование, а не шифрование: любой может раскодировать строку обратно. Не используйте его, чтобы скрыть пароли или персональные данные.

Base64 и кириллица в JavaScript

Встроенные функции btoa() и atob() работают только с символами Latin-1, поэтому btoa('Привет') выбрасывает ошибку. Текст сначала переводят в байты UTF-8 — так же поступает и этот инструмент:

const bytes = new TextEncoder().encode('Привет')
const base64 = btoa(String.fromCharCode(...bytes)) // "0J/RgNC40LLQtdGC"

const decoded = Uint8Array.from(atob(base64), (char) => char.charCodeAt(0))
new TextDecoder().decode(decoded) // "Привет"

Для больших данных передавайте байты в String.fromCharCode частями: у функции ограничено число аргументов.

base64url и Data URI

• base64url заменяет + на -, / на _ и обычно опускает =: такую строку можно вставить в адрес без кодирования. Этот вариант используется в JWT.
• Data URI встраивает файл прямо в разметку или стили: data:image/png;base64,iVBORw0…. Это удобно для маленьких иконок; большие картинки лучше подключать отдельным файлом — Base64 увеличивает размер, а встроенные данные не кэшируются отдельно.

URL-кодирование и экранирование HTML

Это другие задачи с отдельными инструментами: «URL-кодирование» переводит кириллицу и спецсимволы в %XX для адресов, а «Экранирование HTML» заменяет <, & и кавычки кодами для вставки текста в разметку.