Конвертер изображений в Base64

Что такое Base64-изображение (Data URI)?

<!-- The same 1×1 transparent PNG, four ways -->

<!-- HTML -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" alt="pixel">

/* CSS */
.badge {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==");
}

<!-- Markdown -->
![pixel](data:image/png;base64,iVBORw0KGgo…)

// JSON
{ "mime": "image/png", "data": "iVBORw0KGgo…" }

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

Примеры

transparent-1x1.png  (PNG размером 68 байт)

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

icon.svg

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…" alt="icon">

photo.jpg  (12 КБ)

![photo](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ…)

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

1. 1

   Добавьте изображение

   Перетащите изображение в зону сброса, кликните для выбора или вставьте из буфера обмена через Ctrl+V / Cmd+V. PNG, JPG, GIF, WebP, SVG, ICO и BMP поддерживаются и кодируются полностью в браузере.

2. 2

   Выберите формат вывода

   Выберите Data URI, сырой Base64, HTML , CSS background, Markdown или JSON из вкладок. Проверьте панель метаданных на увеличение размера и значок-совет о том, стоит ли встраивание того.

3. 3

   Скопируйте или скачайте

   Нажмите «Скопировать», чтобы взять фрагмент, или «Скачать», чтобы сохранить его как файл. Для обратного процесса переключитесь на вкладку Base64 → Image, вставьте строку и скачайте восстановленное изображение.

Частые ошибки

data:base64,iVBORw0KGgo…
<!-- no MIME type — will not render -->

data:image/png;base64,iVBORw0KGgo…
<!-- correct: image/png -->

data:image/png;base64,iVBORw0KGgoAAAANS
UhEUgAAAAEAAAABCAYAAAA…
<!-- embedded newline breaks the attribute -->

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAA…
<!-- single unbroken line -->

…WjR9awAAAABJRU5ErkJggg
<!-- missing trailing == -->

…WjR9awAAAABJRU5ErkJggg==
<!-- complete with padding -->

/* 380 KB hero photo inlined into a global stylesheet */
.hero { background-image: url("data:image/jpeg;base64,/9j/…(½ MB of text)…"); }

/* Serve it as a cached file instead */
.hero { background-image: url("/img/hero.jpg"); }

Типичные сценарии

Встроить логотип или иконку в CSS

Перетащите маленькую PNG- или SVG-иконку, скопируйте фрагмент CSS background-image и вставьте его в таблицу стилей, чтобы убрать HTTP-запрос для редко меняющегося ресурса. Держите его до ~2 КБ (следите за зелёным значком), чтобы таблица стилей оставалась лёгкой.

Встроить изображения в HTML email

Почтовые клиенты часто блокируют удалённые изображения. Закодируйте логотип как data URI и вставьте элемент в шаблон, чтобы он отрисовался без обращения к серверу. Проверяйте в разных клиентах — встраивайте маленькие иконки, а не фотографии.

Самодостаточные Markdown и README

Когда нельзя разместить изображение — GitHub Issue, блокнот, офлайн-документ — вывод Markdown встраивает картинку прямо в файл, чтобы она путешествовала вместе с текстом. Идеально для маленьких схем и значков.

Изображения внутри JSON или API-payload

Нужно отправить миниатюру внутри JSON-документа или конфигурационного файла? Вывод JSON даёт объект { mime, data }, который можно вставить напрямую, а декодер восстанавливает изображение на другом конце.

Быстрая отладка data URI

Нашли загадочный data: URI в таблице стилей или ответе API? Вставьте его во вкладку Base64 → Image, чтобы увидеть, что это на самом деле, прочитать реальные размеры и скачать как обычный файл для детального изучения.

Однофайловые виджеты и букмарклеты

Букмарклеты и встраиваемые виджеты должны быть самодостаточными без внешних зависимостей. Встраивание их иконок как Base64 держит всё в одном файле, который работает, куда бы его ни поместили.

Технические детали

Как работает кодирование Base64

Base64 берёт двоичный поток изображения по три байта (24 бита) за раз и делит на четыре 6-битные группы, каждая из которых отображается в один символ 64-символьного алфавита. Когда длина входа не кратна трём, один или два символа padding = отмечают остаток. Это соотношение 3 к 4 — причина, по которой закодированный текст примерно на 33% больше исходника. Инструмент вычисляет декодированную длину в байтах прямо из длины строки и padding, поэтому сообщаемые им цифры размера точны, а не оценочны.

Определение MIME и магические байты

Когда вы кодируете файл, его тип MIME берётся из объекта File браузера. Когда вы декодируете сырую строку Base64 без префикса data:, инструмент изучает ведущие символы, соответствующие магическим байтам изображения: iVBORw0KGgo для PNG, /9j/ для JPEG, R0lGOD для GIF, UklGR для WebP и PHN2Zy или PD94bWw для SVG. Это позволяет декодеру восстановить корректный data URI и скачать с правильным расширением файла, даже когда ввод — лишь голый payload.

Обработка только локально

