Как пользоваться
- Введите текст или выберите файл, который нужно встроить.
- Проверьте или укажите тип MIME, например image/png или image/svg+xml, и выберите в поле «Кодирование» вариант «Base64» или «Процентное кодирование».
- Скопируйте сгенерированный data URI в свой HTML, CSS или JSON.
- Чтобы изучить существующий data URI, вставьте его в парсер: вы увидите тип MIME, кодировку, размер и предпросмотр, а также сможете скачать встроенный файл.
Синтаксис data URI
Data URI, описанный в RFC 2397, переносит небольшой файл прямо внутри URL:
data:[<mediatype>][;base64],<data>
data:text/plain;charset=UTF-8,Hello%20world
data:image/png;base64,iVBORw0KGgo...Медиатип сообщает браузеру, как интерпретировать данные; если он не указан, подразумевается text/plain;charset=US-ASCII. Флаг ;base64 означает, что часть после запятой закодирована в Base64. Без него данные представляют собой обычный текст, в котором специальные символы записаны с помощью процентного кодирования.
Base64 или процентное кодирование
Base64 — правильный выбор для двоичных файлов, таких как PNG, JPEG, WebP, шрифты и PDF. Он всегда добавляет около 33%. Для текстовых форматов процентное кодирование часто даёт меньший размер, потому что большинство символов остаются как есть и экранировать нужно лишь немногие, например <, >, #, % и двойные кавычки. Поэтому оно хорошо подходит для значков SVG, а читаемый результат к тому же лучше сжимается gzip или Brotli. Однако каждый байт текста не из ASCII превращается в три символа, поэтому для китайского текста или кириллицы Base64 обычно короче. Если сомневаетесь, попробуйте оба варианта и оставьте более короткий результат.
/* SVG с процентным кодированием в CSS: внутри одинарные кавычки, # записан как %23 */
.dot { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23f60'/%3E%3C/svg%3E"); }Когда встраивание оправдано
Data URI экономит HTTP-запрос, но данные становятся частью документа, в котором находятся:
- Нет отдельного кеширования. Изображение, встроенное в HTML, загружается заново с каждой страницей. Изображение, встроенное в таблицу стилей, кешируется вместе с ней, но любое его изменение делает недействительным кеш всей таблицы стилей.
- Более медленная первая отрисовка. Большие data URI в CSS задерживают отрисовку, потому что браузер сначала должен загрузить и разобрать всю таблицу стилей.
- Увеличение размера. Base64 добавляет треть объёма, и сжатие HTML или CSS компенсирует это лишь частично.
В HTTP/2 и HTTP/3 дополнительные запросы обходятся дёшево, поэтому встраивайте только небольшие ресурсы размером в несколько килобайт, например значки, крошечные заглушки или критически важный фон, а всё остальное отдавайте обычными файлами. Сайтам с Content Security Policy нужно разрешить data: в img-src или font-src, чтобы встроенные изображения и шрифты загружались.
Часто задаваемые вопросы
Есть ли ограничение на размер data URI?
RFC 2397 не устанавливает ограничений, и современные браузеры принимают data URI размером в несколько мегабайт в изображениях и таблицах стилей. Тем не менее большие data URI — плохая идея: они раздувают страницу, не кешируются отдельно и дольше разбираются.
Почему data URI не открывается, когда я нажимаю на ссылку с ним?
Большинство браузеров не позволяют веб-страницам открывать data: URL в главном окне — это защита от фишинга. Используйте data URI внутри изображений, CSS или ссылок для скачивания либо вставьте URI в парсер на этой странице, чтобы просмотреть его и скачать содержимое.
Как использовать data URI в HTML и CSS?
<img src="data:image/png;base64,..."> в HTML или background-image: url("data:image/svg+xml,...") в CSS. В CSS заключайте значение в кавычки, особенно для SVG с процентным кодированием.Нужно ли указывать кодировку?
text/plain или text/html, содержащих символы не из ASCII, — да: добавьте ;charset=UTF-8 после медиатипа, иначе из-за кодировки US-ASCII по умолчанию они могут отобразиться искажённо. Двоичным типам, таким как image/png, кодировка не нужна.