Как перевести картинку в Base64 и обратно: 4 способа

Когда это вообще нужно

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

Принцип у всех способов одинаковый: на входе — байты картинки, на выходе — текст из 64 символов, который примерно на треть длиннее исходника. Меняется только инструмент: где-то это кнопка в браузере, где-то три строки кода. Поэтому сначала определитесь, где вам нужна строка — на странице, в скрипте или в API, — а способ подберётся сам.

Если же вы просто хотите уменьшить или сконвертировать фотографию для сайта — Base64 не ваш инструмент. Подробнее о том, где встроенные картинки уместны, а где вредят, мы пишем в статье «Base64-картинки в вебе».

Способ 1: онлайн-конвертер (самый простой)

Если код вам не нужен — это лучший путь. Загружаете PNG, получаете готовую строку data URI и копируете её. Работает в любом браузере, в том числе на телефоне, и не требует установки.

Способ 2: JavaScript прямо в браузере

Когда картинку загружает пользователь, а закодировать её нужно на лету, в браузере есть встроенный инструмент — FileReader. Его метод readAsDataURL сразу возвращает готовую строку data URI, никаких библиотек не нужно.

const input = document.querySelector('input[type=file]');
input.addEventListener('change', () => {
  const reader = new FileReader();
  reader.onload = () => {
    console.log(reader.result);
    // → "data:image/png;base64,iVBORw0KGgo..."
  };
  reader.readAsDataURL(input.files[0]);
});

Для коротких текстов или уже готовых двоичных данных пригодятся встроенные функции btoa() (кодирование) и atob() (декодирование). Но для файлов FileReader удобнее: он сам формирует префикс data:…;base64,.

Способ 3: Python и командная строка

Если изображение нужно обработать на сервере или в скрипте, проще всего взять стандартный модуль base64 в Python. Открываем файл в двоичном режиме (rb), кодируем и при желании добавляем префикс data URI:

import base64

with open("logo.png", "rb") as f:
    data = base64.b64encode(f.read()).decode()

uri = "data:image/png;base64," + data
print(uri)

Любителям терминала пригодится утилита base64 прямо из командной строки Linux и macOS: base64 logo.png > logo.txt закодирует файл, а флаг -d (base64 -d logo.txt > logo.png) раскодирует обратно. Быстро и без единой строчки кода.

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

{
  "user": "anna",
  "avatar": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..."
}

На стороне сервера эта строка декодируется обратно в файл тем же base64.b64decode. Именно так аватарки и небольшие вложения часто путешествуют между фронтендом и бэкендом.

Способ 4: вставка в CSS и HTML

Получив строку, остаётся её правильно использовать. В HTML она идёт прямо в атрибут src, в CSS — внутрь url():

<!-- HTML -->
<img src="data:image/png;base64,iVBORw0KGgo..." alt="Логотип">

/* CSS */
.icon {
  background: url("data:image/svg+xml;base64,PHN2Zy...") no-repeat;
}

Обратите внимание: у SVG тип будет image/svg+xml, у JPG — image/jpeg. Если указать неверный тип, браузер может не отрисовать картинку. Вот шпаргалка по самым частым типам:

Подробно о применении в стилях и письмах — в статье «Base64 в CSS и email».

Как декодировать обратно

Обратное преобразование — это вернуть из строки нормальный файл. Самый простой путь снова онлайн: вставляете строку (с префиксом data: или без) в конвертер Base64 → PNG и скачиваете готовое изображение.

В коде на Python всё симметрично: base64.b64decode(строка) вернёт байты, которые записываются в файл в режиме wb. Главное — сначала отрезать префикс data:image/png;base64,, если он есть: декодеру нужны только сами данные.

Частые ошибки

• Забыли отрезать префикс. Декодер ждёт чистый Base64, а вы передали ему data:image/png;base64,… целиком — получаете «битый» файл. Уберите всё до запятой.
• Неверный тип данных. Указали image/png для JPG-картинки — браузер откажется её рисовать. Этот тип (его называют MIME-тип) должен совпадать с реальным форматом.
• Перенос строк. Некоторые инструменты разбивают длинную строку на несколько коротких (переносы строк). Для data URI такие переносы лучше убрать — иначе строка может не сработать в HTML.
• Огромные файлы. Закодировали фотографию на 5 МБ — и страница раздулась. Для крупных изображений Base64 не нужен.

Хотите вернуть файл прямо сейчас? Воспользуйтесь конвертером Base64 → PNG, а полный список преобразований всегда есть на странице всех форматов.