Изображение в Base64

Новый

Преобразуйте любое изображение в строку Base64 Data URL

Инструменты разработчика

Как использовать Изображение в Base64

  1. 1Загрузите изображение
  2. 2Скопируйте сгенерированную строку Base64
  3. 3Вставьте в HTML img src, CSS background-image или JSON-пейлоад
  4. 4Paste it directly into your HTML or CSS

О Изображение в Base64

Image to Base64 converts your image file into a Base64 text string that can be embedded directly into HTML img tags, CSS backgrounds, or JSON payloads — no separate image file needed. The tool shows the full data URL, the pure Base64 portion, and an example HTML snippet.

Base64 encoding is the standard technique for embedding binary image data inside text-based formats. It is used everywhere: HTML email templates that cannot reference external files, CSS files that inline background icons, JSON API responses that carry image thumbnails, and SVG files that embed raster images. This tool automates the conversion instantly in your browser.

Three output views are provided: the full data URL (ready to paste into an src attribute), the raw Base64 string (for APIs that expect just the encoded data), and a complete HTML img tag example. One-click copy buttons make it easy to grab each piece without manual selection.

Ключевые возможности Изображение в Base64

  • Конвертирует PNG, JPG, WEBP, GIF и SVG в Base64
  • Выдаёт готовый к использованию data URI
  • Копирование полного закодированного вывода одним кликом
  • Показывает длину строки и приблизительный размер
  • Поддерживает загрузку изображений перетаскиванием
  • Мгновенное кодирование без загрузки на сервер
  • 100% на стороне клиента через FileReader API
  • Работает с изображениями любого размера

Поддерживаемые форматы

Входные форматы

PNGJPGWEBPGIFSVGBMPICO

Выходные форматы

Base64 data URL stringRaw Base64 stringHTML img snippet

The output data URL includes the correct MIME type prefix (data:image/png;base64, etc.) automatically.

Примеры

Встроенная иконка в HTML-письмо

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

Входные данные

Small 32x32 PNG icon

Результат

data:image/png;base64,iVBOR... (full data URL)

Фоновое изображение CSS

Используйте data URL в CSS background-image для избежания дополнительного HTTP-запроса.

Входные данные

Small decorative PNG texture

Результат

background-image: url("data:image/png;base64,...")

Image in JSON API response

Copy the raw Base64 string to use as the value of an "avatar" field in a JSON payload without the data URL prefix.

Входные данные

User avatar PNG

Результат

Raw Base64 string for JSON field value

Типичные сценарии использования

  • Встраивание небольших иконок прямо в HTML для экономии HTTP-запросов
  • Инлайн-изображения в CSS для фоновой графики
  • Хранение данных изображений в JSON-payload или конфигурационных файлах
  • Создание автономных HTML-шаблонов писем со встроенными изображениями
  • Кодирование подписей для встраивания в скрипты генерации PDF
  • Бандлинг небольших спрайтов прямо в JavaScript-источники

Устранение неполадок

Строка вывода очень длинная и замедляет редактор

Решение

Base64-кодирование увеличивает размер примерно на 33%. Для изображений более 100 КБ рассмотрите подачу их как обычных файлов.

Data URI не отображается в браузере

Решение

Убедитесь, что data URI содержит правильный префикс MIME-типа, например "data:image/png;base64," — инструмент генерирует это автоматически, проверьте случайное обрезание при копировании.

SVG-кодирование даёт битый вывод

Решение

Для SVG-файлов URL-кодирование иногда надёжнее Base64. Используйте исходный SVG или URL-кодируйте SVG-строку.

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

Зачем использовать Base64 для изображений?

Base64 позволяет встраивать изображения непосредственно в код без отдельных файловых запросов.

Увеличивает ли Base64 размер файла?

Да, примерно на 33%. Используйте только при необходимости встраивания.

What is the difference between the data URL and the raw Base64 string?

The data URL includes the MIME type prefix (e.g., data:image/png;base64,) followed by the Base64 data. The raw Base64 string is just the encoded data without that prefix. Use the full data URL in HTML src attributes and CSS url() values; use the raw string when an API expects Base64-only input.

Is there a file size limit?

There is no server-side limit since all encoding happens in your browser. Images up to 10 MB encode reliably on modern devices. Very large images may slow down or crash the browser tab.

Which image formats are supported?

Any format your browser can load: PNG, JPG, WEBP, GIF, SVG, BMP, and ICO are all supported. The MIME type is detected automatically from the file.

Can I use the Base64 output in CSS?

Yes. Use the full data URL as the value of a CSS background-image property: background-image: url("data:image/png;base64,..."). Useful for small decorative images and icons.

Можно ли использовать Base64-вывод в JSON API?

Да. Скопируйте чистую Base64-строку (без префикса data URL) для использования как значения поля изображения в JSON-нагрузке.

Что происходит с прозрачностью в Base64-выводе?

Прозрачность сохраняется в data URL, если источник — PNG. MIME-тип в префиксе (data:image/png;base64,) обеспечивает корректный рендеринг.