> PNG | encode | data-uri <
// Кодируйте PNG изображения в строки Base64 и URI данных — альфа-прозрачность сохраняется, всё выполняется полностью в вашем браузере
Перетащите PNG сюда или кликните для выбора
Кликните для обзора PNG файлов
Альфа сохраняется
Альфа-канал PNG, палитра и чанки gAMA/tRNS кодируются байт-в-байт — без повторного сжатия, без потери качества.
100% в браузере
Ваш PNG никогда не покидает браузер. Кодирование происходит локально через FileReader + btoa() — без обращения к серверу.
Скопируй и вставь
Получите стандартно-совместимый URI data:image/png;base64,… готовый для HTML, CSS, писем, JSON-нагрузок и встроенных SVG.
// FAQ — PNG В BASE64
В: Что такое кодирование PNG в Base64?
О: Оно преобразует бинарное содержимое файла .png в ASCII-строку с использованием алфавита Base64, определённого в RFC 4648. Закодированный текст можно напрямую вставить в тег HTML <img>, CSS background-image, email-сообщение, полезную нагрузку JSON API или любой другой только-текстовый транспорт. Сами байты PNG не изменяются — каждый чанк IHDR, IDAT, tRNS и IEND кодируется и может быть восстановлен в точности.
В: Как закодировать PNG в Base64 в браузере?
О: Перетащите ваш PNG в зону сброса (или кликните для обзора). Инструмент читает файл с помощью FileReader.readAsDataURL(), который сразу возвращает готовый к использованию URI data:image/png;base64,…. Выберите URI данных, если хотите вставить его прямо в <img src="…">, или Только полезная нагрузка Base64, если ваш API/база данных ожидает чистую Base64-часть без префикса data:image/png;base64,.
В: Теряется ли прозрачность или качество при кодировании PNG в Base64?
О: Нет. Base64 — это чистое бинарно-текстовое преобразование, каждый байт оригинального PNG сохраняется, включая альфа-канал, палитру и цветовой профиль (чанки iCCP/sRGB). Когда вы декодируете строку обратно, файл идентичен по битам оригиналу. SHA-256 хэш декодированного PNG совпадёт с оригиналом. Именно поэтому Base64 — правильный инструмент для встраивания иконок, логотипов и скриншотов, где важна точность пикселей.
В: Насколько PNG увеличивается после кодирования в Base64?
О: Base64 использует 4 символа на каждые 3 входных байта, поэтому закодированная строка ~на 33% больше оригинального файла PNG. Точный размер: 4 × ⌈n / 3⌉ символов, где n — размер PNG в байтах. PNG в 10 КБ становится ~13.6 КБ текста Base64. Поскольку HTTP-сжатие (gzip, Brotli) неплохо справляется с текстом Base64, накладные расходы при передаче обычно составляют около 10–15% на практике.
В: Как выглядит PNG, закодированный в Base64?
О: Каждая Base64-строка PNG начинается с iVBORw0KGgo. Этот префикс — это 8-байтовая сигнатура PNG 89 50 4E 47 0D 0A 1A 0A, перекодированная в Base64. Поэтому iVBORw0KGgoAAAANSUhEUg... — это всегда PNG, и наличие этого префикса — быстрая визуальная проверка целостности данных. Обёрнутый как URI данных, он выглядит так: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==
В: Как встроить PNG как Base64 в HTML?
О: Вставьте полный URI данных в атрибут src тега <img>: <img src="data:image/png;base64,iVBORw0KGgo…" alt="logo">
Браузер декодирует полезную нагрузку Base64 и отрисует PNG точно так же, как если бы он был загружен по URL. Дополнительного HTTP-запроса не происходит, что полезно для критических иконок, email-подписей и оффлайн-first приложений.
В: Как использовать Base64 PNG как CSS-фон?
О: Оберните URI данных в функцию url(): .icon { background-image: url('data:image/png;base64,iVBORw0KGgo…'); }
Для повторного использования сохраните его в пользовательском CSS-свойстве: :root { --logo: url('data:image/png;base64,iVBORw0KGgo…'); } .brand { background: var(--logo); }
Встроенные фоны устраняют один HTTP-запрос на иконку, но раздувают CSS-файл, поэтому используйте их только для небольших иконок (< 4 КБ).
В: Как закодировать PNG в Base64 в JavaScript / Node / Python / PHP?
О:
JavaScript (браузер): const uri = await new Promise(r => { const f = new FileReader(); f.onload = () => r(f.result); f.readAsDataURL(pngFile); });
Node.js: fs.readFileSync('logo.png').toString('base64')
Python: import base64; base64.b64encode(open('logo.png','rb').read()).decode()
PHP: base64_encode(file_get_contents('logo.png'))
Go: base64.StdEncoding.EncodeToString(pngBytes)
Ruby: Base64.strict_encode64(File.read('logo.png'))
В: Когда стоит использовать Base64 PNG вместо обычного файла изображения?
О: Используйте URI данных Base64 PNG, когда:
• изображение < 4 КБ (чтобы сэкономить HTTP-обмен)
• вам нужно встроить его в HTML email (многие клиенты блокируют удалённые изображения)
• вы поставляете отчёт или дашборд в виде единого файла HTML
• вы храните изображение внутри JSON-нагрузки или колонки базы данных
Предпочитайте внешний файл .png, когда изображение большое, повторно используется на многих страницах или нуждается в отдельном CDN-кэшировании.
В: Работает ли кодирование Base64 с прозрачностью PNG и палитровыми PNG?
О: Да. Поскольку Base64 — это побитовое преобразование, каждый цветовой режим PNG поддерживается одинаково:
• RGBA / truecolor + alpha — 32-битный цвет, полная прозрачность
• Палитра (PLTE) + tRNS — индексированные палитровые PNG с 1-битной прозрачностью
• Градации серого + alpha — 8/16-битные градации серого с альфа
• 16-битные deep color PNG — PNG в HDR-стиле, используемые в медицинской визуализации и научной визуализации
Все они чисто проходят туда-обратно через Base64 и корректно отображаются в браузерах, понимающих PNG.
В: Зашифрован ли или приватен PNG, закодированный в Base64?
О: Нет. Base64 — это кодирование, а не шифрование. Любой, кто может прочитать строку, способен декодировать её обратно в оригинальный PNG за миллисекунды. Если скриншот содержит пароль, API-токен или персональные данные, кодирование его в Base64 не защищает его — используйте настоящий слой шифрования (AES-GCM, age, PGP) поверх вывода Base64 или передавайте изображение по TLS на сервер с контролем доступа.
В: Какой максимальный размер PNG можно здесь закодировать?
О: Искусственного ограничения нет. Поскольку кодирование выполняется локально, предел — это память вашего браузера — обычно 100 МБ+ на десктопе и 40–60 МБ на мобильных. Для очень больших PNG (медицинские или спутниковые изображения высокого разрешения) мы читаем файл кусками и вызываем btoa() на каждый кусок, чтобы основной поток оставался отзывчивым. Если ваше изображение больше ~100 МБ, рассмотрите потоковую передачу напрямую из серверного кодировщика вместо загрузки его в браузер.
В: PNG в Base64 vs JPG в Base64 — что использовать?
О: Используйте PNG → Base64 для логотипов, UI-иконок, скриншотов, диаграмм и всего, что имеет прозрачность или резкие края (текст, графики). PNG без потерь и с учётом альфа. Используйте JPG → Base64 для фотографий или изображений с большим количеством цветов, где приемлемо сжатие с потерями. JPEG-файлы обычно в 5–20 раз меньше PNG для фотографий, поэтому полезная нагрузка Base64 значительно короче. Практическое правило: если изображение из камеры или содержит фотографические градиенты, используйте JPG; иначе — PNG.