Конвертер изображений в Base64 — генератор data URI
Перетащите изображение сюда или нажмите, чтобы выбрать
PNG · JPG · GIF · SVG · WebP · кодируется локально
Вывод
Оригинал
0 B
Data URI
0 B
Прирост
+0%
Перетащите изображение и получите его data URI в Base64, готовый для вставки в HTML, CSS или шаблон письма. Конвертер также выдаёт готовый тег <img>, CSS-правило background и Markdown. Всё работает в браузере через FileReader API, поэтому изображение не загружается на сервер.
Как это работает
- 1 Добавьте изображение Перетащите изображение в зону загрузки или нажмите, чтобы выбрать файл. Подходят PNG, JPG, GIF, SVG, WebP и AVIF.
- 2 Выберите формат вывода Переключайтесь между чистым data URI, тегом img, CSS-правилом background-image и Markdown в зависимости от того, куда вставляете.
- 3 Скопируйте результат Нажмите «Копировать», чтобы взять закодированную строку. Панель размера показывает, насколько версия Base64 больше исходного файла.
Ваши данные защищены
Всё обрабатывается прямо в вашем браузере. Никакие файлы или текст не отправляются на наши серверы. Отключите интернет — инструмент продолжит работать.
Часто задаваемые вопросы
- Что такое изображение в Base64 и когда оно нужно?
- Это картинка, закодированная как текст и встроенная прямо в HTML или CSS в виде data URI, а не подключённая отдельным файлом. Удобно для мелких иконок, шаблонов писем и вставки ассетов, чтобы сэкономить один HTTP-запрос.
- Изображение куда-то загружается?
- Нет. Файл читается локально через FileReader API браузера и кодируется на вашем устройстве. Ничего не отправляется на сервер, поэтому инструмент безопасен для приватных логотипов, скриншотов и неопубликованных ассетов.
- Почему строка Base64 больше файла?
- Кодирование Base64 использует 4 символа на каждые 3 байта, поэтому закодированный текст примерно на 33% больше исходных данных. Панель размера показывает точный прирост для вашего изображения.
- Стоит ли встраивать большие изображения в Base64?
- Обычно нет. Большие data URI раздувают HTML или CSS, не кешируются отдельно и замедляют первую отрисовку. Base64 оправдан для маленьких картинок — иконок, логотипов и графики в письмах размером в пару килобайт.
- Как использовать data URI в CSS?
- Выберите вывод CSS и вставьте его в правило, например: background-image: url("data:image/png;base64,…");. Инструмент форматирует строку, чтобы её можно было вставить сразу.
- Работают ли изображения Base64 в письмах?
- В CSS-фонах поддержка неровная — Outlook их блокирует. Встроенные data URI в теге <img> работают в большинстве современных веб-клиентов вроде Apple Mail и многих мобильных приложений, но всегда тестируйте в клиентах вашей аудитории.