В этой статье
Что такое data URI?
Data URI (Uniform Resource Identifier) — это схема, позволяющая встраивать содержимое файла непосредственно в строку URL вместо ссылки на внешний файл. Определённый RFC 2397, data URI кодирует содержимое инлайново, используя формат data:[mediatype][;base64],data. Это устраняет необходимость отдельного HTTP-запроса для получения ресурса.
Data URI обычно используются для встраивания небольших изображений, шрифтов, SVG и других ресурсов непосредственно в HTML или CSS. Вместо ссылки на внешний файл по URL, всё содержимое файла кодируется (обычно в base64) и размещается инлайново. Это может уменьшить количество HTTP-запросов и упростить развёртывание для небольших ресурсов.
Как создавать data URI
Генератор data URI конвертирует содержимое файла или текст в формат data URI. Процесс включает определение MIME-типа и кодирование содержимого.
- Текстовый ввод — введите текст напрямую и укажите MIME-тип (text/plain, text/html, text/css, application/json). Текст может быть URL-кодирован или base64-кодирован
- Загрузка файла — загрузите любой файл (изображения, шрифты, SVG, документы), и генератор автоматически определит MIME-тип и закодирует содержимое в base64
- Выбор MIME-типа — тип медиа сообщает браузеру, как интерпретировать данные. Распространённые типы включают image/png, image/svg+xml, text/css и application/javascript
Попробуйте бесплатно — без регистрации
Сгенерировать data URI →Когда использовать data URI
Data URI наиболее полезны для небольших, часто используемых ресурсов, где устранение HTTP-запроса улучшает производительность.
- Фоновые изображения CSS — встраивайте небольшие иконки или паттерны непосредственно в CSS, чтобы избежать дополнительных запросов. Идеально для изображений менее 2-4 КБ
- Инлайновые SVG в CSS — встраивайте SVG-иконки как data URI в свойства background-image, когда SVG нельзя разместить непосредственно в HTML
- HTML-шаблоны электронных писем — встраивайте изображения непосредственно в HTML письма, поскольку многие почтовые клиенты блокируют внешние изображения по умолчанию
Часто задаваемые вопросы
Есть ли ограничение размера для data URI?
Жёсткого ограничения в спецификации нет, но практические ограничения существуют. Большинство современных браузеров обрабатывают data URI размером до нескольких мегабайт, но Internet Explorer ограничивал их до 32 КБ. Кодирование base64 увеличивает размер данных примерно на 33%. Для ресурсов больше 5-10 КБ внешние файлы с правильным кешированием обычно эффективнее.
Влияют ли data URI на производительность?
Для небольших ресурсов data URI улучшают производительность, устраняя HTTP-запросы. Однако данные, закодированные в base64, примерно на 33% больше оригинального файла, и data URI не могут кешироваться браузером независимо. Для больших файлов внешние файлы с заголовками кеша работают лучше.
Безопасны ли data URI?
Data URI имеют последствия для безопасности. Большинство браузеров блокируют выполнение JavaScript в data URI. Однако data URI могут обходить правила Content Security Policy (CSP), если они не настроены правильно. При принятии data URI, созданных пользователями, всегда проверяйте MIME-тип.