Data URI встраивает содержимое файла прямо в текст HTML или CSS в виде data:[тип];base64,[данные] — без отдельного запроса к серверу. На рунет-сайтах это особенно заметно в технике «блюр-заглушки»: пока настоящая фотография в карточке товара ещё грузится, вместо неё показывают крошечную размытую версию, встроенную как Data URI прямо в HTML-страницу.
Почему это не работает в письмах Mail.ru и Яндекс.Почты
Многие email-клиенты — включая веб-версии Mail.ru и Яндекс.Почты — блокируют внешние изображения по умолчанию из соображений приватности и защиты от спам-трекеров, но точно так же настороженно относятся к встроенным Data URI, считая крупные inline-изображения потенциальным признаком фишинга. Поэтому в email-рассылках Data URI работает куда менее предсказуемо, чем на веб-странице.
Плюсы
- Меньше HTTP-запросов — полезно для мелких иконок или фоновых изображений.
- Файл «привязан» к документу и не может «потеряться» при перемещении файлов.
- Удобно для превью-заглушек, которые должны появиться мгновенно, ещё до загрузки основного изображения.
Ограничения
- Base64 увеличивает размер данных примерно на треть по сравнению с бинарным файлом.
- Большой Data URI раздувает сам HTML/CSS-файл и не кешируется браузером отдельно от страницы.
- Для больших или часто повторяющихся изображений отдельный файл с кешированием почти всегда эффективнее.
SVG как текст, а не Base64
В отличие от растровых форматов, SVG — это текст (XML), поэтому его не обязательно кодировать в Base64: достаточно корректно экранировать спецсимволы через percent-encoding (data:image/svg+xml,%3Csvg...). Это особенно удобно для мелких векторных иконок в интерфейсе, которые и так часто редактируют прямо в CSS-файле проекта.