Генератор data URI

Как создать data URI

1. Выберите режим. Из текста (по умолчанию) кодирует то, что вы ввели или вставили. Из файла принимает перетащенный, вставленный или выбранный файл любого типа. Разобрать работает в обратную сторону и раскладывает URI на части.
2. В режиме Из текста задайте MIME-тип (например, text/css или application/json), Кодировку и Кодирование: Base64 или URL-кодирование. В режиме Из файла MIME-тип подставляется из файла, и его можно поправить.
3. Выберите Формат вывода: Data URI, CSS url(), HTML <a> с именем для скачивания или Markdown. Для картинок появляется HTML <img>, а для шрифтов @font-face.
4. Нажмите Скопировать результат. Скачать файл сохраняет сами данные, а Сохранить как .txt сохраняет текст результата.

Под кнопками Данные показывают размер данных, Длина URI размер результата, а Накладные расходы разницу в процентах.

Синтаксис data URI

Data URI упаковывает целый файл в URL:

data:[<media type>][;charset=<charset>][;base64],<data>

Несколько проверенных примеров:

Запятая обязательна, даже если данных нет: data:, считается корректным пустым URI.

Base64 или URL-кодирование

Оба способа дают корректный URI; они различаются размером и читаемостью.

Простой ASCII-текст в URL-кодировании короче, и его можно прочитать в исходниках. Каждый не-ASCII байт стоит трёх символов (é становится %C3%A9), поэтому для текста на других алфавитах, включая кириллицу, быстро выигрывает Base64. Для картинок, шрифтов, PDF и других двоичных файлов используйте Base64; генератор предупредит, если выбрать для двоичных данных URL-кодирование.

URL-кодирование здесь консервативное: буквы, цифры и - . _ ~ ! $ * + , ; = : @ / ? остаются как есть, всё остальное экранируется, включая #, %, кавычки, скобки и пробелы. Неэкранированный # оборвал бы URI, потому что браузеры читают его как начало фрагмента. Для SVG есть третий, более короткий вариант на странице SVG в data URI.

Где работают data URI

• Картинки в <img src>, CSS background-image, <link rel="icon"> и poster у видео.
• Шрифты в src у @font-face; это удобно для одного маленького иконочного шрифта. Если MIME-тип относится к шрифтам, генератор соберёт правило сам.
• Скачивания через <a href="data:..." download="report.csv">: так отдают файлы, которые создаются на странице без сервера.
• Стили и скрипты, загружаемые через <link href> или <script src>, если Content Security Policy страницы разрешает для них data:.
• Тестовые фикстуры и JSON-данные, которым нужен небольшой файл прямо внутри.

Работают они не везде. Chrome и Firefox блокируют переход всей вкладки на URL data: по инициативе страницы, поэтому ссылка на data:text/html,... по клику ничего не делает. Content Security Policy должна указывать data: в img-src, font-src или соответствующей директиве. Многие веб-почты, включая Gmail, полностью вырезают картинки в data URI; см. статью Base64 в электронной почте.

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

Base64 увеличивает двоичные данные примерно на 33%, а URI повторяется на каждой странице или в каждом файле стилей, где он есть, и не получает собственной записи в кеше. Для небольших ресурсов в несколько килобайт это выгодно, для фотографий невыгодно. Цифры разобраны в статье о производительности data URI. Для картинок есть Картинка в Base64, где перед кодированием можно уменьшить и сконвертировать изображение.

Создание data URI в коде

Текст в URL-кодировании на JavaScript:

const uri = "data:text/plain;charset=utf-8," + encodeURIComponent("Prices: 5 € & up");
// data:text/plain;charset=utf-8,Prices%3A%205%20%E2%82%AC%20%26%20up

JSON в Base64 на Python:

import base64, json

obj = {"name": "Ada", "langs": ["en", "fr"]}
uri = "data:application/json;base64," + base64.b64encode(json.dumps(obj).encode()).decode()
# data:application/json;base64,eyJuYW1lIjogIkFkYSIsICJsYW5ncyI6IFsiZW4iLCAiZnIiXX0=

Подробнее в статьях Base64 в JavaScript и Base64 в Python. Чтобы разобрать data URI, найденный где-то ещё, используйте парсер data URI.

Вопросы и ответы