Как работает конвертация изображения в Base64
Вся конвертация выполняется в браузере с помощью File API и встроенной функции btoa — не скачивается ни одна библиотека кодеков, и ни один сервер не видит изображение. Вот весь процесс от начала до конца:
- Вы перетаскиваете или выбираете изображение. Браузер читает его как Blob с локального диска, ни разу не копируя байты на сервер.
- Файл читается кусками по 1 МБ, байты каждого куска добавляются в бинарную строку. Такой подход не позволяет большим изображениям переполнить стек вызовов JavaScript.
- Бинарная строка передаётся в btoa, которая отображает каждые три байта на четыре символа Base64 из алфавита A–Z, a–z, 0–9, плюс /.
- MIME-тип файла (image/png, image/jpeg и т.д.) читается из объекта File и добавляется в начало как префикс data:, формируя полный URI вида data:image/…;base64,….
- Страница собирает четыре результата из этого URI — полный Data URI, сырой Base64 без префикса, готовый к вставке тег
и фрагмент CSS background-image — каждый с отдельной кнопкой копирования.
Зачем кодировать изображение как Data URI?
- Встраивание небольшого логотипа или иконки как Data URI убирает отдельный сетевой запрос, поэтому страница или письмо отображают первый кадр немного быстрее.
- Страница или стилевой файл со встроенными изображениями самодостаточны. Они работают офлайн, и их можно переносить без дополнительной папки с ресурсами.
- Многие почтовые клиенты по умолчанию блокируют внешние изображения. Встройте логотип как Base64 — и он появится сразу при открытии письма, без удалённой загрузки.
- Кодирование происходит полностью в браузере, поэтому чувствительные изображения никогда не попадают на сторонний сервер. Это касается скриншотов, сканов документов и внутренних схем.
Типичные сценарии использования Base64-изображений
Data URI применяется везде, где изображение достаточно мало, чтобы отдельный запрос обходился дороже, чем ~33% раздутие размера от Base64. Три паттерна встречаются постоянно:
- Встроенные CSS-иконки: спрайт или иконка 1–2 КБ, добавленная в таблицу стилей как background-image: url(data:…), чтобы правило было полностью самодостаточным.
- Подписи и рассылки: логотип, встроенный как
с data URI src, отображается даже когда клиент блокирует внешние изображения.
- Инлайн в сборщиках: бандлеры Webpack и Vite автоматически встраивают ресурсы ниже порогового размера, а этот инструмент позволяет посмотреть, как именно выглядит результат.
Как выглядит Base64-изображение?
Возьмём крошечный прозрачный PNG размером 1×1 пиксель. Его необработанные байты занимают всего 67 байт, но в кодированном виде это строка iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII=, а полный Data URI выглядит как data:image/png;base64,iVBORw0KGgo…. Обратите внимание: закодированная форма примерно на треть больше оригинала. Это и есть компромисс за возможность встраивать бинарные данные прямо в текст.
Загружается ли моё изображение куда-либо?
Нет. Конвертация использует File API браузера и нативную функцию btoa для кодирования изображения полностью на вашем устройстве. Убедитесь сами: откройте инструменты разработчика, перейдите на вкладку «Сеть» и конвертируйте изображение — вы увидите только запросы загрузки страницы и возможно рекламы. Ничего похожего на изображение не отправляется на сервер, что делает инструмент безопасным для скриншотов, документов и внутренних схем.
Почему Base64-результат больше исходного изображения?
Base64 представляет каждые три байта бинарных данных четырьмя ASCII-символами, поэтому закодированный текст примерно на 33% больше исходного файла. Индикатор размера Data URI на этой странице показывает точный увеличенный размер. Именно поэтому Data URI имеют смысл только для небольших изображений — встраивание фото 2 МБ раздует ваш HTML или CSS значительно сильнее, чем обошёлся бы отдельный запрос. Практическое правило: встраивайте изображения до ~4 КБ, а для всего большего используйте ссылку.
Какие форматы изображений можно конвертировать?
Работает любой формат, распознаваемый браузером как изображение, поскольку инструмент читает сырые байты, а не декодирует картинку. Это PNG, JPEG, GIF, WebP, SVG и BMP. MIME-тип читается напрямую из файла, поэтому префикс data: всегда соответствует реальному формату — JPEG даёт data:image/jpeg, а SVG — data:image/svg+xml. SVG заслуживает отдельного упоминания: он уже является текстом, поэтому для SVG URL-encoded Data URI часто меньше версии Base64, хотя данный инструмент выдаёт форму Base64 для единообразия.
Загрузите изображение, скопируйте Data URI или нужный фрагмент и вставьте в HTML, CSS или шаблон письма. Каждый байт остаётся на вашем устройстве. Без загрузки на сервер, без регистрации, без серверных запросов.