Схема data: дозволяє вбудувати вміст файлу — найчастіше зображення — прямо в текст HTML, CSS чи JS, без окремого HTTP-запиту до сервера. Замість посилання на файл (src="image.png") браузер отримує самі дані у форматі data:[тип];base64,[дані].
Структура Data URI
Типовий Data URI має три частини: MIME-тип вмісту (наприклад, image/png), позначку кодування (base64) та власне закодовані Base64 дані. Браузер розбирає цей рядок і відображає вміст так, ніби він завантажений як окремий файл.
Переваги
- Менше HTTP-запитів — корисно для дрібних іконок чи фонових зображень.
- Файл «прив’язаний» до документа й не може «загубитися» при переміщенні файлів.
- Зручно для email-шаблонів чи офлайн-документів, де зовнішні ресурси недоступні.
Обмеження
- Base64 збільшує розмір даних приблизно на третину порівняно з бінарним файлом.
- Великий Data URI роздуває сам HTML/CSS-файл і блокує кешування зображення окремо від сторінки.
- Для великих чи часто повторюваних зображень окремий файл із кешуванням майже завжди ефективніший.
Коли це виправдано
Data URI найкраще підходить для маленьких, унікальних для конкретної сторінки зображень — іконок, спінерів, невеликих SVG — а не для фотографій чи ресурсів, що використовуються на багатьох сторінках.
SVG як текст, а не Base64
На відміну від растрових форматів, SVG — це текст (XML), тому його не обов'язково кодувати в Base64: достатньо коректно екранувати спецсимволи через percent-encoding (data:image/svg+xml,%3Csvg...). Такий варіант зберігає дещо менший розмір і лишається редагованим у текстовому вигляді просто в CSS-файлі, на відміну від «непрозорого» Base64-блоку.