Кодирование использует readAsDataURL из FileReader API, который возвращает data URI, синтезированный полностью в браузере. Декодирование для скачивания использует atob плюс Uint8Array для восстановления двоичных данных, затем Blob и object URL — снова без участия сети. Результат — инструмент, который можно запускать офлайн и которому можно доверить конфиденциальные изображения, потому что байты никогда не покидают страницу. Поведение «ноль запросов» можно проверить в инструментах разработчика браузера.

Лучшие практики

Встраивайте только маленькие стабильные ресурсы

Золотая середина для Base64 — ресурсы до ~2 КБ, которые редко меняются и появляются на немногих страницах: иконки, крошечные логотипы, UI-спрайты. Выше ~10 КБ штраф по размеру и потеря кеширования перевешивают сэкономленный запрос, особенно теперь, когда HTTP/2 делает дополнительные запросы дешёвыми. Пусть значок-совет вас направляет, а фотографии и крупную графику отдавайте обычными кешируемыми файлами.

Предпочитайте URL-кодирование для SVG

SVG — это текст, поэтому Base64 раздувает его без выгоды. При встраивании SVG в CSS или HTML вместо этого URL-кодируйте разметку — обычно она компактнее, остаётся читаемой человеком и лучше сжимается gzip/brotli. Оставьте Base64 SVG для пайплайнов, которые его специально требуют. Наш URL-кодировщик/декодер выполняет percent-кодирование.

Всегда задавайте правильный тип MIME

Data URI отрисовывается, только если его тип MIME совпадает с содержимым: image/png, image/jpeg, image/gif, image/webp, image/svg+xml. Неверный или отсутствующий тип — причина номер один, по которой встроенное изображение не отображается. При копировании из этого инструмента тип задаётся за вас; если собираете URI вручную, перепроверьте префикс.

Сжимайте перед кодированием

Поскольку Base64 добавляет ~33% поверх размера файла, уменьшение исходника окупается вдвойне. Прогоните изображения через наш Сжиматель изображений — или экспортируйте в правильных размерах — перед кодированием, чтобы итоговый data URI был как можно меньше. Сжатый PNG в 4 КБ бьёт оригинал в 40 КБ и как файл, и встроенным.

Никогда не полагайтесь на Base64 ради приватности

Base64 тривиально обратим и не даёт защиты. Не используйте его, чтобы скрыть чувствительное содержимое изображения — любой может декодировать его мгновенно, в том числе вкладкой на этой странице. Если содержимое нужно защитить, используйте настоящий контроль доступа и шифрование на сервере и отдавайте изображение через аутентифицированный эндпоинт.

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

Что делает этот конвертер изображений в Base64?

Он читает изображение, которое вы перетащили, вставили или выбрали, и кодирует его байты в строку Base64 — полностью внутри браузера. Вы получаете сырой Base64, готовый data URI (data:image/png;base64,…) и фрагменты для вставки в HTML , CSS background-image, Markdown и JSON. Панель метаданных сообщает исходный размер файла, размер после кодирования, точный процент увеличения (Base64 примерно на 33% больше), пиксельные размеры и тип MIME. Ничего не загружается: кодирование выполняется локально через FileReader API, поэтому инструмент безопасен для скриншотов, внутренних ресурсов и неопубликованной графики. Для обратного преобразования используйте вкладку Base64 → Image или наш декодер Base64 в изображение.

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

Нет. Каждый шаг выполняется на стороне клиента в браузере через FileReader API и кодирование строк в JavaScript. Ваше изображение никогда не передаётся, не сохраняется и не логируется. Это можно проверить, открыв вкладку Network в браузере — кодирование изображения не вызывает ни одного сетевого запроса. Поэтому инструмент безопасен для чувствительных материалов: скриншотов продукта до запуска, внутренних схем, ресурсов клиентов и всего, что под NDA. Лимита размера файла, навязанного ограничением загрузки, нет — есть только практический предел того, насколько большую строку Base64 ваш браузер и целевая система могут комфортно обработать.

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

Base64 кодирует каждые 3 байта двоичных данных в 4 ASCII-символа, поэтому закодированная строка примерно на 33% больше исходного файла (плюс несколько байт padding и префикс data:). PNG в 9 КБ становится примерно 12 КБ текста. Эти накладные расходы — главная причина не кодировать большие изображения в Base64: вы передаёте больше байт и, поскольку строка встроена в ваш HTML или CSS, эти байты повторно скачиваются при каждом изменении файла-контейнера и не кешируются отдельно. Инструмент показывает точное увеличение для вашего конкретного файла в панели метаданных, чтобы решение опиралось на реальные цифры.

Когда стоит использовать Base64-изображение вместо обычного файла?

Base64 (как data URI) хорошо подходит для маленьких, редко меняющихся ресурсов, где избежать отдельного HTTP-запроса важнее кеширования: крошечные иконки и логотипы, встроенные в CSS, изображения в HTML email (многие клиенты блокируют внешние изображения, но отрисовывают data URI), однофайловые виджеты или букмарклеты, которые должны быть самодостаточными, SVG-спрайты и изображения, хранящиеся внутри JSON/API-payload. Практическое правило: меньше примерно 2 КБ и используется на одной-двух страницах — встраивание обычно выигрывает. Значок-совет в инструменте кодирует именно эту эвристику: зелёный до 2 КБ, жёлтый до 10 КБ, красный выше.

