Конвертер Base64 в изображение

Что такое декодирование Base64 в изображение?

// A Base64 PNG payload (no prefix)
iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

// The decoder infers the format from the leading bytes:
//   iVBORw0KGgo → PNG
//   /9j/        → JPEG
//   R0lGOD      → GIF
//   UklGR       → WebP
//   PHN2Zy      → SVG (<svg)

// Reconstructed as a real file, downloadable as image.png
// (1 × 1 transparent PNG, 68 bytes — lossless round trip)

Ключевые возможности

Примеры

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

PNG 1 × 1, прозрачный — предпросмотр отрисован, скачивается как .png

/9j/4AAQSkZJRgABAQEAYABgAAD…

JPEG определён по магическим байтам — предпросмотр + скачивание как .jpg

iVBORw0KGgoAAAANS
UhEUgAAAAEAAAAB
CAYAAAA…

Пробелы убраны автоматически — валидный PNG декодирован

Как преобразовать Base64 в изображение

1. 1

   Вставьте строку Base64

   Вставьте полный data URI или просто сырой payload Base64. Декодер автоматически убирает пробелы и переносы строк и принимает ввод с префиксом data: или без него.

2. 2

   Проверьте предпросмотр и метаданные

   Изображение отрисовывается мгновенно на шахматном фоне, чтобы прозрачность была видна. Инструмент показывает декодированные размеры, тип MIME и размер в байтах — выводя формат по магическим байтам, когда префикса нет.

3. 3

   Скачайте изображение

   Нажмите «Скачать», чтобы сохранить восстановленный файл с правильным расширением. Декодирование без потерь, поэтому результат байт-в-байт идентичен исходному закодированному изображению.

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

…WjR9awAAAABJRU5ErkJggg
// missing trailing == — fails to decode

…WjR9awAAAABJRU5ErkJggg==
// complete with padding — decodes cleanly

JVBERi0xLjcN…
// this is a Base64 PDF (%PDF header), not an image

iVBORw0KGgo…
// this is a Base64 PNG — renders correctly

url("data:image/png;base64,iVBORw0KGgo…")
// the url(" and ") are not part of the data

data:image/png;base64,iVBORw0KGgo…
// just the data URI

data:image/png;base64,iVBORw0KGgo%2B%2F…
// %2B / %2F are URL-encoded + and /

data:image/png;base64,iVBORw0KGgo+/…
// URL-decode first, then decode the image

Типичные сценарии

Извлечь ресурс из data URI

Нашли изображение, встроенное в таблицу стилей или HTML как data URI, и нужен сам файл? Вставьте строку, подтвердите предпросмотр и скачайте исходный PNG, JPG или SVG — не нужно размещать его или воссоздавать.

Изучить миниатюру из ответа API

API вернул поле Base64-изображения, и вы хотите увидеть, что это. Вставьте payload, чтобы отрисовать его мгновенно, прочитать реальные размеры и тип и сохранить для детального изучения или баг-репортов.

Отладить сломанное встроенное изображение

Встроенное изображение не отрисовывается на вашей странице. Вставьте его Base64 сюда: если предпросмотр корректен, данные валидны, и проблема в вашей разметке или типе MIME; если не получается, сама строка обрезана или повреждена.

Восстановить изображение из конфига или темы

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

Проверить вывод инструмента сборки

Бандлер или скрипт сгенерировал data URI, и вы хотите убедиться, что он валиден и корректен перед выпуском. Декодирование здесь — самая быстрая визуальная проверка того, что шаг кодирования создал ожидаемое изображение.

Преобразовать Base64 обратно в файл для обмена

Кто-то прислал вам изображение как Base64-blob в чате или документе. Вставьте его, посмотрите предпросмотр и скачайте реальный файл, который можно открыть, прикрепить или загрузить обычным способом.

Технические детали

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

Встроенный в браузер atob преобразует payload Base64 в двоичную строку, которую инструмент копирует байт за байтом в Uint8Array. Этот типизированный массив оборачивается в Blob, помеченный определённым типом MIME, а object URL направляет на него предпросмотр и ссылку скачивания. Каждая группа из четырёх символов Base64 даёт три байта; завершающий padding = отмечает остаток в один или два байта. Процесс точен и без потерь — восстановленные байты в точности совпадают с исходным файлом.

Определение формата по магическим байтам

Когда у ввода нет префикса data: для объявления типа MIME, декодер определяет формат по первым нескольким символам Base64, которые кодируют сигнатурные байты файла. iVBORw0KGgo декодируется в заголовок PNG, /9j/ — в маркер SOI JPEG, R0lGOD — в GIF, UklGR — в контейнер RIFF/WebP, PHN2Zy и PD94bWw — в открытия

Без сети, без хранения

Декодирование, предпросмотр и скачивание — всё локально. Нет fetch, нет XMLHttpRequest и нет обращения к серверу — единственная сетевая активность страницы это загрузка её самой. Вставленные строки хранятся в памяти на время жизни страницы и отбрасываются при её закрытии или перезагрузке. Именно это делает инструмент безопасным для конфиденциальной графики и пригодным офлайн.

Лучшие практики

Копируйте всю строку, включая padding

Строка Base64-изображения должна быть полной, чтобы декодироваться. Убедитесь, что скопировали каждый символ, особенно завершающий padding = или == — значение, обрывающееся посередине, не сработает. Если декодирование не удаётся, первое, что стоит попробовать, — заново выделить и скопировать полную строку.

Доверяйте определению по магическим байтам для строк без префикса

Если у вас только сырой payload, вставьте его как есть — не нужно вручную строить префикс data:. Декодер выводит формат из ведущих байтов и присваивает правильный тип MIME и расширение. Добавляйте префикс вручную, только если вам специально нужно переопределить определённый тип.

Проверяйте размеры перед скачиванием

Используйте сообщённые пиксельные размеры и тип MIME как проверку того, что вы декодировали именно тот ресурс, который хотели — особенно когда вытаскиваете одну строку из файла с несколькими. Результат 1×1, например, обычно означает, что вы взяли трекинг-пиксель, а не нужное изображение.

Помните, что Base64 не безопасен

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

Круговые проходы перекодирования без потерь

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

Часто задаваемые вопросы