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

Выберите «Image → Base64» и укажите файл изображения или выберите «Base64 → Image», чтобы выполнить обратное преобразование.
Выберите нужный формат результата: data URL, обычный Base64, тег img для HTML, правило background-image для CSS или Markdown.
Скопируйте результат и вставьте его в код, шаблон письма или JSON.
Для декодирования вставьте data URL или обычный Base64: изображение появится в предпросмотре, и его можно будет скачать.

Как это работает

Base64 представляет двоичные данные с помощью 64 печатных символов, поэтому изображение можно записать прямо в текстовом формате. Data URL указывает тип данных в начале, например data:image/png;base64,, после которого идут закодированные байты. Браузеры принимают data URL везде, где допустим URL изображения: в атрибуте src тега img, в CSS url() или в ссылке на изображение в SVG.

Закодированный текст всегда примерно на треть больше исходного файла (4 символа на каждые 3 байта). Встраивание небольших значков и изображений-заполнителей позволяет избежать отдельного сетевого запроса, но встроенные данные нельзя кэшировать отдельно: они загружаются заново с каждой страницей или таблицей стилей, в которую включены. Поэтому такой способ редко оправдан для файлов размером больше нескольких килобайт. Многие почтовые клиенты блокируют или удаляют изображения в формате data URL, поэтому перед использованием в рассылках проверьте результат.

Файл кодируется побайтно: данные не сжимаются повторно, а метаданные внутри файла (например, EXIF) сохраняются. Для декодирования инструмент принимает полный data URL, обычный Base64, Base64 для URL и текст, скопированный вместе с обёрткой CSS url(…). Тип изображения определяется по декодированным байтам, а не по указанной метке.

Примеры

Небольшой значок в таблице стилей

Значок PNG размером 600 байт превращается в строку Base64 длиной 800 символов. Вариант CSS создаёт правило background-image, которое можно вставить в класс, не размещая файл отдельно.

Изображение из ответа API

API возвращает поле JSON, например "iVBORw0KGgoAAAANSUhEUg…". Вставьте его в режим «Base64 → Image», чтобы просмотреть изображение, проверить его размер и скачать как PNG.

Логотип SVG в HTML

При кодировании SVG получается URL data:image/svg+xml;base64, который работает в теге img. Для SVG исходная разметка без сжатия часто короче Base64, поэтому можно встроить SVG напрямую.

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

Почему изображение в Base64 больше исходного?

Для хранения 3 байтов Base64 использует 4 текстовых символа, увеличивая размер примерно на 33% и добавляя немного текста для префикса data URL. Сжатие Gzip или Brotli на веб-сервере уменьшает разницу, но не устраняет её.

Меняет ли кодирование изображение или сжимает его?

Нет. Кодируются точные байты файла, включая метаданные. Чтобы уменьшить длину строки, сначала сожмите изображение или измените его размер.

Чем data URL отличается от обычного Base64?

Обычный Base64 — это только закодированные байты. Data URL добавляет префикс, например data:image/jpeg;base64,, который указывает браузеру тип файла, поэтому его можно использовать непосредственно как источник изображения.

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

Здесь можно кодировать файлы размером до 10 MB. Очень длинные строки могут замедлить работу текстовых полей и редакторов, а такие большие data URL неудобно использовать на сайтах.

Конфиденциальность

Кодирование и декодирование выполняются в браузере. Изображение и текст Base64 не загружаются на сервер, не сохраняются и не передаются в аналитику.