Изображение в Data URI

Data URI кодирует изображение прямо как текст (Base64), поэтому вы можете встроить его внутри HTML (в img src) или CSS (в фон) без отдельного файла и лишнего сетевого запроса. Этот инструмент преобразует ваше изображение в готовый к вставке data: URI.

Результат - простой текстовый файл с полной строкой data:image/...;base64,... . Это удобно для крошечных значков, шаблонов писем, демо в одном файле или чтобы избежать лишнего запроса, хотя текст Base64 примерно на треть больше исходных байтов.

Всё работает полностью локально в вашем браузере (без загрузки, даже офлайн) - ваше изображение никогда не покидает устройство. Изображение кодируется как есть (те же байты, тот же формат, без перекодирования); очень большое изображение даёт очень длинную строку, поэтому это лучше всего подходит для маленьких изображений.

Честный компромисс встраивания: data URI путешествует с каждой доставкой HTML- или CSS-файла и не кешируется браузером отдельно. Практическое правило: встраивание оправдано только для очень маленькой графики - иконок в несколько килобайт; крупные изображения лучше оставить отдельным файлом. Для быстрой проверки вставьте строку прямо в адресную строку браузера.

Технические данные

В 3 шага

1. Перетащите или коснитесь изображения (PNG, JPEG или WebP).
2. Оно кодируется в data: URI методом Base64 в вашем браузере.
3. Скачайте текстовый файл с data URI (готов к вставке).

Ограничения: Кодирует байты изображения как есть методом Base64 в строку data:<тип>;base64,... и сохраняет как текстовый файл. Base64 примерно на 33 % больше исходника, поэтому лучше всего для маленьких изображений. Исходный формат и байты сохраняются (без перекодирования).

Частые вопросы

Похожие инструменты

Коллаж из фото · Сжатие изображений · PNG в SVG · Оптимизация SVG