Base64 Image Decoder

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

Декодирование изображений Base64 — это обратная операция кодирования изображений Base64: она берет строку Base64 или data URI, которая представляет изображение, и преобразует его обратно в видимые данные двоичных пикселей. Когда вы получаете строку вроде data:image/png;base64,iVBORw0KGgo..., декодирование удаляет префикс data URI, обращает кодирование Base64, определенное в RFC 4648, и восстанавливает исходные байты изображения. Затем браузер может отобразить декодированные байты как видимое изображение.

Data URI (RFC 2397) объединяют тип MIME и закодированное в Base64 содержимое в одну строку. Они часто встречаются в ответах API, исходном коде HTML-писем, таблицах стилей CSS и записях базы данных, где изображения хранятся как текст вместо двоичных файлов. Декодирование этих строк необходимо для предварительного просмотра изображения, проверки его содержимого или сохранения его как отдельного файла. Поскольку Base64 использует 4 символа ASCII для представления каждых 3 байтов двоичных данных, закодированная строка всегда примерно на 33% больше исходного изображения.

Этот инструмент анализирует как полные data URI (data:image/png;base64,...), так и необработанные строки Base64 без префикса data:. Для необработанных строк формат изображения автоматически определяется путем проверки первых нескольких символов Base64, которые соответствуют магическим байтам файла — например, iVBORw0KGgo всегда указывает на файл PNG. Декодированное изображение отображается прямо в браузере и может быть загружено как файл.

Типичный сценарий разработчика — работа с REST API, который возвращает фотографию профиля или эскиз документа в виде строки Base64 внутри поля JSON — например, {} с изображением. Чтобы использовать изображение, вы извлекаете значение поля, удаляете префикс data URI вплоть до запятой включительно, а затем пропускаете оставшиеся символы Base64 через декодер, такой как atob() в JavaScript или base64.b64decode() в Python, чтобы восстановить необработанные байты. Вставка полного значения в этот инструмент пропускает все эти ручные шаги и немедленно отображает изображение.

Почему использовать этот декодер изображений Base64?

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

Варианты использования декодирования изображений Base64

Структура data URI для изображений

Data URI упаковывает тип изображения и закодированное содержимое в одну строку. Каждый компонент необходим для правильного декодирования: схема (data:) указывает на то, что URL автономен, а не ссылка на внешний ресурс; тип MIME (например, image/png) сообщает средству отображения, какой формат использовать при интерпретации необработанных байтов; маркер ;base64, отличает закодированное содержимое Base64 от data URI, которые используют кодирование в процентах для форматов простого текста. Сам полезный груз Base64 может заканчиваться одним или двумя символами заполнения = — они требуются, когда количество входных байтов не кратно трем, гарантируя, что закодированная длина всегда кратна четырем. Пропуск или усечение любого из этих компонентов приводит к сбою декодирования или созданию поврежденного изображения.

Определение формата изображения из Base64

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

Примеры кода

Как декодировать строки изображений Base64 обратно в файлы изображений на популярных языках и в средах:

// Decode a Base64 data URI to a Blob and create a download link
const dataUri = 'data:image/png;base64,iVBORw0KGgo...'

// Method 1: fetch API (simplest)
const res  = await fetch(dataUri)
const blob = await res.blob()
// blob.type → "image/png", blob.size → 2048

// Method 2: manual decode for older environments
const [header, b64] = dataUri.split(',')
const mime    = header.match(/:(.*?);/)[1]   // → "image/png"
const binary  = atob(b64)
const bytes   = Uint8Array.from(binary, c => c.charCodeAt(0))
const blob2   = new Blob([bytes], { type: mime })

// Create a download link
const url = URL.createObjectURL(blob)
const a   = document.createElement('a')
a.href = url
a.download = 'decoded.png'
a.click()
URL.revokeObjectURL(url)

import base64
import re

data_uri = 'data:image/png;base64,iVBORw0KGgo...'

# Parse the data URI
match = re.match(r'data:(image/[\w+.-]+);base64,(.+)', data_uri)
mime_type = match.group(1)    # → "image/png"
b64_data  = match.group(2)

# Decode and write to file
image_bytes = base64.b64decode(b64_data)
ext = mime_type.split('/')[1].replace('jpeg', 'jpg').replace('svg+xml', 'svg')

with open(f'output.{ext}', 'wb') as f:
    f.write(image_bytes)
# → writes output.png (byte-for-byte identical to the original)

# Decode raw Base64 (no data: prefix)
raw_b64 = 'iVBORw0KGgo...'
image_bytes = base64.b64decode(raw_b64)

import { writeFileSync } from 'fs'

const dataUri = 'data:image/png;base64,iVBORw0KGgo...'

// Extract MIME type and Base64 payload
const [meta, b64] = dataUri.split(',')
const mime = meta.match(/:(.*?);/)[1]  // → "image/png"

// Decode to Buffer and save
const buffer = Buffer.from(b64, 'base64')
writeFileSync('output.png', buffer)
// → output.png (identical to the original file)

// Validate by checking magic bytes
console.log(buffer.subarray(0, 4))
// PNG → <Buffer 89 50 4e 47>  (\x89PNG)
// JPEG → <Buffer ff d8 ff e0>

# Decode a raw Base64 string to an image file (Linux)
echo 'iVBORw0KGgo...' | base64 -d > output.png

# Decode a raw Base64 string to an image file (macOS)
echo 'iVBORw0KGgo...' | base64 -D > output.png

# Extract Base64 from a data URI and decode
echo 'data:image/png;base64,iVBORw0KGgo...' | \
  sed 's/^data:.*base64,//' | base64 -d > output.png

# Identify the image format from the decoded file
file output.png
# → output.png: PNG image data, 64 x 64, 8-bit/color RGBA

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