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.
Преимущества
- Улучшение производительности: внедрение напрямую в HTML-код страницы может уменьшить количество запросов к серверу, что ускоряет загрузку страницы.
- Сокрытие: Data:URI позволяет скрыть содержимое ресурса, делая его недоступным для прямого доступа через URL. Это может повысить безопасность вашего сайта и защитить от несанкционированного доступа.
- Меньший объем: использование сжатия в кодировке 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 – это инструмент для внедрения данных различных типов в страницы и документы. Эта техника улучшает производительность, обеспечить безопасность и сократить объем обращения.