Какова цель URI данных?

Почему ресурсы иногда внедряются в URI данных, а не используют обычный URI, который ссылается на ресурс, хранящийся как файл на сервере?

ОТВЕТЫ

Ответ 1

1. Сокращение запросов сервера

URI данных можно использовать для снижения нагрузки на сервер и повышения производительности клиента за счет уменьшения количества HTTP-запросов, необходимых для получения ресурсов. Например, этот HTML:

<img src="assets/bullet.png">

... можно заменить следующим:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAA
  ABFklEQVQY022RoW4CURBFD2ETymYFigRDEEgcFoNBIcAj0AQLH0AVfAEOQ0IgCP6C7L5ZWlpBG5
  o2paJJ01JR/6aCbrI03GTcmZk7c+GfAkj54PqQDsDhkgSuDNQ3njff5vO7bS4XCgx9KJ2B5gReG9
  D30UiPy6UeFwt96/X0Nps9+FCNw3UDakCfWy37WKvpU7Npv1cr+zEe600msw/AQyAlMJcTbKMmA3
  pfLOrPeq0PlYoaaGDAFdgJaLwMaAD6OZnoodvV0HEGCKQFwj/IxmED+jWb2Zd2WyWZ7CPgGBhegj
  eua187Hb0rFNRAOTqwJHAw51ZsZMXAVBIJJ/7nqsA+mhrbMBXIXQrGE2gYGAj0BcoSS/EXVfKm38
  k6jyMAAAAASUVORK5CYII="
>

... для создания изображения следующим образом: bullet icon с одним меньшим HTTP-запросом.

Примечание. представляется невозможным встраивание изображений URI данных в столбец; однако вышеприведенное изображение было загружено в службу размещения изображений с использованием отображаемого URI данных.

Если, например, ваш сайт использует много маленьких значков, указав их как URI данных в таблице стилей:

.icon-bullet-red { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAABFklEQVQY022RoW4CURBFD2ETymYFigRDEEgcFoNBIcAj0AQLH0AVfAEOQ0IgCP6C7L5ZWlpBG5o2paJJ01JR/6aCbrI03GTcmZk7c+GfAkj54PqQDsDhkgSuDNQ3njff5vO7bS4XCgx9KJ2B5gReG9D30UiPy6UeFwt96/X0Nps9+FCNw3UDakCfWy37WKvpU7Npv1cr+zEe600msw/AQyAlMJcTbKMmA3pfLOrPeq0PlYoaaGDAFdgJaLwMaAD6OZnoodvV0HEGCKQFwj/IxmED+jWb2Zd2WyWZ7CPgGBhegjeua187Hb0rFNRAOTqwJHAw51ZsZMXAVBIJJ/7nqsA+mhrbMBXIXQrGE2gYGAj0BcoSS/EXVfKm38k6jyMAAAAASUVORK5CYII=) }
.icon-bullet-green { background-image: /* ... */ }
.icon-save { background-image: /* ... */ }
.icon-load { background-image: /* ... */ }
.icon-delete { background-image: /* ... */ }
/* ... etc. */

... может устранить большое количество HTTP-запросов за счет общего размера загрузки, удобочитаемости и повышенной вероятности того, что плохое редактирование может сделать URI бессмысленным (и трудно исправить).

Альтернативным методом для получения того же результата для изображений является использование CSS спрайтов.

2. Вставка содержимого в один файл

URI данных может использоваться для хранения всех ресурсов, необходимых для правильного отображения страницы в одном документе. Это может быть полезным, например, файл README, распространяемый вместе с частью программного обеспечения. Теоретически, URI данных можно было бы также использовать в качестве альтернативы использованию вложений для встраивания ресурсов в электронную почту HTML, но на практике поддержка клиентов для URI данных слишком ненадежна для это будет полезной техникой.

3. Предотвращение предупреждений браузера

В некоторых браузерах отображается предупреждение, если страница содержит контент, обслуживаемый смесью HTTP и HTTPS. Если ваш сервер настроен так, что статический контент, такой как изображения, обычно обслуживается через HTTP, но динамический контент передается через HTTPS, внедрение этого статического контента с URI данных является возможным обходным решением.

Ответ 2

В дополнение к предыдущему ответу (это очень хорошее резюме), одна вещь, которую я использовал в последнее время, это шрифты. Если мне нужно использовать только небольшое подмножество символов из шрифта (например, шрифт design-y для логотипа или специальный значок пули dingbat), я могу кодировать только символы, которые мне нужны, в объявление CSS @font-face и не заставлять пользователя загружать весь файл шрифта.

Например, если мне нужны только черты dev (d) и angel (e) из Eggfaces (http://www.dingbatdepot.com/details/EggfacesTFB), тогда я может использовать инструмент генератора веб-шрифтов FontSquirrel (http://www.fontsquirrel.com/tools/webfont-generator), чтобы создать что-то вроде этого:

@font-face {
    font-family: 'eggfaces';
    src: url(data:application/x-font-woff;charset=utf-8;base64,ENCODED_FONT_HERE) format('woff');
    font-weight: normal;
    font-style: normal;
}

См. эту скрипту для примера: http://jsfiddle.net/vuuVh/