Data: URL
data: URL - это определённая стандартом RFC 2397 схема, которая позволяет включать небольшие элементы данных в строку, как если бы они были ссылкой на внешний ресурс. Она гораздо проще альтернативных методов включения, таких как MIME с cid: или mid:. Согласно букве RFC “data: URI” это фактически “data: URL” (URL - унифицированный указатель ресурса), хотя реально он ни на что не указывает
Эта схема в настоящее время поддерживается браузерами Mozilla (и его производными типа Firefox), Opera, Safari and 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).
Недостатки
- Чтобы внести изменения во внедрённый контент, его нужно сначал извлечь и декодировать, потом снова закодировать и встроить.
- data: URIs закодированные в Base64 примерно на 33 % больше по размеру чем их бинарный эквивалент.
- Текст закодированный в URL data: URIs может быть больше в три раза (в критических случаях) чем первоначальный.
- Внедрённая неоднократно информация, повторно загружается как часть содержащего файла, и таким образом не извлекается выгода из кэша браузера.
- Браузеры имеют ограничения по длине URL, что определяет максимальный размер данных. Например, URIs в Опере имели предел 4 КБ.
- Данные включаются как простой поток, и многие среды обработки (типа web-браузеров) не могут поддерживать контейнеры (вроде multipart/alternative или message/rfc822), чтобы обеспечить большую гибкость, типа метаданных, сжатия данных, или content negotiation(согласования контента по языку).
Формат
data:[<mediatype>][;encoding],
<mediatype> - спецификация типа носителей данных (с дополнительными параметрами; см. MIME). Появление “; base64″ означает, что данные закодированы в base64. Без “; base64″, данные (как последовательность байтов) представляются, с использованием кодировки ASCII в диапазоне безопасных символов URL и используя стандартное %xx шестнадцатеричное кодирование URL для символов вне этого диапазона. Если <mediatype> опущен, значение по умолчанию - 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');
См. также
Альтернативой для присоединения ресурсов к документу HTML служит MIME HTML| используемый обычно в HTML сообщениях email.