Как вставить Base64 в HTML?

В атрибут src тега img: ` `. Инструмент сразу выдаёт готовый сниппет.

Служба поддержки

Отвечаем по вопросам инструментов и оплат

🔐

Image → Base64

Конвертируйте изображение в Base64 строку

Конвертер Image → Base64 — встраивайте картинки прямо в HTML и CSS

Инструмент конвертирует изображения (PNG, JPG, SVG, GIF, WebP) в Base64-строку формата data URI, которую можно вставить прямо в HTML-тег `<img src>` или в CSS `background-image`. Это полезно для встраивания маленьких иконок и логотипов в email-шаблоны, PDF-отчёты, Markdown-документы и standalone HTML-файлы.

Встроить картинку в html через Base64 удобно, когда нужен один файл без внешних зависимостей: email-письмо открывается без загрузки картинок, презентация работает без интернета, документация остаётся автономной. Также уменьшает количество HTTP-запросов для мелких иконок.

Поддерживается обратная конвертация Base64 → изображение: вставляете строку, получаете PNG/JPG. Обработка локальная, в браузере — картинка никуда не отправляется. Бесплатно, без ограничений.

✓Все популярные форматы — PNG, JPG, SVG, GIF, WebP — любое изображение в Base64.
✓Готовый data URI — Сразу с префиксом `data:image/png;base64,...` — копируйте и вставляйте в код.
✓HTML и CSS сниппеты — Сгенерированный код в формате `<img>` и `background-image` — готово к вставке.
✓Обратная конвертация — Base64 → изображение: расшифруйте строку обратно в файл.
✓Пакетная обработка — Конвертируйте сразу до 30 картинок в одну таблицу Base64-кодов.

📋

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

1
Загрузите изображение (или несколько).
2
Скопируйте Base64-строку или готовый HTML/CSS-сниппет.
3

Встройте на свой сайт

Бесплатный виджет с бэклинком на ваш сайт

⭐Рейтинг и отзывы

Загрузка…

📷

Загрузить изображение

Вставьте в свой код — картинка отобразится без внешнего файла.

✨

Возможности

🚀

Все популярные форматы

PNG, JPG, SVG, GIF, WebP — любое изображение в Base64.

🔒

Готовый data URI

Сразу с префиксом `data:image/png;base64,...` — копируйте и вставляйте в код.

⚡

HTML и CSS сниппеты

Сгенерированный код в формате `<img>` и `background-image` — готово к вставке.

🎯

Обратная конвертация

Base64 → изображение: расшифруйте строку обратно в файл.

💎

Пакетная обработка

Конвертируйте сразу до 30 картинок в одну таблицу Base64-кодов.

🎯

Когда пригодится

▸Встроить логотип в email-шаблон, чтобы он открывался без интернета
▸Вставить иконку в standalone HTML-файл для локальной документации
▸Добавить картинку в PDF-отчёт через Base64
▸Сократить количество HTTP-запросов для маленьких иконок
▸Вставить изображение в Markdown-файл без отдельного вложения
▸Использовать в CSS как background-image без внешнего URL
▸Передать картинку по API в JSON-поле

📦

Что поддерживается

Вход: PNG, JPG, SVG, GIF, WebP
Выход: data URI, HTML, CSS
До 5 МБ на файл
Обратная конвертация Base64 → image

💡

Полезные советы

💡

Для лучших результатов используйте современный браузер (Chrome, Firefox, Edge)

🎯

Все файлы обрабатываются локально в вашем браузере для максимальной безопасности

⚡

Сохраняйте результат сразу после обработки

🔑

Попробуйте разные настройки для оптимального результата

❓

Часто задаваемые вопросы

Base64 — для мелких иконок, email-писем, standalone HTML. Обычные URL — для больших картинок: Base64 увеличивает размер файла на 33% и не кешируется браузером.

Для веба оптимум — до 10 КБ (иконки). Для email — до 100 КБ. Для PDF и standalone HTML — до 1 МБ. Больше раздувает файл.

В атрибут src тега img: `<img src="data:image/png;base64,iVBORw0K...">`. Инструмент сразу выдаёт готовый сниппет.

Outlook и Apple Mail — да. Gmail частично: поддерживает Base64 в HTML-письмах, но с ограничением 8 КБ на картинку — укладывайтесь в этот размер.

Да, все операции в браузере — ни изображение, ни Base64 не отправляются на сервер.

🔎