Генератор Data URI

Преобразует файлы в Data URI (Base64 или процентное кодирование) для встраивания изображений, шрифтов и ресурсов прямо в HTML, CSS или Markdown

Click to upload file or drag and drop file here

Maximum file size: 10MB Supported formats: image/png, image/jpeg, image/gif, image/webp, image/avif, image/bmp, image/svg+xml, image/x-icon, image/tiff, audio/mpeg, audio/wav, audio/ogg, audio/flac, video/mp4, video/webm, font/woff, font/woff2, font/ttf, font/otf, application/pdf, text/css, text/javascript, text/plain, text/html, application/json, application/xml, */*

Ключевые факты

Категория
Разработка и Web
Типы входных данных
file, select, text
Тип результата
text
Покрытие примерами
4
API доступен
Yes

Обзор

Генератор Data URI позволяет быстро преобразовать изображения, шрифты, аудиофайлы и другие документы в текстовую строку Data URI с использованием Base64 или процентного кодирования. Это позволяет встраивать ресурсы непосредственно в код HTML, CSS или Markdown, сокращая количество HTTP-запросов и упрощая доставку контента.

Когда использовать

  • •При оптимизации веб-страниц для уменьшения количества HTTP-запросов путем встраивания мелких иконок и картинок прямо в CSS или HTML.
  • •При создании автономных HTML-документов или писем электронной почты, которые должны корректно отображать изображения без внешних зависимостей.
  • •При необходимости быстро закодировать шрифты (WOFF/WOFF2) для их прямого подключения в файлах стилей.

Как это работает

  • •Загрузите файл (изображение, шрифт, аудио или текстовый документ) размером до 10 МБ.
  • •Выберите тип кодирования (Base64, URL-кодирование или без кодировки) и укажите формат вывода (Data URI, HTML-тег img, CSS background или Markdown).
  • •При необходимости переопределите MIME-тип в соответствующем поле.
  • •Скопируйте сгенерированный результат для непосредственной вставки в ваш код.

Сценарии использования

Встраивание SVG-иконок непосредственно в CSS-правила background-image для ускорения загрузки интерфейса.
Интеграция кастомных шрифтов WOFF2 в CSS-файл для предотвращения мигания текста при загрузке страницы.
Создание шаблонов HTML-писем со встроенными логотипами, которые не блокируются почтовыми клиентами как внешние изображения.

Примеры

1. Встраивание SVG-иконки в CSS

Фронтенд-разработчик
Контекст
Разработчик оптимизирует скорость загрузки главной страницы сайта и хочет избавиться от лишних HTTP-запросов для мелких декоративных SVG-иконок.
Проблема
Необходимо встроить SVG-иконку прямо в файл стилей CSS в качестве фонового рисунка.
Как использовать
Загрузить файл `icon.svg`, выбрать кодировку «URL-кодирование (процент)» и формат вывода «CSS background».
Пример конфигурации
Файл: icon.svg, Кодировка: url, Формат вывода: css
Результат
Получен готовый CSS-код вида background-image: url("data:image/svg+xml;utf8,...");, готовый для вставки в файл стилей.

2. Встраивание шрифта WOFF2 в CSS

Веб-дизайнер
Контекст
Дизайнер готовит тему оформления и хочет, чтобы нестандартный шрифт загружался мгновенно вместе со стилями, избегая эффекта FOIT (Flash of Invisible Text).
Проблема
Нужно перевести файл шрифта WOFF2 в формат Base64 и обернуть в CSS-код.
Как использовать
Загрузить файл `font.woff2`, выбрать кодировку «Base64» и формат вывода «Только Data URI» для последующей вставки в src: url() внутри правила @font-face.
Пример конфигурации
Файл: font.woff2, Кодировка: base64, Формат вывода: data-uri
Результат
Сгенерирована строка Data URI, начинающаяся с data:font/woff2;base64,..., готовая для интеграции в CSS.

Проверить на примерах

json, xml, html
PDF Примеры
PDF примеры, созданные инструментами 2026-02-01..2026-02-10
preferred input family image,pdf,text
image, pdf
Примеры Коммуникации WebRTC в Реальном Времени
Комплексные примеры WebRTC для P2P аудио/видео коммуникации, каналов данных, обмена экраном и сервера сигнализации
preferred input family audio,video,text
audio, video
Примеры QR-кодов
Примерные изображения QR-кодов для тестирования инструментов чтения и генерации QR-кодов
preferred input family image,text,json
image, text
Примеры XML
Примеры формата XML (eXtensible Markup Language) от простых до сложных структур
preferred input family image,text,xml
image, text

Связанные хабы

Инструменты кодирования и конвертации аудио
Сравните инструменты конвертации аудиоформатов, изменения битрейта, частоты дискретизации, смены кодека и экспорта в одном хабе.
Инструменты конвертации форматов изображений и анимированного экспорта
Сравните конвертеры JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 и инструменты экспорта анимированных изображений в одном хабе.
Инструменты JSON-обмена и перевода форматов
Сравните инструменты преобразования JSON для CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN и других структурированных форматов в одном хабе.
Инструменты конвертации регистра, кодировки и нормализации текста
Сравните в одном хабе конвертацию регистра, ширины символов, кодировок, работу с quoted-printable и встроенную нормализацию текста.

FAQ

Что такое Data URI?

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

Какие форматы файлов поддерживает генератор?

Поддерживаются изображения (PNG, JPEG, SVG, WebP), шрифты (WOFF, TTF), аудио, видео, PDF, а также текстовые файлы (CSS, JS, HTML, JSON).

Какой максимальный размер файла можно загрузить?

Максимальный размер загружаемого файла составляет 10 МБ.

Зачем использовать процентное кодирование вместо Base64?

Процентное кодирование (URL-encoding) часто используется для SVG-изображений, так как оно сохраняет читаемость кода и дает меньший размер файла по сравнению с Base64.

Можно ли изменить MIME-тип вручную?

Да, вы можете указать собственный MIME-тип в поле «Тип MIME», если автоопределение сработало некорректно или требуется специфический тип.

Документация API

Конечная точка запроса

POST /ru/api/tools/data-uri-generator

Параметры запроса

Имя параметра Тип Обязательно Описание
file file (Требуется загрузка) Да -
encoding select Нет -
outputFormat select Нет -
customMime text Нет -

Параметры типа файл должны быть загружены сначала через POST /upload/data-uri-generator для получения filePath, затем filePath должен быть передан в соответствующее поле файла.

Формат ответа

{
  "result": "Processed text content",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
Текст: Текст

Документация MCP

Добавьте этот инструмент к конфигурации сервера MCP: 

{
  "mcpServers": {
    "elysiatools-data-uri-generator": {
      "name": "data-uri-generator",
      "description": "Преобразует файлы в Data URI (Base64 или процентное кодирование) для встраивания изображений, шрифтов и ресурсов прямо в HTML, CSS или Markdown",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=data-uri-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Вы можете объединять несколько инструментов, например: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, максимум 20 инструментов.

Поддерживает ссылки на файлы URL или кодирование Base64 для параметров файла.

Если вы столкнулись с проблемами, пожалуйста, свяжитесь с нами по адресу [email protected]