🍋
Menu
Web

Data URI

Data URI (схема встраивания данных)

Схема URL, которая встраивает содержимое файла непосредственно в HTML, CSS или JavaScript в формате data:[тип_медиа][;base64],данные, устраняя необходимость в отдельном HTTP-запросе для получения ресурса.

Техническая деталь

Data URI имеют синтаксис: data:[][;charset=<кодировка>][;base64],<данные>. Обычно используются для небольших изображений (иконки, SVG), CSS-фонов и файлов шрифтов для сокращения HTTP-запросов. Однако Data URI не могут кэшироваться браузером отдельно, увеличивают размер HTML/CSS файла примерно на 33% (накладные расходы Base64) и подвержены ограничениям размера в некоторых браузерах (2 МБ в старых IE, без ограничений в современных браузерах). Для SVG вариант с URL-кодированием (data:image/svg+xml,...) полностью избегает накладных расходов Base64.

Пример

```javascript
// Encode string to Base64
const encoded = btoa('Hello, World!');  // 'SGVsbG8sIFdvcmxkIQ=='

// Decode Base64 to string
const decoded = atob('SGVsbG8sIFdvcmxkIQ==');  // 'Hello, World!'

// File to Base64 Data URI
const reader = new FileReader();
reader.onload = () => console.log(reader.result);
// → 'data:image/png;base64,iVBORw0KGgo...'
reader.readAsDataURL(file);
```

Связанные форматы

Связанные инструменты

Связанные термины