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

Перетащите изображение сюда или нажмите для выбора

Поддержка PNG, JPG, GIF, WebP

Бесплатный онлайн-инструмент для кодирования изображений в Base64 с поддержкой PNG/JPG/WebP/GIF/SVG/BMP/AVIF и других форматов. Локальная обработка в браузере через Web Worker, без загрузки и без блокировки UI. Генерируйте Data URL для CSS, HTML, email-шаблонов и передачи через API.

Похожие

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

Base64 в текст

Преобразователь Base64 DataURL

JSON Compress

Форматирование JavaScript

Парсер URL

Что такое изображение в Base64?

Изображение в Base64 — это техника кодирования бинарных данных изображения в ASCII-текстовую строку. Base64 использует 64 печатных символа (A-Z, a-z, 0-9, +, /) для представления бинарных данных, преобразует каждые 3 байта в 4 символа Base64 и добавляет = как padding в конце. Процесс соответствует стандарту RFC 4648.

**Принцип кодирования**: Base64 делит каждые 3 байта (24 бита) на четыре группы по 6 бит, каждая из которых сопоставляется символу алфавита Base64. Если число байтов не делится на 3, в конце добавляются 1-2 символа = padding. Поэтому размер файла увеличивается примерно на 33% (4/3 ≈ 1.33).

**Оптимизация Web Worker**: инструмент использует Web Workers, чтобы выполнять кодирование в потоке браузера, отделенном от основного потока. ArrayBuffer.transfer() позволяет передавать данные в Worker без копирования и избегать блокировки. Даже при обработке изображений в несколько MB UI остается плавным, а прогресс отображается в реальном времени.

**Конфиденциальность и безопасность**: в отличие от инструментов, требующих загрузки изображений на сервер, этот инструмент полностью работает в браузере. Данные изображения не проходят через сторонние серверы, что особенно важно для чувствительных изображений, например документов или договоров.

**Сценарии использования**: Base64-изображения часто применяются в CSS Sprites (уменьшение HTTP-запросов), HTML email-шаблонах (избежание блокировки изображений почтовыми клиентами), передаче бинарных данных через API, а также в расширениях браузера или single-file приложениях, где нельзя ссылаться на внешние ресурсы.

Варианты использования

  • CSS Sprites: встраивайте маленькие иконки и изображения в CSS background, чтобы уменьшить HTTP-запросы и ускорить первый рендер
  • HTML-встраивание изображений: помещайте логотипы, placeholder и UI-ресурсы прямо в HTML img-теги, уменьшая количество запросов изображений
  • Email-шаблоны: почтовые клиенты часто блокируют внешние изображения по умолчанию; Base64 inline помогает показывать их сразу без разрешения пользователя
  • Передача через API: преобразуйте бинарные данные изображения в строки Base64 и помещайте их в JSON request body для API-вызовов
  • Оптимизация производительности frontend: уменьшайте HTTP-запросы за счет встраивания критичных above-the-fold ресурсов
  • Расширения браузера и single-file приложения: встраивайте все изображения через Base64, когда нельзя ссылаться на внешние ресурсы

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

  1. Выберите или перетащите файл изображения для кодирования (PNG/JPG/WebP/GIF и т. д.)
  2. Инструмент автоматически преобразует изображение в Base64 внутри браузерного Web Worker и показывает прогресс в реальном времени
  3. Посмотрите результат: чистая строка Base64, полный Data URL или HTML img-тег, затем скопируйте нужный формат
  4. Вставьте результат в CSS, HTML, JSON-конфигурацию или API-запрос

Функции

  • Полная поддержка форматов: автоматическое определение MIME для PNG, JPG, WebP, GIF, SVG, BMP, AVIF, HEIC/HEIF и других распространенных форматов изображений
  • Ускорение Web Worker: кодирование больших файлов выполняется в отдельном потоке с индикатором прогресса в реальном времени, без блокировки основного UI
  • Локальная обработка без загрузки: изображения передаются в Worker через ArrayBuffer zero-copy, данные не проходят через сервер
  • Автоматическая генерация Data URL: создается префикс data:image/xxx;base64, готовый для HTML img или CSS background
  • Двусторонняя конвертация: поддерживаются режимы изображение в Base64 и Base64 в изображение без взаимного влияния
  • Копирование и скачивание в один клик: копируйте чистый Base64, полный Data URL, HTML img-тег или скачивайте результат как .txt файл

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

Какие форматы изображений поддерживаются?

Поддерживаются PNG, JPG, WebP, GIF, SVG, BMP, AVIF, HEIC/HEIF и другие распространенные форматы. Инструмент автоматически определяет MIME-тип и генерирует соответствующий Data URL-префикс, например data:image/png;base64,...

Как работает ускорение Web Worker?

Web Worker — это поток браузера, независимый от основного UI-потока. Обычное кодирование изображений может блокировать страницу; этот инструмент выполняет кодирование в Worker с передачей ArrayBuffer и callbacks прогресса, поэтому интерфейс остается отзывчивым даже при больших файлах.

Изображения загружаются на сервер?

Нет. Конвертация выполняется прямо в Worker-потоке браузера с технологией ArrayBuffer zero-copy. Содержимое изображения не проходит через сервер. Это принципиально отличается от инструментов, которые заявляют «обработку в браузере», но фактически загружают данные.

Насколько увеличивается файл после Base64-кодирования?

Base64-кодирование дает примерно 133% от исходного бинарного размера, то есть около 33% больше. Каждые 3 байта (24 бита) превращаются в 4 символа Base64 (по 6 бит), при необходимости в конце добавляется padding =. Для inline-изображений рекомендуется размер до 10KB.

Какие изображения подходят для Base64 inline?

Рекомендуется для небольших иконок и изображений до 10KB. Маленькие inline-изображения уменьшают HTTP-запросы, но крупные увеличивают размер HTML/CSS и могут ухудшить загрузку. Для больших изображений лучше использовать отдельные URL.

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

Data URL имеет формат data:image/png;base64, затем идет Base64-содержимое, и его можно вставить прямо в атрибут src HTML img. Чистый Base64 — это только закодированная строка, для использования ей нужен MIME-префикс.

Можно ли использовать инструмент для тестирования API-интеграций?

Да. После конвертации изображения в Base64 его можно отправить как значение поля в JSON request body на backend API. Инструмент поддерживает копирование в один клик и совместим с большинством примеров API-документации.

Почему выбирать Base64 inline вместо обычных ссылок на изображения?

Base64 inline подходит для маленьких файлов (<10KB), потому что уменьшает HTTP-запросы. Для больших изображений отдельные URL загружаются быстрее, так как браузер может скачивать ресурсы параллельно и использовать кеш.