Data URI изображения

Преобразуйте изображение в data:image строку для inline HTML, CSS, JSON и email.

Обработка выполняется локально в браузере. Данные не отправляются на сервер.

Data URI изображения — бесплатный онлайн-инструмент. Преобразуйте изображение в data:image строку для inline HTML, CSS, JSON и email. Обработка выполняется локально в браузере. Данные не отправляются на сервер.

Что делает

На выходе

Обработка

Продолжить работу

Выберите связанный инструмент для следующего шага.

ИСжатие изображения

Открыть

ИКонвертер формата изображения

Открыть

ИОбрезка изображения

Открыть

Данные для перехода между инструментами хранятся только в памяти текущей сессии браузера.

Как пользоваться

Загрузите изображение PNG, JPG, WebP, GIF или SVG.
После загрузки проверьте preview и информацию о файле.
Выберите формат вывода: Data URI, Base64, HTML img, CSS background-image, JSON или Markdown.
Нажмите «Создать Data URI».
Скопируйте результат или скачайте его в .txt.

Подробнее

Инструмент “Data URI изображения” кодирует изображение в строку data:image/...;base64,... прямо в браузере. Data URI удобно использовать для маленьких иконок, прототипов, email-шаблонов, тестовых JSON payload, inline CSS/HTML и документации. Можно получить полный Data URI, только Base64, HTML img, CSS background-image, JSON field или Markdown image. Файл читается локально в браузере и не отправляется на сервер UtiLab.

Работает в браузере
Файл не отправляется на сервер
Создаёт data:image Data URI
Можно получить только Base64
Есть форматы для HTML, CSS, JSON и Markdown
Можно скопировать результат одной кнопкой
Можно скачать результат в .txt
Не требует регистрации

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

Что такое Data URI изображения?

Data URI — это строка, которая содержит MIME type и данные изображения прямо внутри URL, например data:image/png;base64,...

Чем Data URI отличается от Base64?

Base64 — это только закодированные данные. Data URI дополнительно содержит префикс с MIME type, например data:image/png;base64, поэтому его можно вставлять в HTML или CSS.

Файл загружается на сервер?

Нет. Изображение читается и кодируется локально в браузере и не отправляется на сервер UtiLab.

Когда удобно использовать Data URI?

Data URI удобно использовать для маленьких иконок, прототипов, inline-примеров, email-шаблонов, тестовых payload и документации.

Почему Data URI может быть плох для больших изображений?

Base64 обычно увеличивает размер данных примерно на треть. Большие Data URI увеличивают HTML/CSS и могут замедлить загрузку страницы.

Можно ли вставить Data URI в HTML?

Да. Его можно использовать в src тега img: <img src="data:image/png;base64,...">.

Можно ли использовать Data URI в CSS?

Да. Например: background-image: url("data:image/png;base64,...").

Можно ли использовать Data URI в JSON?

Да. Data URI можно сохранить как строковое поле JSON, если API или приложение ожидает такой формат.

Можно ли загрузить несколько изображений?

В этом инструменте работа сделана с одним изображением за раз, чтобы результат было удобно просматривать и копировать. Для batch-кодирования лучше сделать отдельный инструмент.

Нужна ли регистрация?

Нет. Инструмент работает сразу и не требует регистрации.

Как пользоваться

Загрузите изображение PNG, JPG, WebP, GIF или SVG.

После загрузки проверьте preview и информацию о файле.

Выберите формат вывода: Data URI, Base64, HTML img, CSS background-image, JSON или Markdown.

Нажмите «Создать Data URI».

Скопируйте результат или скачайте его в .txt.

Подробнее

Работает в браузере
Файл не отправляется на сервер
Создаёт data:image Data URI
Можно получить только Base64
Есть форматы для HTML, CSS, JSON и Markdown
Можно скопировать результат одной кнопкой
Можно скачать результат в .txt
Не требует регистрации

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

Что такое Data URI изображения?

Data URI — это строка, которая содержит MIME type и данные изображения прямо внутри URL, например data:image/png;base64,...

Чем Data URI отличается от Base64?

Файл загружается на сервер?

Нет. Изображение читается и кодируется локально в браузере и не отправляется на сервер UtiLab.

Когда удобно использовать Data URI?

Почему Data URI может быть плох для больших изображений?

Можно ли вставить Data URI в HTML?

Да. Его можно использовать в src тега img: <img src="data:image/png;base64,...">.

Можно ли использовать Data URI в CSS?

Да. Например: background-image: url("data:image/png;base64,...").

Можно ли использовать Data URI в JSON?

Да. Data URI можно сохранить как строковое поле JSON, если API или приложение ожидает такой формат.

Можно ли загрузить несколько изображений?

Нужна ли регистрация?

Нет. Инструмент работает сразу и не требует регистрации.