PNG в Base64

Как конвертировать PNG в Base64

1. Перетащите файл .png в поле или выберите его через диалог. Чтобы закодировать скриншот, скопируйте его и нажмите на этой странице Ctrl+V (Cmd+V на Mac); сохранять его заранее не нужно.
2. Если PNG больше, чем нужно, задайте Макс. ширина или выберите WebP в Конвертировать в. Удалить метаданные (EXIF) убирает текстовые блоки и EXIF.
3. Оставьте в Формат вывода вариант Data URI или переключитесь на CSS, <img>, Markdown, JSON или чистый Base64.
4. Нажмите Скопировать результат. В превью видны размеры в пикселях, а после перекодирования – новый размер файла.

Как выглядит PNG в Base64

Любой PNG начинается с одних и тех же 16 байт: 8-байтовой сигнатуры и заголовка блока IHDR, который обязан идти первым. В Base64 это даёт неизменное начало из 22 символов:

iVBORw0KGgoAAAANSUhEUg

Так что строка, которая начинается с iVBORw0KGgo, почти наверняка PNG, где бы она ни встретилась: в ответе JSON, лог-файле или колонке базы данных. Сразу за этим идут ширина и высота, упакованные в следующие символы.

Для справки вот полный PNG 1×1, полностью прозрачный. Файл занимает 70 байт, а Base64 – 96 символов:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNgYGBgAAAABQABeqhXUAAAAABJRU5ErkJggg==" alt="" width="1" height="1">

У вставки есть одна загвоздка. Когда вы копируете изображение командой «Копировать картинку» в браузере или просмотрщике, в буфер обмена оно обычно попадает как PNG, даже если оригинал был фотографией в JPEG. Вставленный результат тогда может оказаться гораздо больше файла на диске. Если исходный формат важен, перетаскивайте сам файл.

Если ваш закодированный PNG начинается с чего-то другого, файл не был PNG. Файл .png, который на самом деле JPEG, начинается с /9j/, а WebP, переименованный в .png, – с UklGR. MIME-тип в превью показывает, что определил браузер.

PNG, JPEG или WebP до кодирования

PNG сжимает без потерь, поэтому это правильный выбор для логотипов, иконок, графики интерфейса и скриншотов с текстом. Для фотографий – неправильный: фотографический PNG часто в несколько раз больше хорошего JPEG или WebP той же картинки. Раз Base64 раздувает всё, что ему дают, примерно на 33%, именно выбор формата решает, выиграете вы в размере или проиграете.

Конвертер перекодирует через canvas браузера. Отсюда три ограничения:

• Конвертация в JPEG теряет прозрачность. Прозрачные пиксели становятся белыми.
• В Safari нет кодировщика WebP. Если попросить там WebP, вернётся PNG с пометкой об этом.
• Canvas – не оптимизатор PNG. Перекодирование PNG, который уже ужат специальным оптимизатором, может его увеличить. Сравните размеры в превью и оставьте оригинал, если он выигрывает.

Удалить метаданные (EXIF) заодно убирает вспомогательные данные вроде EXIF и текстовых блоков. В большинстве PNG их немного, но скриншоты и экспорт из некоторых приложений содержат названия программ или метки времени.

Где встречаются PNG в Base64

• Иконки в CSS. background-image: url("data:image/png;base64,...") для маленьких иконок, которые не должны стоить лишнего запроса. Для векторных иконок SVG обычно меньше; см. SVG в Base64.
• Вывод canvas. По умолчанию canvas.toDataURL() выдаёт data URI с PNG, поэтому панели для подписи, графики и веб-редакторы картинок часто отдают именно этот формат. Base64 в PNG превратит его обратно в файл.
• Данные для API. Сервисы скриншотов, тест-раннеры и API компьютерного зрения обмениваются PNG в виде Base64 внутри JSON. Уточните, нужен ли API префикс data:image/png;base64, или чистый Base64, и выберите Data URI или Чистый Base64 соответственно.
• Снапшоты тестов и баг-репорты. Визуальные тесты и системы отчётов о сбоях часто встраивают скриншоты как PNG в Base64 в отчёты JSON или HTML, чтобы отчёт оставался одним файлом.
• Фавиконки и одностраничные файлы. Маленькая PNG-фавиконка внутри <link rel="icon"> избавляет HTML-файл от внешней ссылки на иконку. Подробнее на странице про фавиконки.

Кодирование PNG в коде

Node.js читает файл в Buffer и кодирует его одним вызовом:

import { readFileSync } from "node:fs";

const uri = "data:image/png;base64," + readFileSync("logo.png").toString("base64");

В браузере canvas сразу даёт data URI с PNG:

const uri = canvas.toDataURL("image/png");

Потоковая обработка и URL-safe вывод разобраны в статье Base64 в Node.js, а файлы и Blob в браузере – в статье Base64 в JavaScript.

Если data URI с PNG не отображается

• Неправильный префикс. Правильный выглядит как data:image/png;base64,, с запятой в конце. Если нет ;base64, браузер прочитает символы как обычный текст.
• Отмечен URL-safe. В data: URL браузеры декодируют только стандартный алфавит. PNG в Base64 с - и _ показывается битой картинкой.
• Переводы строк в CSS. Перенос по 76 нужен для почты. В таблице стилей перевод строки внутри url("...") делает объявление недействительным.
• Строку обрезали. PNG заканчивается фиксированным 12-байтовым блоком IEND, поэтому его Base64 заканчивается на AAAAAElFTkSuQmCC, AABJRU5ErkJggg== или AAAASUVORK5CYII=, в зависимости от остатка длины файла при делении на 3. Если конец выглядит иначе, а картинка нарисована наполовину или её нет, копия обрезана. Проверьте строку, чтобы увидеть её длину и дополнение.

Вопросы и ответы