Что такое 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.

ОБЗОРНЫЙ ПРАКТИКУМ ПО НАШУМЕВШИМ НЕЙРОСЕТЯМ

DEEPSEEK И QWEN За 2 часа сделаем полный обзор новых мощных AI-моделей, которые бросают вызов ChatGPT

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

• Возможность получить Доступ в Нейроклуб на целый месяц
• Как AI ускоряет работу и приносит деньги
• За 2 часа вы получите четкий план, как начать работать с AI прямо сейчас!

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

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

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 – это инструмент для внедрения данных различных типов в страницы и документы. Эта техника улучшает производительность, обеспечить безопасность и сократить объем обращения.