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 в изображение.

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

Сжать GIF

Уменьшайте анимированные GIF прямо в браузере: снижайте размеры, оставляйте меньше кадров и настраивайте качество кодирования. Проверьте петлю перед скачиванием.

Конструктор тир-листов

Создайте приватный тир-лист из текста и локальных изображений. Настройте уровни, распределите элементы мышью или клавиатурой и экспортируйте в JSON, PNG или SVG.

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

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

Конвертер JPG в Word

Конвертируйте JPG-фото или скриншот текста в редактируемый документ Word. Инструмент считывает слова с помощью OCR и раскладывает их, чтобы вы могли переписать, отформатировать и переиспользовать их.

Генератор миллиметровой бумаги

Создавайте бумагу в клетку для печати онлайн: выберите сетку или точки, задайте шаг в мм, укажите A4 или Letter и свой цвет линий, затем распечатайте или скачайте чёткий SVG.

Генератор линованной бумаги

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

Инструмент доступен на других языках