# Генератор Data URI

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

> Каноническая страница: https://elysiatools.com/ru/tools/data-uri-generator

- **Категория:** Development

- **Ключевые слова:** data uri, base64, inline, встроить, изображение, шрифт, css, html, data url

## Обзор

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

## Входные данные

- **Файл** (file)
- **Кодировка** (select)
- **Формат вывода** (select)
- **Тип MIME** (text): Auto-detected (e.g. image/png). Override only if needed.

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

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

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

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

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

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

## Частые вопросы

### Что такое Data URI?

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

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

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

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

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

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

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

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

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

## Связанные инструменты

- [Последовательность Изображений в Видео](https://elysiatools.com/ru/tools/image-sequence-to-video): Преобразует изображения или ZIP-архив кадров в видео с естественной сортировкой имен файлов
- [PDF контакт-лист](https://elysiatools.com/ru/tools/pdf-photo-contact-sheet): Создает контактные листы с миниатюрами, именами файлов и EXIF
- [PDF раскадровка](https://elysiatools.com/ru/tools/pdf-storyboard-sheet): Создает листы раскадровки с миниатюрой и областью описания
- [Инструмент Прозрачности Водяных Знаков](https://elysiatools.com/ru/tools/image-watermark-opacity): Добавляйте водяные знаки с пользовательской прозрачностью на изображения, поддерживая текстовые и графические водяные знаки с расширенным контролем прозрачности
- [Массовое преобразование изображений](https://elysiatools.com/ru/tools/batch-convert): Преобразование нескольких изображений в разные форматы с настройкой качества
- [Конвертер глубины цвета изображения в PNG](https://elysiatools.com/ru/tools/image-to-bit-depth-png): Преобразует изображения в точные монохромные, индексированные, серые, RGB или RGBA PNG с проверкой результата.
- [Шаблоны Колонтитулов PDF](https://elysiatools.com/ru/tools/pdf-header-footer-snippets): Преобразует HTML в PDF и добавляет логотип, заголовок и дату
- [Палитра из изображения в design-токены](https://elysiatools.com/ru/tools/image-to-design-tokens): Извлекает доминирующие цвета из изображения методом k-средних и экспортирует их как CSS-переменные / SCSS / конфиг Tailwind / JSON-токены с именами и шкалой оттенков

## Примеры

- [Примеры Обработки Изображений Web TypeScript](https://elysiatools.com/ru/samples/web-image-processing-typescript): Примеры обработки изображений Web TypeScript включая чтение/сохранение, масштабирование и конвертацию форматов
- [Примеры Обработки Изображений Web Rust](https://elysiatools.com/ru/samples/web-image-processing-rust): Примеры обработки изображений Web Rust включая чтение/запись, масштабирование и преобразование форматов
- [PDF Примеры](https://elysiatools.com/ru/samples/pdf-samples): PDF примеры, созданные инструментами 2026-02-01..2026-02-10
- [Примеры Коммуникации WebRTC в Реальном Времени](https://elysiatools.com/ru/samples/webrtc-samples): Комплексные примеры WebRTC для P2P аудио/видео коммуникации, каналов данных, обмена экраном и сервера сигнализации