Что такое data:URI: руководство с примерами

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

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

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

Где:

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

НЕЙРОСЕТИ ДЛЯ ЖИЗНИ И КАРЬЕРЫ В 2025 году

Мы проанализировали рынок и готовы поделиться самой свежей информацией о том, как каждому эффективно взаимодействовать с нейросетями!

ТОП-подарки всем участникам лекции:

• ТОП-подарки всем участникам лекции:Открытая лекция РЕГИСТРАЦИЯ пошаговая PDF-инструкция “Как сделать нейрофотосессию из своего фото бесплатно
• подборка из 3800+ нейросетей
• доступ в бот с безлимитным доступом к ChatGPT

Участвовать бесплатно

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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