UltKit
Изображения11
PDF13
Документы и данные7
Видео6
Аудио4
Другие инструменты22

Конвертер изображений в Base64

Превратите файл изображения в строку текста, которую можно вставить в HTML, CSS, JSON-запрос или файл Markdown. Префикс Data URI уже стоит в начале, поэтому код работает сразу после вставки.

Конвертер данных

или перетащите сюда файлы CSV, TSV, TXT … ·

Макс. 95 MB на файл· До 20 файлов· Удаляются через 30 минут

Вывод

Файлы обрабатываются на наших серверах и удаляются через 30 минут.

Как пользоваться инструментом

  1. 1

    Добавьте изображения

    Перетащите файлы PNG, JPG, GIF, WebP или SVG в область загрузки: до 20 файлов за раз, не более 95 MB каждый.

  2. 2

    Оставьте или уберите префикс

    Параметр Префикс Data URI включен, поэтому результат начинается с data:image/png;base64, или с соответствующего типа. Если API нужна «голая» строка Base64, отключите его в разделе Расширенные настройки.

  3. 3

    Конвертируйте и скопируйте

    Нажмите Конвертировать в Base64 text и скачайте .txt-файл для каждого изображения, готовый для вставки в код.

Загрузите изображение и нажмите Конвертировать в Base64 text. Вы получите файл, закодированный обычными символами и начинающийся с data:image/…;base64,, так что его можно сразу вставить в img src или CSS url(). Само изображение не меняется.

Когда пригодится изображение в Base64

Base64 описан в RFC 4648 (2006) и сопоставляет каждым 3 байтам двоичных данных 4 символа из алфавита в 64 знака: A–Z, a–z, 0–9, + и /. Результат проходит по любому каналу, рассчитанному на текст. Схема data URI, описанная Ларри Мэсинтером в RFC 2397 в 1998 году, позволяет браузеру воспринимать этот текст как файл.

Фронтенд-разработчики встраивают небольшие иконки, индикаторы загрузки и изображения-заглушки, чтобы страница отображалась без дополнительных запросов. Бэкенд-разработчики передают изображения внутри JSON, потому что многие API, в том числе сервисы компьютерного зрения и OCR, принимают картинку в поле Base64. Тестировщики хранят тестовые данные в исходном коде, а те, кто делает HTML-отчеты в одном файле или заметки в Markdown, встраивают скриншоты, чтобы файл оставался самодостаточным при отправке по почте или архивировании.

Как выглядит результат в Base64

Прозрачный PNG 1 × 1 (68 байт) в виде data URI внутри тега img
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR4nGNgAAIAAAUAAXpeqz8AAAAASUVORK5CYII=" width="1" height="1" alt="Пиксель">

Файл PNG с иконкой

24 KB

типичный набор иконок панели инструментов, 96 × 96 px

+33% к размеру, качество не меняется

Текст Base64

32 KB

4 символа на 3 байта плюс префикс

ANY I

Любое изображение

Инструмент принимает распространённые форматы изображений, включая JPG, PNG, WebP, HEIC, GIF, BMP и TIFF. Формат определяется по файлу автоматически, так что вам не нужно знать, какое у вас изображение.

Конвертер Any image

BASE64

Текст в кодировке Base64

Base64 — кодировка, описанная в RFC 4648, которая превращает любые двоичные данные в строку из 64 безопасных текстовых символов. Она используется, чтобы встраивать изображения в HTML и CSS в виде data URI, прикреплять файлы к письмам и передавать двоичные данные в JSON или XML. Кодирование полностью обратимо, но увеличивает объём данных примерно на 33%. Base64 — не шифрование и не даёт никакой защиты: декодировать его может кто угодно.

Сжатие
Без потерь
Прозрачность
–
Анимация
–
Год появления
–
Конвертер BASE64

Изображения превращают в текст Base64, когда их нужно передать внутри чего-то, что переносит только текст: файла HTML или CSS без отдельного запроса, поля JSON в запросе к API, тестовых данных или отчета в одном файле.

Когда встроенное изображение ускоряет страницу, а когда замедляет

Встраивание экономит запрос. Это было особенно важно в HTTP/1.1, когда браузеры открывали лишь несколько соединений на сайт. При мультиплексировании в HTTP/2 и HTTP/3 лишние мелкие запросы обходятся дешево, поэтому выигрыш уменьшается, а издержки остаются: закодированное изображение нельзя кэшировать отдельно, оно скачивается заново при каждом изменении HTML или CSS и замедляет разбор файла, в котором лежит.

Разумное правило: встраивайте только изображения в несколько килобайт, которые есть на каждой странице, например логотип или спрайт иконок, а все остальное отдавайте файлами. Фотографии почти никогда не стоит встраивать. Если вам на самом деле нужен другой тип файла, а не текст, с этим справится конвертер изображений.

Сильные стороны Base64-изображений

  • Один самодостаточный файл HTML, CSS или JSON
  • Нет лишнего запроса для крошечных иконок
  • Безопасно внутри JSON, XML и других текстовых форматов
  • Без потерь и обратимо

Недостатки Base64-изображений

  • Примерно на 33% больше двоичного файла
  • Браузер не кэширует отдельно
  • Многие почтовые клиенты блокируют такие изображения
  • Сложно просматривать в диффах кода

Вопросы о конвертации изображений в Base64

Чем Base64 отличается от Data URI?

Base64 — это только закодированные символы. Data URI оборачивает их схемой и типом: data:image/png;base64, а затем сами символы, чтобы браузер знал, как их декодировать и показать. В HTML и CSS нужен полный data URI, а большинству JSON API нужна только часть Base64.

Насколько увеличивается изображение в Base64?

Base64 записывает 4 символа на каждые 3 байта, поэтому текст примерно на треть больше файла, плюс короткий префикс. PNG размером 30 KB превращается примерно в 40 KB текста. Если HTML или CSS отдаются со сжатием gzip, часть этой разницы компенсируется при передаче.

Можно ли использовать изображение в Base64 в подписи письма?

Это ненадежно. Gmail не показывает изображения в data URI, а ряд почтовых программ для компьютера тоже удаляет их, и получатели видят значок сломанной картинки. Разместите изображение на веб-сервере или приложите к письму, а Base64 оставьте для веб-страниц и приложений.

Стоит ли кодировать SVG-иконку в Base64?

Это работает, но SVG уже является текстом. Если закодировать разметку как URL вместо Base64, data URI обычно получается короче и остается читаемым. Для всего, что крупнее маленькой иконки, лучше отдельный SVG-файл, который браузер может кэшировать.

Можно ли перевести текст Base64 обратно в изображение?

Да, кодирование происходит без потерь и полностью обратимо: при декодировании получаются те же исходные байты. Декодер есть в каждом языке программирования, а если вставить полный data URI в адресную строку браузера, изображение откроется.

Меняется ли качество изображения при кодировании?

Нет. Base64 меняет только способ записи байтов, но не пиксели. Чтобы строка стала короче, сначала уменьшите изображение, например с помощью сжатия фото до 20 KB, и закодируйте файл меньшего размера.