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

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

1. Перетащите картинку в поле, вставьте её из буфера обмена через Ctrl+V (Cmd+V на Mac) или выберите через диалог. Скриншоты можно вставлять прямо из буфера, можно и несколько файлов сразу.
2. При желании сначала уменьшите или сконвертируйте картинку: укажите Макс. ширина в пикселях, выберите PNG, JPEG или WebP в Конвертировать в, настройте Качество или отметьте Удалить метаданные (EXIF).
3. Выберите формат в Формат вывода. На этой странице по умолчанию стоит Data URI.
4. Нажмите Скопировать результат или, если результат длинный, Сохранить как .txt.

В превью видно имя файла, размер, MIME-тип и размеры в пикселях. Под кнопками показан размер входа, размер результата и прирост в процентах, так что вы знаете, что собираетесь вставить.

Форматы вывода и где они нужны

Данные Base64 во всех форматах одни и те же, меняется только обёртка вокруг них. В примерах ниже – PNG 32×32 с именем logo.png, в сокращённом виде:

Вывод <img> содержит width и height, благодаря чему браузер резервирует место ещё до декодирования картинки. Некоторые рендереры Markdown, особенно на хостинговых платформах, вырезают data: URL из картинок, так что проверьте свой, прежде чем полагаться на вывод Markdown.

Уменьшите и сконвертируйте до кодирования

Base64 прибавляет треть к размеру того, что ему дают, поэтому лучший способ получить короткую строку – картинка поменьше. Фото с телефона, которое показывается миниатюрой в 300 пикселей, не нужны исходные 4000. Значение 600 в поле Макс. ширина (вдвое больше размера показа, чтобы на экранах с высокой плотностью было чётко) сэкономит куда больше любых трюков с кодированием.

Что делают параметры:

• Макс. ширина только уменьшает. Более узкие картинки сохраняют свои размеры, а пропорции сохраняются всегда.
• Конвертация в JPEG заливает прозрачные области белым, потому что у JPEG нет альфа-канала. Если нужны и прозрачность, и маленький размер, берите WebP.
• Качество применяется к выводу в JPEG и WebP, когда один из других параметров запускает перекодирование. PNG сжимает без потерь и этот параметр игнорирует.
• Удалить метаданные (EXIF) убирает данные камеры: GPS-координаты, модель устройства и время съёмки. Это делается перерисовкой картинки, так что JPEG сжимается заново с выбранным качеством.
• GIF, BMP и AVIF при перекодировании с Сохранить формат записываются как PNG, потому что браузеры не умеют выдавать эти форматы из canvas. У анимированного GIF остаётся только первый кадр.
• Safari не умеет кодировать WebP. Если выбрать там WebP, инструмент сообщит, что получился PNG.
• Файлы SVG кодируются как есть. Это уже текст, а растеризация вектора лишила бы его смысла.

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

Когда встраивать картинку, а когда нет

Data URI экономит один HTTP-запрос и держит всё в одном файле. Это окупается для:

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

Для фотографий и всего крупного встраивание вредит. Закодированная копия примерно на 33% больше, её нельзя закешировать отдельно от HTML или CSS, в котором она лежит, и она скачивается заново на каждой странице, куда встроена. Картинка внутри таблицы стилей к тому же задерживает саму таблицу, а значит, и отрисовку. loading="lazy" тоже не помогает: байты уже находятся в документе. Разбор есть в статье о производительности data URI, а калькулятор размера покажет размер в Base64 до того, как вы решитесь.

Почта – особый случай. Gmail и ещё несколько веб-клиентов вообще не показывают картинки из data URI, поэтому в рассылках обычно используют размещённые на сервере картинки или вложения CID. См. Base64 в электронной почте.

Картинки для API и моделей компьютерного зрения

В JSON нет двоичного типа, поэтому API, которые принимают картинку в теле запроса, ждут Base64. Это касается и многих мультимодальных моделей ИИ, которые умеют описывать, классифицировать картинку или читать с неё текст. Встречаются два варианта:

• полный data URI одной строкой: data:image/jpeg;base64,/9j/4AAQ...
• чистый Base64 в одном поле, а тип (image/jpeg) – в другом.

Для первого используйте Data URI, для второго – Чистый Base64. Частая причина отказа: префикс data: уходит в API, который ждёт чистый Base64, или наоборот. Эти сервисы обычно ограничивают размер запроса и часто всё равно уменьшают большие картинки на своей стороне, так что уменьшение до кодирования почти ничего не стоит, а запрос остаётся маленьким.

Какие форматы картинок можно встроить

HEIC и TIFF кодируются нормально, но data URI с ними в Chrome и Firefox показывает битую картинку. Что делать вместо этого, объясняют страницы HEIC и TIFF. Больше сигнатур собрано в статье о типичных префиксах Base64.

То же самое в коде

В браузере FileReader сразу возвращает data URI:

function imageToDataUri(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsDataURL(file);
  });
}

В Python прочитайте байты и добавьте префикс сами:

import base64, mimetypes

def to_data_uri(path):
    mime = mimetypes.guess_type(path)[0] or "application/octet-stream"
    with open(path, "rb") as f:
        return f"data:{mime};base64,{base64.b64encode(f.read()).decode()}"

Другие варианты, включая потоковую обработку больших файлов, описаны в статьях Base64 в JavaScript и Base64 в Python.

Если картинка не показывается

• Битая картинка в HTML. Для data URI снимите галочку URL-safe (- _). Браузеры декодируют data: URL только со стандартным алфавитом, и - или _ вместо + или / ломают картинку.
• В HTML работает, в CSS нет. Перенос по 76 вставляет переводы строк в строку. Атрибуты HTML их терпят, а перевод строки внутри строки CSS url("...") делает правило недействительным. Держите перенос выключенным для всего, кроме тел писем.
• Двойной префикс. Строка, которая начинается с data:image/png;base64,data:image/png;base64,, получилась, когда data URI вставили в шаблон, который добавляет свой префикс. Там используйте Чистый Base64.
• После декодирования не та картинка или никакой. Сверьте первые символы с таблицей выше. Если начало не соответствует формату, строку обрезали или перепутали. Base64 в картинку покажет, что на самом деле в этих байтах.

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