Softonic

Конвертер изображения в BASE64

Шаг 1 / 3
Восстановление выбранного файла...

Data URL Base64 объединяет тип данных и закодированные байты изображения в одном текстовом значении, например data:image/png;base64,.... Выберите изображение до 20 МиБ, и конвертер создаст это значение локально в браузере. Перед копированием можно проверить сведения об исходном файле и примерную длину полученного data URL.

Как закодировать изображение в base64

  1. 1

    Выберите изображение

    Выберите один файл изображения размером до 20 МиБ.

  2. 2

    Закодируйте локально

    Браузер прочитает файл и создаст полный data URL Base64 без загрузки на сервер.

  3. 3

    Проверьте результат

    Посмотрите тип данных, сведения о файле и примерную длину созданного data URL.

  4. 4

    Скопируйте data URL

    Скопируйте в буфер обмена полное значение `data:image/...;base64,...`.

Когда встраивать, когда ссылаться

Встраивание base64 экономит один HTTP-запрос ценой увеличения размера на 33%, это стоит того для одних ресурсов и расточительно для других.

Математика размера

Исходный размер Размер base64 Лишние байты
1 KB 1.36 KB 360 B
10 KB 13.6 KB 3.6 KB
100 KB 136 KB 36 KB
1 MB 1.36 MB 360 KB

Руководство по выбору

Сценарий Встроить или внешний
Иконка меньше 2 KB (SVG-логотип, спрайт) Встроить
Изображение курсора в CSS (cursor: url()) Встроить
Небольшая автономная демонстрация HTML или CSS Встроить
Иконка, вшитая в полезную нагрузку JavaScript Встроить
Hero-изображение, > 50 KB Внешний
Все, что можно кэшировать отдельно Внешний

Формат data URI

data:[<mediatype>][;base64],<data>

Примеры:

  • data:image/png;base64,iVBORw0KGgo..., PNG
  • data:image/svg+xml;utf8,<svg>...</svg>, SVG, часто лучше встраивать без base64
  • data:image/jpeg;base64,/9j/4AAQS..., JPG

Советы

  • SVG часто лучше как url() с кодировкой utf8 вместо base64; короче, читаемо.
  • Кодирование не проверяет и не очищает содержимое изображения. Встраивайте только доверенные файлы, особенно SVG, где могут быть активные элементы или внешние ссылки.
  • Большие изображения внутри полезных нагрузок JSON блокируют разбор, если очень велики; рассмотрите multipart или внешние ссылки.
  • CSS background-image с base64 встраивается чисто, но сводит на нет кэширование между страницами.

Часто задаваемые вопросы

Base64 кодирует 3 байта ввода как 4 символа, поэтому вывод всегда на ~33% больше ввода. Изображение 10 KB дает строку около 13,600 символов. Длинная, это нормально.

Конвертер принимает одно изображение размером до 20 МиБ. Это предел обработки, а не рекомендуемый размер для встраивания. Data URL лучше оставлять небольшим: Base64 добавляет около трети к исходному размеру и мешает кэшировать изображение отдельно.

Нет. Кодирование base64 выполняется в вашем браузере. Изображение никогда не покидает ваше устройство.

В этом кодировщике такой функции нет. Чтобы превратить data URL или сырую строку Base64 в загружаемый файл изображения, используйте отдельный инструмент Base64 в изображение.

Сопутствующие инструменты

Изменение размера изображений

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

WebP в JPG

Конвертируйте изображения WebP в JPG/JPEG прямо в браузере. Выберите качество, объедините прозрачность с цветом фона и скачайте без загрузки файлов на сервер.

Генератор QR-кодов

Создавайте QR-код из текста или URL в браузере и скачивайте его в PNG.

Генератор мемов

Добавьте верхнюю и нижнюю подписи к JPG, PNG или WebP. Настройте шрифт, цвета и обводку, затем скачайте статичный мем в PNG.

Генератор штрихкодов

Создавайте Code 128, EAN-13, UPC, ITF-14 и еще семь линейных штрихкодов. Данные остаются в браузере, результат можно скачать в SVG или PNG.

Генератор надписей граффити

Создавайте надписи в стилях тег, баббл, блок, трафарет, неон и вайлд. Настраивайте цвета и экспортируйте PNG или SVG прямо в браузере.