Что такое Data URI?

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

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

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

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

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

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

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

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

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

Elysia Tools

Навигация

Development

Генератор Data URI

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

Запуск

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

Заполните форму, запустите инструмент и посмотрите результат на этой же странице.

Ввод

Заполните нужные поля и запустите инструмент.

4 параметров

ФайлыЗагрузите исходные файлы для этого сценария.1

ФайлfileОбязательно

Максимальный размер одного файла: 10 MBПоддерживаемые типы: 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, */*

СодержимоеВставьте или введите основные значения.1

Тип MIMEtextНеобязательно

НастройкиНастройте форматы, диапазоны, числа и режимы.2

КодировкаselectНеобязательноФормат выводаselectНеобязательно

Результат

Готово к запуску

После запуска здесь появятся файлы, текст, структурированные данные или потоковый вывод.

Примеры

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

Связано

Генератор Data URI

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

Ввод

Результат

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

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

Ввод

Результат

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

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

Обзор

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

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

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

Примеры

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

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

FAQ

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

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

PDF Примеры

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

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

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

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

Инструмент Прозрачности Водяных Знаков

Инструменты кодирования и конвертации аудио

Инструменты конвертации форматов изображений и анимированного экспорта

Инструменты JSON-обмена и перевода форматов

Инструменты конвертации регистра, кодировки и нормализации текста