Генератор Data URI

Data URI (или data URL) встраивает содержимое файла непосредственно в строку — data:<mime-type>;base64,<data> — чтобы его можно было использовать где угодно, где ожидается обычный URL, без отдельного HTTP-запроса. Этот инструмент создает URI из загруженного файла или вставленного текста и сообщает, насколько больше закодированная версия, чем оригинал.

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

1. Выберите источник: Загрузить файл (любой тип файла — изображение, шрифт, PDF, аудио, что угодно) или Введите текст (вставьте простой текст, HTML, CSS, JavaScript или разметку SVG и выберите его тип MIME).
2. При загрузке файла браузер автоматически обнаруживает тип MIME самого файла. Если он неправильный или вам нужен другой тип, установите флажок Переопределить обнаруженный тип MIME и введите его вручную (например image/png, font/woff2).
3. Скопируйте полученный Data URI — он готов к вставке в <img src>, CSS background-image: url(...), поле JSON или @font-face src.
4. Проверьте таблицу Размер и тип для обнаруженного/выбранного типа MIME, исходного размера в байтах, размера закодированного data URI и процентного увеличения.
5. Если источник — изображение, живой Предпросмотр отображается под data URI, чтобы вы могли убедиться, что он правильно декодирован перед использованием.

Все выполняется локально в вашем браузере — загруженный вами файл никогда не отправляется на сервер.

Почему data URI намного больше, чем исходный файл?

Кодирование Base64 представляет каждые 3 байта двоичных данных как 4 символа ASCII, что само по себе добавляет около 33% к размеру. К тому же префикс data:<mime-type>;base64, добавляет небольшие фиксированные расходы. Для короткого фрагмента эти расходы могут быть доминирующими — кодирование 13 байт "Hello, World!" создает data URI в три раза длиннее оригинала — но для больших файлов процентное увеличение приближается к ~33% расходам на base64.

Когда следует использовать data URI вместо обычного файла?

Data URI полезны для небольших часто переиспользуемых ресурсов — иконок, небольших фоновых изображений, веб-шрифтов, небольших заполняющих изображений — где сэкономить HTTP-запрос больше, чем штраф за размер ~33% и тот факт, что ресурс больше не может кэшироваться независимо или использоваться совместно на разных страницах. Для чего-либо большего, чем несколько килобайт, или ресурса, повторно используемого на многих страницах, обычный связанный файл, который браузер может кэшировать, почти всегда лучший выбор.

Работает ли это с текстом на неанглийском языке или эмодзи?

Да. Вставленный текст кодируется UTF-8 перед кодированием base64, поэтому символы с диакритическими знаками, текст CJK и эмодзи правильно туда-сюда. (Некоторые старые инструменты используют трюк btoa(unescape(encodeURIComponent(text))), который неправильно обрабатывает определенный текст Unicode — этот инструмент использует TextEncoder напрямую.)

Какой тип MIME выбрать для вставленного текста?

Сопоставьте содержимое: text/plain для простого текста, text/html для фрагментов HTML, text/css для таблиц стилей, text/javascript для скриптов и image/svg+xml для разметки SVG (это также то, что делает рендеринг предпросмотра SVG). Получение правильного типа MIME важно, если data URI потребляется чем-то, что его проверяет — браузер, отрисовывающий тег <img>, например, требует тип image/*.

Связанное

Чтобы идти в другом направлении — декодирование data URI или строки Base64 обратно в простой текст — используйте Base64 Decode. Для SVG конкретно, SVG to Base64 Encode также производит готовые к вставке фрагменты HTML <img> и CSS background-image вместе с data URI.