Data:URI (Uniform Resource Identifier) — это схема идентификатора ресурса, можно внедрять данные напрямую в ваши страницы или документы, вместо того чтобы ссылаться на внешние файлы через URL. Эта техника имеет множество практических применений, позволяя улучшить производительность и безопасность вашего сайта. В этой статье мы рассмотрим, что такое data:URI, как она работает, и какие есть способы использования этой схемы.

Что такое Data:URI?

Data:URI – это спецификация, определенная в стандарте RFC 2397, которая позволяет встраивать изображения, файлы CSS, JavaScript, HTML и другие ресурсы, непосредственно в страницы или документы. Это делается путем кодирования в строку base64 и добавления префикса «data:» к URI. Data:URI выглядит следующим образом:

«`

data:[<mediatype>][;base64],<data>

«`

Где:

  • `<mediatype>` – это тип данных, который вы внедряете, например, «image/jpeg» для изображений JPEG.
  • «;base64» – указывает на кодировку в формате base64.
  • `<data>` – собственно записи в кодировке base64.

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

  1. Улучшение производительности: внедрение напрямую в HTML-код страницы может уменьшить количество запросов к серверу, что ускоряет загрузку страницы.
  2. Сокрытие: Data:URI позволяет скрыть содержимое ресурса, делая его недоступным для прямого доступа через URL. Это может повысить безопасность вашего сайта и защитить от несанкционированного доступа.
  3. Меньший объем: использование сжатия в кодировке base64 позволяет уменьшить размер передаваемых данных, что особенно важно для мобильных устройств с ограниченной пропускной способностью.

Примеры использования

Существует несколько способов использования Data:URI для внедрения в ваши страницы:

  • Внедрение изображений:

Можно Data:URI для интеграции изображений в HTML. Например, чтобы встроить изображение «example.jpg», вы можете использовать следующий код:

«`html

<img src=»data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QBtRXhpZgAATU0AKgAAAAgAA8EPAAIAAAAGAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAEKAD/2wBDAAoHBwkHBgoJCAkLCwoMDxkQDw4ODx4WFxIZJCAmJSMgIyIoLTkwKCo2KyIjMkQyNjs9QEBAJjBGS0U+Sjk/QD3/2wBDAQsLCw8NDx0QEB09KSMpPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT3/wAARCAABAAEDAREAAhEBAxEB/8QAFAABAAAAAAAAAAAAAAAAAAAAA//EABUBAQEAAAAAAAAAAAAAAAAAAAEA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A93oyTkHXf/9k=» alt=»Пример изображения»>

«`

В этом примере `data:image/jpeg;base64,` указывает на тип (изображение JPEG) и кодировку base64. Далее идет строка с информацией.

  • Внедрение стилей CSS:

Data:URI можно использовать для внедрения стилей CSS напрямую в HTML-код. Например, чтобы встроить CSS-стили, вы можете использовать следующий код:

«`html

<style>

body {

background-image: url(‘data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE0MCAxNDAiIHdpZHRoPSIxNDAiIGhlaWdodD0iMTQwIj4KICA8cGF0aCBkPSJNMTUwLjcsMzUuNUw1OC4zLDE0MC41YzEyLjcsMCwzNS41LTIuOCwzNS41LTU4LjNjMCwxMi43LTIuOCwzNS41LTU4LjMsMzUuNSIKICAgICAgICAgICBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+Cg==’);

}

</style>

«`

В этом примере мы используем `data:image/svg+xml;base64,` для указания типа данных (SVG-изображение) и кодировки base64.

  • Внедрение JavaScript:

Data:URI также можно использовать для интеграции JavaScript-кода в HTML. Например:

«`html

<script>

alert(‘Привет, мир!’);

</script>

«`

Не надо указывать тип данных, так как JavaScript уже является текстовым содержимым.

Заключение

Data:URI – это инструмент для внедрения данных различных типов в страницы и документы. Эта техника улучшает производительность, обеспечить безопасность и сократить объем обращения.