Как пользоваться
- Перетащите PNG в область загрузки, нажмите на неё, чтобы выбрать файл, или вставьте скриншот из буфера обмена.
- Оставьте в списке «Преобразовать в» значение «Исходный формат», чтобы закодировать исходные байты PNG, или выберите значение в списке «Макс. ширина», чтобы уменьшить большое изображение.
- Сравните исходный размер с размером после кодирования, который показан для изображения.
- Скопируйте или скачайте результат: data URI, чистый Base64, тег img, CSS или Markdown.
PNG и Base64
PNG (Portable Network Graphics, тип MIME image/png) — растровый формат без потерь с полноценным альфа-каналом, поэтому его обычно выбирают для значков, логотипов, схем и скриншотов. Каждый файл PNG начинается с одной и той же 8-байтовой сигнатуры, поэтому и каждый data URI для PNG начинается одинаково: data:image/png;base64,iVBORw0KGgo....
Base64 не затрагивает пиксели. При декодировании строки получается файл, побайтно идентичный исходному, с теми же цветами и теми же прозрачными областями.
Где пригодятся data URI для PNG
- Небольшие значки интерфейса и логотипы, которым нужен прозрачный фон.
- Скриншоты в самодостаточных HTML-отчётах, отчётах об ошибках или экспортированной документации.
- Диаграммы и QR-коды, которые создаются на сервере и возвращаются в ответе JSON.
- Изображения, созданные с помощью
canvas.toDataURL(): этот метод по умолчанию и так выдаёт data URI в формате PNG.
С фотографиями всё иначе. PNG хранит их без потерь, и файлы получаются большими; JPEG или WebP дадут гораздо более короткую строку.
Уменьшите PNG перед кодированием
Каждый байт, убранный из PNG, экономит около 1,33 символа Base64. Сначала пропустите файл через оптимизатор, например oxipng или zopflipng (без потерь) или pngquant (сокращает палитру). Проверьте и размер в пикселях: значок, экспортированный в три раза крупнее, чем он отображается, обычно можно уменьшить с помощью параметра «Макс. ширина».
Преобразование в WebP сохраняет прозрачность и часто даёт намного меньший файл. При преобразовании в JPEG прозрачность теряется, и прозрачные области заливаются сплошным цветом. Повторное кодирование в PNG в браузере не оптимизирует сжатие, поэтому результат может оказаться больше хорошо оптимизированного оригинала; сравните размеры, прежде чем копировать.
Использование результата
<img src="data:image/png;base64,iVBORw0KGgo..." width="24" height="24" alt="Settings">
.icon-settings {
background: url("data:image/png;base64,iVBORw0KGgo...") no-repeat center / 24px 24px;
}
# Командная строка: GNU coreutils / macOS
base64 -w 0 icon.png
base64 -i icon.pngЧасто задаваемые вопросы
Сохраняет ли Base64 прозрачность PNG?
Да. Base64 кодирует байты файла без изменений, поэтому альфа-канал сохраняется. Прозрачность теряется, только если преобразовать изображение в JPEG.
Почему каждая строка Base64 для PNG начинается с iVBORw0KGgo?
Эти символы — сигнатура файла PNG, записанная в Base64. Если строка, которая выдаётся за PNG, начинается иначе, это другой формат или повреждённые данные.
Можно ли вставить скриншот напрямую?
data:image/png.PNG какого размера стоит встраивать в виде Base64?
Распространённое практическое правило — несколько килобайт, примерно до 10 КБ. Изображения крупнее лучше отдавать отдельными файлами, которые браузер может кешировать и загружать параллельно.