Генератор Data URI
Превращайте любой файл или текст в data: URI с верным MIME-типом, в Base64 или с процентным кодированием, плюс готовые фрагменты <img> и CSS. Локально.
Что такое Генератор Data URI?
Data URI встраивает файл прямо в HTML, CSS или JSON в виде data:<mime>;base64,<data>, так что отдельный запрос не нужен. Инструмент превращает любой файл (изображения, шрифты, SVG, PDF…) или введённый текст в data URI, определяет MIME-тип, позволяет выбрать Base64 или процентное кодирование и выдаёт подходящие фрагменты HTML и CSS.
Как пользоваться Генератор Data URI
- Выберите Файл и перетащите файл либо выберите Текст и введите содержимое.
- Проверьте или измените MIME-тип.
- Оставьте включённым Кодирование Base64 (отключите для процентного кодирования текста и SVG) для бинарных файлов; отключите его для процентного кодирования текста и SVG (часто получается меньше).
- Скопируйте Data URI либо фрагмент HTML / CSS.
Пример
Text: Hello, World! (Base64 on)
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==
Когда использовать Генератор Data URI
Используйте data URI для небольших ресурсов: иконок, крошечных SVG, изображений-заглушек, шрифтов в однофайловых демо или шаблонах писем и тестовых данных. Не применяйте их на сайтах для файлов крупнее нескольких килобайт: Base64 добавляет около 33% к размеру, а встроенные данные нельзя кешировать отдельно от страницы или таблицы стилей.
Как работает Генератор Data URI
Файл читается в браузере как байты. MIME-тип берётся из браузера или расширения файла. При Base64 байты кодируются стандартным алфавитом (RFC 4648) и записываются как data:<mime>;base64,… (RFC 2397). Без Base64 содержимое декодируется как UTF-8 и экранируется через encodeURIComponent, а для текстовых типов добавляется ;charset=utf-8. Для изображений показывается предпросмотр, а также размер результата.
Распространенные Случаи Использования
- Встраивание небольшой SVG-иконки в background-image в CSS
- Встраивание изображений в однофайловый HTML-отчёт
- Добавление крошечного изображения в тестовые данные JSON API
- Создание самодостаточного изображения для подписи в письме
Часто Задаваемые Вопросы
Почему data URI больше моего файла?
Base64 кодирует каждые 3 байта четырьмя символами, поэтому результат примерно на 33% больше. Процентное кодирование текста или SVG часто даёт меньше.
Загружается ли мой файл?
Нет. Файл читается и кодируется целиком в вашем браузере.
Каков предел размера?
Инструмент принимает файлы до 20 МБ, но браузеры и почтовые клиенты плохо справляются с большими data URI; делайте их небольшими.