Руководство по использованию инструмента

Узнайте, когда использовать этот инструмент, что он поддерживает и как его применяют пользователи.

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

Категория: Development
Типы ввода: file, select, text
Тип вывода: text
Покрытие примерами: 4
API доступен: Да

Обзор

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

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

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

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

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

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

Встраивание 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.

FAQ

Что такое Data URI?

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

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

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

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

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

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

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

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

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

Файл: font.woff2, Кодировка: base64, Формат вывода: data-uri

Генератор Data URI

Запустить этот инструмент

Примеры для этого инструмента

Продолжить с похожими инструментами и темами

Узнайте, когда использовать этот инструмент, что он поддерживает и как его применяют пользователи.

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

Обзор

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

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

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

Примеры

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

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

FAQ

Примеры Обработки Изображений Web TypeScript

Примеры Обработки Изображений Web Rust

PDF Примеры

Примеры Коммуникации WebRTC в Реальном Времени

Последовательность Изображений в Видео

Музыкальная визуализация изображения частицами

PDF контакт-лист

PDF раскадровка