Когда НЕ стоит использовать Base64-изображения?

Избегайте Base64 для всего крупного или переиспользуемого на многих страницах. Четыре конкретные причины: (1) увеличение размера на ~33% означает больше байт по сети; (2) встроенное изображение нельзя кешировать само по себе — оно повторно скачивается при каждом изменении содержащего его HTML или CSS и повторяется на каждой странице, где встроено; (3) декодирование большого data URI расходует CPU и батарею, что заметно на мобильных; и (4) вы теряете адаптивные изображения (srcset/sizes) и отложенную загрузку. Поскольку HTTP/2 дёшево мультиплексирует множество мелких запросов, исходная причина встраивать — сократить число запросов — почти не актуальна. Для фотографий, hero-изображений или всего больше ~10 КБ обычный кешируемый файл почти всегда загружается быстрее. Если цель — файл поменьше, сначала прогоните его через наш Сжиматель изображений.

Как использовать вывод Base64 в HTML и CSS?

Для HTML переключитесь на вкладку HTML и вставьте сгенерированный элемент: . Для CSS используйте вкладку CSS, которая оборачивает data URI в background-image: url("data:image/png;base64,…"). Оба работают везде, где принимается URL — img src, CSS background, mask-image, даже теги link для favicon. Схема data: поддерживается всеми современными браузерами. Одна оговорка: очень длинные data URI во встроенном HTML вредят читаемости, а в CSS раздувают таблицу стилей, которая отправляется каждому посетителю, поэтому оставляйте встраивание для действительно маленьких ресурсов.

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

Поддерживаются PNG, JPEG/JPG, GIF (включая анимированные), WebP, SVG, ICO и BMP, а также AVIF там, где браузер умеет его декодировать. Поскольку инструмент кодирует сырые байты, а не перерисовывает изображение, анимированные GIF остаются анимированными, прозрачные PNG сохраняют альфа-канал, а SVG остаются полностью масштабируемыми. Тип MIME считывается из самого файла, а при вставке сырого Base64 в декодер выводится из магических байтов данных. Во время кодирования нет конвертации формата — вывод представляет ровно тот файл, который вы предоставили.

Почему SVG это особый случай?

SVG — это XML-текст, а не бинарные данные, поэтому Base64 на самом деле делает его больше и труднее для чтения без какой-либо пользы. Для встраивания SVG в CSS или HTML URL-кодирование разметки (percent-кодирование нескольких символов вроде #, <, > и кавычек) обычно компактнее Base64 и сохраняет исходник читаемым и удобным для gzip. Инструмент всё же предлагает вывод SVG в Base64, потому что некоторые пайплайны его требуют, но если вы вручную оптимизируете CSS, предпочтите URL-кодированный data URI. С этим подходом поможет наш URL-кодировщик/декодер.

Base64 — это то же самое, что шифрование?

Нет. Base64 — это кодирование, а не шифрование — оно полностью обратимо любым без ключа. Оно существует, чтобы представлять двоичные данные через безопасный набор печатных ASCII-символов, и данные переживают транспорт через системы, работающие только с текстом (HTML, JSON, заголовки email, URL). Любой может декодировать строку Base64 обратно в исходное изображение за секунды, в том числе вкладкой Base64 → Image здесь. Никогда не считайте Base64 способом скрыть или защитить чувствительное содержимое изображения; оно не даёт никакой конфиденциальности.

Можно ли встроить Base64-изображение в email?

Да, и это один из лучших вариантов применения техники. Многие почтовые клиенты по умолчанию блокируют внешне размещённые изображения ради приватности, что ломает макеты, зависящие от удалённых логотипов. Встраивание маленьких изображений как data URI гарантирует их немедленную отрисовку без обращения к серверу. Компромиссы: у некоторых старых клиентов (особенно отдельных версий Outlook) поддержка data URI неровная, а большие вставки раздувают размер сообщения, которое скачивает каждый получатель. Держите встроенные изображения маленькими — логотипы и иконки, а не фотографии — и проверяйте в целевых клиентах.

Почему моё Base64-изображение не отрисовывается?

Самые частые причины: отсутствующий или неверный тип MIME в префиксе data: (используйте image/png для PNG, image/jpeg для JPG, image/svg+xml для SVG), пробелы или переносы строк, случайно вставленные в строку, обрезанная копия, потерявшая завершающий padding (= или ==), или вставка только сырого Base64 без префикса data:…;base64, там, где ожидается URL. Декодер в этом инструменте терпим — он убирает пробелы, принимает ввод с префиксом или без него и выводит MIME из магических байтов изображения — поэтому вставка вашей строки во вкладку Base64 → Image это самый быстрый способ проверить, валидны ли сами данные.