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

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

Data URL — это строка, вмещающая целый файл целиком, с префиксом из его MIME-типа: data:image/png;base64,iVBORw0KGgo…. Когда изображение живёт внутри такой строки, оно ведёт себя как текст — его можно вставить в HTML, CSS, JSON, файл Markdown или исходник, и потребитель отрисует его, не загружая отдельный файл. Эта страница превращает файл изображения в data URL и обратно — в видимое изображение, целиком в вашем браузере.

Base64 увеличивает бинарные данные примерно на 33 % (каждые три байта становятся четырьмя ASCII-символами), поэтому data URL больше, чем заменяемый им файл. Эта цена оправдана, когда нужны ноль внешних запросов: подписи в HTML-письмах, single-file демо, favicon, встроенные прямо в <head>, иконки, упакованные в JSON-конфиг, либо ассеты в средах (некоторые страницы с жёстким CSP, изолированные превью), где загрузка <img src> с диска невозможна.

Инструмент разбирает data URL по RFC 2397, принимает как base64, так и URL-кодированные текстовые полезные нагрузки, определяет MIME и проверяет, что это действительно изображение, прежде чем показывать превью — поэтому вставка битой строки завершится отчётливой ошибкой, а не отрисовкой значка «разбитой картинки».

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

1. Перетащите изображение в пунктирную зону либо нажмите Загрузить и выберите файл. Поддерживаются PNG, JPEG, WebP, GIF, SVG, BMP, AVIF и ICO.
2. Текстовое поле Base64 data URL слева заполняется полной строкой data:image/…;base64,…. Нажмите Копировать справа, чтобы забрать её.
3. Для обратного преобразования вставьте data URL в это же поле. Превью справа перерисует изображение, а Скачать сохранит его обратно как настоящий файл с корректным расширением.
4. Очистить опустошает обе панели.

MIME считывается из заголовка data URL, а не угадывается по расширению файла — поэтому переименование .png в .jpg инструмент не обманет, а расширение скачиваемого файла всегда соответствует фактическому типу.

Ключевые возможности#

• Двустороннее преобразование. Изображение → data URL для встраивания; data URL → файл для извлечения. Одна и та же панель обрабатывает оба направления.
• Учитывает MIME. Предлагаемое расширение при скачивании выводится из фактического медиатипа (image/svg+xml → .svg, image/jpeg → .jpg), а не из имени файла.
• Проверяет перед превью. Некорректные строки помечаются как недопустимые, а не молча показывают «разбитое» изображение.
• Безопасно работает с произвольными байтами. Кодирование Base64 разбивается на блоки, поэтому многобайтовые и бинарные данные проходят туда-обратно без повреждений.
• Только локально. Работу выполняют API FileReader и atob/btoa внутри страницы; ничего не загружается на сервер.

Разбор примера#

У вас есть pixel.gif — прозрачный трекинговый пиксель 1×1 (какие почтовые клиенты используют как маячок открытия), 43 байта. Загрузите его. В поле data URL появится полная, точная строка:

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

Это настоящий, полный data URL — вставьте его в <img src="…"> в HTML, в CSS background-image: url('…') или в поле JSON, и потребитель отрисует исходный пиксель без единого файлового запроса. MIME (image/gif) и расширение скачивания .gif берутся из заголовка data URL, а не из исходного имени файла.

Для фотографии побольше принцип тот же — отличается лишь тело base64 (примерно в 1,33× больше байтового размера), а MIME становится image/jpeg или image/webp.

FAQ#

Почему мой data URL намного больше исходного файла?#

Base64 представляет каждые три байта как четыре символа, поэтому строка примерно в 1,33× больше бинарного размера. Для крупных изображений это расточительно — сначала имеет смысл прогнать инструмент сжатия, либо разместить файл и сослаться на него вместо встраивания.

Есть ли ограничение на размер?#

Браузер обрабатывает data URL размером до сотен мегабайт, но на практике всё, что превышает несколько сотен KiB, раздувает ваш HTML, CSS и JSON и замедляет парсеры. Встраивайте только небольшие иконки, логотипы и спрайты.

Можно ли конвертировать SVG?#

Да. У SVG MIME image/svg+xml, и он уже текст, поэтому data URL получается компактным и проходит туда-обратно без потерь.

Вставленный data URL помечен как «недопустимый». Что случилось?#

Строка должна начинаться с data: и содержать запятую, отделяющую заголовок от полезной нагрузки. Усечённая копия, лишний пробел в начале или отсутствующий флаг ;base64 — всё это ломает разбор. Скопируйте заново полную строку, включая заголовок.