data: URL

data: URL — это определённая стандартом RFC 2397 схема, которая позволяет включать небольшие элементы данных в строку URL, как если бы они были ссылкой на внешний ресурс. Она гораздо проще альтернативных методов включения, таких, как MIME с cid: или mid:. Согласно букве RFC, «data: URI» это фактически «data: URL» (URL — унифицированный указатель ресурса), хотя реально он ни на что не указывает.

Эта схема в настоящее время поддерживается браузерами Google Chrome, Mozilla (и его производными типа Firefox), Opera, Safari и Konqueror. Internet Explorer версии 7 не поддерживает data: URI. Ранние версии Internet Explorer принимали неопознанные «about: URI» за HTML-ресурс, так что about:<b>bold</b> соответствовало data:text/html,<b>bold</b> в браузерах, которые поддерживают data: URI.

Преимущества

• Для внедрённых данных не требуются заголовки HTTP, так что data: URI позволяет уменьшить нагрузку на сеть в тех случаях, когда встроенное содержимое меньше, чем заголовок HTTP.
• Браузеру требуется меньше записей в кэш для файлов, содержащих data: URI.
• Окружения с ограниченным доступом к внешним ресурсам могут внедрить контент, даже если к нему закрыт доступ. Например, расширенное поле редактирования HTML может принять вставленное изображение и конвертировать его в data: URI, чтобы скрыть сложность обращения к внешним ресурсам от пользователя.
• Может использоваться, чтобы создать документы XML, содержащие изображения, но остающиеся в пределах контекста XML (нет нужды использовать MIME/MHTML методы, нарушающие правильность XML).

Недостатки

• Чтобы внести изменения во внедрённый контент, его нужно сначала извлечь и декодировать, потом снова закодировать и встроить.
• Закодированные таким образом в Base64 данные примерно на 33 % больше по размеру, чем их бинарный эквивалент.
• Текст, закодированный в формате URLEncode, может быть в три раза больше первоначального (наихудший вариант, когда в тексте присутствуют только не-ASCII символы).
• Внедрённая неоднократно информация повторно загружается как часть содержащего файла, и таким образом не извлекается выгода из кэша браузера.
• Браузеры имеют ограничения по длине URL, что определяет максимальный размер данных. Например, предел URI в Internet Explorer — около 2 КБ.
• Данные включаются как простой поток, и многие среды обработки (типа веб-браузеров) не могут поддерживать контейнеры (вроде multipart/alternative или message/rfc822), чтобы обеспечить большую гибкость, типа метаданных, сжатия данных или content negotiation (согласования контента по языку).

Формат

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

<MIME-type> — спецификация типа носителей данных (с дополнительными параметрами; см. MIME). Появление «; base64» означает, что данные закодированы в base64. Без «; base64» данные (как последовательность байтов) представляются с использованием кодировки ASCII в диапазоне безопасных символов URL и используя стандартное %xx шестнадцатеричное кодирование URL для символов вне этого диапазона. Если <MIME-type> опущен, значение по умолчанию — text/plain; charset=US-ASCII. Для краткости можно опустить «text/plain», оставив параметр charset.

Схема data: URI не поддерживает относительные формы URL.

Примеры

XHTML

Фрагмент внедрённого в XHTML небольшого изображения (перенос на новую строку осуществлён для облегчения восприятия):

<img
src="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw
AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz
ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp
a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl
ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis
F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH
hhx4dbgYKAAA7"
alt="Larry" />

Следует помнить, что data: URI, как любой URI, должен выдерживать форматирование отступами, но на практике существуют проблемы с кодированием в base64. Нужно избегать использования отступов в data: URIs с закодированными в base64 данными.

CSS

Правило CSS с внедрённым фоновым изображением (переносы сделаны для облегчения восприятия):

ul.checklist > li.complete {
    margin-left: 20px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAA
        ABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeN
        Ge4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC) top left no-repeat;
}

JavaScript

Инструкция JavaScript, открывающая встроенное окно-сноску:

window.open('data:text/html;charset=utf-8,%3C!DOCTYPE%20HTML%20PUBLIC%20%22-' +
    '%2F%2FW3C%2F%2FDTD%20HTML%204.0%2F%2FEN%22%3E%0D%0A%3Chtml%20lang%3D%22en' +
    '%22%3E%0D%0A%3Chead%3E%3Ctitle%3EEmbedded%20Window%3C%2Ftitle%3E%3C%2Fhea' +
    'd%3E%0D%0A%3Cbody%3E%3Ch1%3E42%3C%2Fh1%3E%3C%2Fbody%3E%0D%0A%3C%2Fhtml%3E' +
    '%0D%0A', '_blank', 'height=300, width=400');

См. также

Похожие форматы:

• MIME HTML (MHTML), используемый обычно в HTML-сообщениях e-mail. Также может использоваться подобно data:URI в старых версиях Internet Explorer (data URL в IE).
• Веб‐архивы браузера Konqueror — архивы tar+gzip или bzip2 с расширением .war. Safari может сохранять в несовместимый закрытый производный формат.

Ссылки

• RFC 2397 — The «data» URL scheme
• About data: URLs and the mozilla implementation
• data: URL tests
• The data: URI kitchen
• Generate Data URL <img> tags from images through the web
• Data URI и приёмы черновой вёрстки
• Перевод RFC 2397 — URL-схема «Data»