Веб и кодирование
Изображения Base64 и Data URI: как это работает
Base64 превращает байты изображения в текст. Data URI добавляет тип медиа и маркер кодирования, чтобы итоговую строку можно было использовать там, где принимается URL.
Опубликовано
Чистый Base64 и Data URI — разные строки
Чистый Base64 содержит только закодированные байты. Data URI — это URL со схемой, типом медиа, необязательными параметрами, запятой и данными. Для двоичных байтов изображения в Base64 добавьте маркер ;base64.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...Синтаксис Data URI
Общая форма: data:[media-type][;base64],data. Используйте реальный MIME-тип изображения: смена подписи не преобразует байты PNG в JPEG или другой формат.
data:[<media-type>][;base64],<data>Вставка изображения Base64 в HTML
Используйте полный Data URI как значение src и обязательно добавляйте осмысленный alt-текст. Теперь HTML-документ сам отвечает за доставку байтов изображения.
<img src="data:image/png;base64,iVBORw0KGgo..." alt="Status icon">Data URI в CSS
Data URI можно использовать в любом CSS-свойстве, которое принимает URL. Не держите длинные сгенерированные строки в стилях, редактируемых вручную, если они усложняют review и diff.
.status-icon {
background-image: url("data:image/png;base64,iVBORw0KGgo...");
}Выберите правильный MIME-тип изображения
| Формат | MIME-тип | Префикс |
|---|---|---|
| PNG | image/png | data:image/png;base64, |
| JPEG | image/jpeg | data:image/jpeg;base64, |
| WebP | image/webp | data:image/webp;base64, |
| SVG | image/svg+xml | data:image/svg+xml;base64, |
Base64 увеличивает число закодированных байтов
Base64 представляет каждые три входных байта четырьмя символами, поэтому его часть примерно на треть больше ещё до префикса Data URI. HTTP-сжатие может изменить стоимость передачи, но не устраняет компромиссы парсинга, кэширования и поддержки.
Когда встраивать изображение
- Рассмотрите небольшие стабильные ресурсы, если устранение запроса заметно помогает странице.
- Для крупных, повторно используемых или независимо кэшируемых ресурсов предпочитайте обычные файлы изображений.
- Измеряйте итоговый сжатый документ, а не только исходные размеры.
- Работайте с SVG и другими потенциально активными медиа согласно политике безопасности контента.
- Не путайте кодирование Base64 с очисткой данных или шифрованием.
Проверьте пример
Создайте Data URI из безопасного изображения-примера
Встроенный PNG 1×1 показывает raw Base64, MIME-префикс и полный URL для браузера.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=Ожидаемый результат: Инструмент загружает локальный пример и показывает Data URI, raw Base64, HTML, CSS и диагностику размера.
Создайте реальные форматы
Преобразуйте изображение в Base64 и Data URI
Загрузите безопасный пример или своё изображение локально, затем сравните чистый Base64, Data URI, HTML и CSS.