Что такое Генератор Data URI?

Генератор Data URI преобразует файлы в Data URI с кодировкой base64, которые можно встраивать прямо в HTML, CSS или JavaScript. Избавляет от лишних HTTP-запросов для мелких ресурсов — иконок, шрифтов и т.д.

Перетащите файл до 20 МБ, и инструмент определит MIME-тип, закодирует байты в base64 и выдаст три готовых сниппета: сам data URI, правило background-image для CSS и тег img для HTML. У изображений есть живой предпросмотр, так что пустой или битый вывод видно ещё до публикации. Можно также вставить текст, чтобы закодировать строку SVG или JSON, уменьшить крупные изображения перед кодированием, чтобы URI оставался небольшим, исправить MIME-тип, если он определён неверно, закодировать сразу несколько файлов, загрузить удалённый файл прямо по URL или переключиться в режим декодирования, вставить data URI и скачать исходный файл обратно.

Как использовать

1. Загрузите файл через форму выбора или переключитесь в текстовый режим и вставьте строку (SVG, JSON, CSS) для кодирования.
2. Инструмент кодирует файл в base64 и генерирует полный Data URI с правильным MIME-типом.
3. Скопируйте Data URI для использования в атрибуте src тега img, CSS background-image или JavaScript-коде.

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

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

Результат

Сконвертируйте favicon.png размером 2 КБ в Data URI и вставьте прямо в HTML — на одну сетевую загрузку меньше при каждом открытии страницы.

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

Почему закодированный data URI примерно на 33% больше файла?

Base64 представляет каждые 3 байта бинарных данных 4 символами ASCII, отсюда рост на 33%. Gzip в HTTP-ответе отыгрывает большую часть, но HTML или CSS на диске остаются крупнее исходного ресурса.

Каков разумный размер data URI?

До 10 КБ в исходном виде, дальше встраивать невыгодно. Браузер по-прежнему распарсит, но выгода кэша теряется (URI пересчитывается на каждой странице), а HTML и CSS становятся неудобными для правок. Большие ресурсы лучше хостить обычным способом.

Можно ли использовать data URI как фоновое изображение в CSS?

Да, инструмент сразу возвращает готовое правило CSS. Заверните URI в url() внутри background-image. Браузер декодирует его при первой отрисовке, маленькая иконка остаётся встроенной, и сетевой запрос, который тормозил бы первый показ, не нужен.

Кэширует ли браузер data URI как обычную картинку?

Нет. Data URI — это часть родительского документа, и она кэшируется только вместе с ним. Одно изображение, упомянутое в двадцати страницах, расшифруется двадцать раз. Если ресурс используется на разных страницах, обычный URL в среднем быстрее.

Работают ли data URI в HTML-письмах?

Gmail и Apple Mail их отображают. Outlook (десктоп для Windows) их удаляет. Для широкого охвата прикрепляйте изображение частью с CID-ссылкой вместо встраивания data URI в тело письма.

Похожие инструменты