> base64 | decode | PNG <
// Декодируйте строки Base64 и URI данных обратно в PNG изображения — альфа сохраняется, мгновенный предпросмотр, скачивание в один клик
Декодированный PNG появится здесь
Бит-в-бит
Декодированный PNG побайтово идентичен оригиналу — альфа, палитра и цветовой профиль все проходят круговой путь без изменений.
Локальное декодирование
Полезная нагрузка Base64 декодируется в вашем браузере с помощью atob(). Без загрузки на сервер, без логирования байтов вашего PNG.
Живой предпросмотр
Смотрите декодированное изображение, его размеры и приблизительный размер файла мгновенно перед скачиванием.
// О КОНВЕРТАЦИИ BASE64 В PNG
Что принимает этот инструмент
- >URI данных: data:image/png;base64,iVBORw0KGgo…
- >Сырая полезная нагрузка PNG Base64 (начинается с iVBORw0KGgo)
- >Base64 со встроенными пробелами / переносами строк
- >Стандартный алфавит RFC 4648 (+/, опциональный padding =)
- >URL-safe Base64 (-_) — авто-нормализуется при декодировании
- >Unicode-совместимая вставка — BOM удаляются
Частые сценарии использования
- >Сохранение скриншота из URI данных инспектора DOM
- >Извлечение логотипа из data-uri CSS-фона
- >Восстановление изображения из ответа JSON API
- >Восстановление изображения из TEXT-колонки базы данных
- >Восстановление PNG из MIME-части email
- >Исследование иконки, встроенной внутри inline SVG
- >Отладка сломанного тега <img src="data:image/png;base64,…">
Как работает декодирование Base64 → PNG
Декодер удаляет любой префикс URI данных, нормализует пробелы и URL-safe символы, затем вызывает atob() для преобразования каждой 4-символьной группы обратно в 3 бинарных байта. Массив байтов оборачивается в Blob с MIME-типом image/png, получает object URL и отрисовывается в элементе <img>. Поскольку Base64 биективен с бинарными данными, вывод побитово идентичен оригинальному PNG — SHA-256 декодированного файла совпадает с оригиналом.
Пример URI данных PNG:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==
Производительность и совместимость
- >Декодирование O(n) по длине полезной нагрузки — без проблем обрабатывает 100 МБ+
- >Использует нативный браузерный atob() — без тяжёлого JS-шима
- >Поддерживает многокадровый APNG, когда просмотрщик его поддерживает
- >Работает во всех современных браузерах (Chrome, Firefox, Safari, Edge)
- >Мобильно-адаптивный предпросмотр с pinch-to-zoom
- >Скачивание через Blob URL — без промежуточного обращения к серверу
// КАК ДЕКОДИРОВАТЬ BASE64 В PNG
Шаг 1: Вставьте
Вставьте строку Base64 или полный URI данных в поле ввода
Шаг 2: Декодируйте
Нажмите [DECODE] — PNG мгновенно отрисовывается в предпросмотре
Шаг 3: Проверьте
Проверьте размеры, размер файла и альфа-канал перед сохранением
Шаг 4: Скачайте
Нажмите [DOWNLOAD .png], чтобы сохранить побитово идентичный PNG на диск
// ПРИМЕРЫ КОДА — BASE64 В PNG
JavaScript (браузер)
// Decode Base64 → PNG Blob → download link
const b64 = 'iVBORw0KGgoAAAANSUhEUg...';
const bin = atob(b64);
const arr = new Uint8Array(bin.length);
for (let i = 0; i < bin.length; i++) arr[i] = bin.charCodeAt(i);
const blob = new Blob([arr], { type: 'image/png' });
const url = URL.createObjectURL(blob);
window.open(url);Декодируйте сырую полезную нагрузку Base64 в Blob и откройте её. Для полного URI данных тег <img> принимает его напрямую.
Node.js
const fs = require('fs');
const b64 = 'iVBORw0KGgoAAAANSUhEUg...';
fs.writeFileSync('out.png', Buffer.from(b64, 'base64'));Однострочник с использованием встроенного в Node Buffer для декодирования Base64 и записи файла PNG.
Python
import base64
with open('out.png', 'wb') as f:
f.write(base64.b64decode('iVBORw0KGgoAAAANSUhEUg...'))Только стандартная библиотека — декодируйте текст Base64 обратно в байты PNG.
PHP
<?php
file_put_contents('out.png', base64_decode('iVBORw0KGgoAAAANSUhEUg...'));Однострочник с использованием встроенных base64_decode() и file_put_contents().
Shell (macOS / Linux)
echo 'iVBORw0KGgoAAAANSUhEUg...' | base64 -d > out.pngPOSIX base64 -d / -D читает текст из stdin и записывает декодированный PNG в stdout.
// FAQ — BASE64 В PNG
В: Что такое декодирование Base64 в PNG?
О: Оно обращает Base64-кодированный PNG обратно в его оригинальную бинарную форму. Вставляемая строка — это 4 ASCII-символа на 3 бинарных байта; декодер читает по 4 символа за раз, применяет поиск по алфавиту RFC 4648 и записывает 3 байта на группу, пока строка не исчерпана. Полученный массив байтов — это полный, корректный файл PNG, который вы можете просматривать, сохранять или отправлять куда угодно, где принимается обычный PNG.
В: Как узнать, что строка Base64 действительно PNG?
О: Первые 8 байтов каждого PNG — это магическая сигнатура 89 50 4E 47 0D 0A 1A 0A. При Base64-кодировании эти 8 байтов всегда начинаются с iVBORw0KGgo. Поэтому любая Base64-строка, начинающаяся с iVBORw0KGgo — это PNG. Другие форматы имеют разные префиксы: /9j/ — JPEG, R0lGOD — GIF, UklGR — WebP. Наш декодер автоопределяет PNG по этому магическому префиксу и падает на MIME-тип в URI данных, если он присутствует.
В: Можно ли вставить URI данных или только сырой Base64?
О: Оба. Если ваша строка начинается с data:image/png;base64,, декодер удаляет префикс автоматически. Если вы вставляете только часть полезной нагрузки, мы выводим MIME-тип PNG из магических байтов. Пробелы, переносы строк, возвраты каретки и табуляции нормализуются перед декодированием, поэтому вы можете вставить pretty-printed ответ JSON без каких-либо поломок.
В: Декодированный PNG сломан — почему?
О: Частые причины:
• Обрезанная строка — Base64 где-то был обрезан (например, лимитом переноса строки в источнике копирования). Полный Base64 PNG заканчивается на RU5ErkJggg== (чанк IEND); если его нет, файл неполон.
• URL-safe алфавит — если строка использует -_ вместо +/ (base64url), наш инструмент нормализует его; другие декодеры могут его отвергнуть.
• Двойное кодирование — PNG был Base64-кодирован дважды. Декодируйте ещё раз.
• Не PNG — полезная нагрузка на самом деле JPEG или WebP. Используйте наш универсальный декодер Base64 → изображение, который автоопределяет любой формат.
В: Теряется ли качество или прозрачность при декодировании обратно в PNG?
О: Нет. Base64 — это побитово обратимое преобразование. Декодированный PNG побайтово идентичен оригиналу: альфа-канал, палитра (PLTE), прозрачность (tRNS), цветовой профиль (iCCP/sRGB), гамма (gAMA) и физические размеры пикселей (pHYs) все сохраняются. SHA-256 хэш декодированного файла совпадает с хэшем оригинала. Если вы видите какое-то различие, изменение произошло до кодирования, а не во время кругового пути Base64.
В: Можно ли декодировать Base64 в PNG через терминал?
О: Да. На macOS и Linux: echo 'iVBORw0KGgo…' | base64 -d > out.png
(macOS использует -D в старых версиях.)
На Windows PowerShell: [IO.File]::WriteAllBytes('out.png', [Convert]::FromBase64String('iVBORw0KGgo…'))
Если строка — это полный URI данных, сначала удалите префикс data:image/png;base64, (большинство shell принимают sed 's|^data:.*base64,||').
В: Насколько большим может быть ввод Base64 PNG?
О: Мы декодируем в браузере, поэтому предел — это память вашего устройства — комфортно 100 МБ+ на десктопе. Декодированный PNG 100 МБ потребует ~135 МБ текста Base64, что большинство браузеров вставляют без жалоб. Если вы работаете с очень большими научными или медицинскими PNG, рассмотрите серверное декодирование, потому что производительность браузерного atob() деградирует возле потолка памяти.
В: Работает ли этот декодер офлайн?
О: Да. Всё декодирование использует нативные API atob() + Uint8Array + Blob, встроенные в каждый современный браузер. После однократной загрузки страницы вы можете отключиться от сети и продолжать декодирование. Никаких внешних сервисов, обращений к серверу, аналитики на полезной нагрузке вашего изображения.
В: В чём разница между Base64 PNG и обычным файлом PNG?
О: Они содержат в точности одни и те же байты. Обычный файл .png — это сырой бинарный код; Base64-строка PNG — это те же самые бинарные данные, переписанные в 64-символьном ASCII-алфавите. Форма Base64 на 33% больше, но безопасна для вставки в HTML-атрибуты, JSON-строки, CSS url() и email. Вы не можете поместить сырые байты PNG в HTML — они содержат null-байты и high-bit символы, ломающие парсеры текста. Base64 — это обходной путь.
В: Base64 PNG загружается быстрее отдельного файла .png?
О: Только для крошечных изображений. Base64 экономит один HTTP-обмен, который может занимать 50–100 мс на свежем соединении — полезно для критических UI-иконок менее 4 КБ. Для всего большего отдельный файл .png, отдаваемый с долгоживущими заголовками кэша, почти всегда выигрывает, потому что (а) gzip плохо сжимает текст Base64, (б) URI данных не могут кэшироваться независимо, и (в) они блокируют парсинг HTML. Используйте Base64 для above-the-fold микро-ассетов, а не hero-изображений.
В: Можно ли декодировать Base64 в PNG без загрузки данных куда-либо?
О: Да — этот инструмент работает 100% на стороне клиента. Ваша Base64-строка декодируется в JavaScript на вашем устройстве, оборачивается в Blob локально и отображается через URL.createObjectURL(). Ничего не загружается. Вы можете проверить это, открыв вкладку Network в браузерных dev-tools во время декодирования — никакие запросы не уходят. Запуск всего потока офлайн (режим полёта) также работает после первоначальной загрузки страницы.
В: Как декодировать Base64 в PNG в продакшн-коде?
О: В Node.js: fs.writeFileSync('out.png', Buffer.from(b64, 'base64')). В Python: open('out.png','wb').write(base64.b64decode(b64)). В Go: b, _ := base64.StdEncoding.DecodeString(b64); os.WriteFile("out.png", b, 0644). В Java: Files.write(Path.of("out.png"), Base64.getDecoder().decode(b64)). В Rust: std::fs::write("out.png", base64::decode(b64)?)?. В PHP: file_put_contents('out.png', base64_decode($b64)). Стандартная библиотека каждого рантайма поставляется с декодером Base64 — вам редко нужна сторонняя зависимость.
В: Base64 в PNG vs Base64 в JPG — какой декодер использовать?
О: Используйте Base64 → PNG, когда Base64-строка начинается с iVBORw0KGgo (или URI данных говорит data:image/png;base64,). Используйте Base64 → JPG, когда строка начинается с /9j/4AAQ или /9j/2wC. Если не уверены, используйте наш универсальный декодер Base64 → изображение, который инспектирует магические байты и автоматически выбирает правильный формат. Никогда не принуждайте формат, который не соответствует полезной нагрузке — декодированный файл будет корректными байтами, но нечитаемым.