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

Кодируйте любое изображение в data URI Base64 или вставьте data URI, чтобы декодировать его обратно в изображение. Копируйте результат или возьмите CSS-фрагмент url(). Ничего не покидает ваше устройство.

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

Конвертация изображения в Base64 считывает файл изображения и кодирует его как URI данных Base64, который можно встроить непосредственно в HTML, CSS или JSON без дополнительного сетевого запроса. Конвертация использует FileReader API в браузере; ни один байт вашего изображения не отправляется на сервер. Можно также вставить строку Base64 обратно для декодирования и предпросмотра изображения, всё это происходит локально.

URI данных Base64 примерно на 33% больше исходного двоичного файла, потому что каждая группа из трёх байтов расширяется до четырёх ASCII-символов. Этот рост размера является ожидаемым компромиссом ради удобства встраивания изображения в документ или таблицу стилей. Инструмент показывает как исходную строку Base64, так и готовый фрагмент HTML-тега img и фрагмент CSS background-image для быстрого копирования в проект.

Автор: Bastien Sulyan

Изображение в Base64: пошаговая инструкция

Перетащите файл изображения в область загрузки или нажмите для выбора. Поддерживаемые форматы: JPEG, PNG, WebP, GIF, SVG.
URI данных Base64 появится немедленно в поле вывода.
Скопируйте исходную строку Base64 или используйте готовый HTML-тег img или фрагмент CSS background-image.
Для декодирования вставьте строку Base64 в поле ввода и переключитесь в режим декодирования для предпросмотра изображения.
Нажмите кнопку копирования рядом с любым фрагментом, чтобы скопировать его в буфер обмена.

Частые сценарии использования

Фронтенд-разработчик встраивает маленькую иконку как URI данных в CSS-файл, чтобы устранить дополнительный HTTP-запрос.
Разработчик встраивает крошечный спиннер загрузки в виде атрибута src Base64, чтобы изображение-заглушка было доступно до загрузки JavaScript-бандла.
QA-инженер копирует Base64 тестового изображения для вставки непосредственно в JSON-тело запроса API.
Разработчик шаблонов электронной почты встраивает логотип подписи как URI данных Base64, поскольку некоторые почтовые клиенты блокируют внешние запросы изображений.

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

Почему вывод Base64 примерно на треть больше исходного файла?

Кодирование Base64 представляет каждые три двоичных байта четырьмя ASCII-символами (коэффициент 4/3). Изображение размером 100 КБ в двоичном виде становится примерно 133 КБ в виде строки Base64. Это присуще самой схеме кодирования, а не ограничению инструмента.

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

Нет. FileReader API считывает двоичный файл с локального диска и передаёт результат напрямую функции кодирования JavaScript внутри вкладки браузера. Данные изображения не покидают устройство.

Можно ли использовать URI данных в любом контексте HTML или CSS?

Да. URI данных, начинающийся с data:image/jpeg;base64, за которым следует закодированная строка, можно использовать как атрибут src тега img или как значение url() в свойстве CSS background-image. Все современные браузеры поддерживают URI данных. Очень большие URI данных могут замедлить отрисовку страницы, поэтому встраивание обычно применяется для небольших изображений размером в несколько килобайт.

Поддерживает ли инструмент анимированные GIF?

Инструмент кодирует полное двоичное содержимое любого предоставленного файла, включая анимированные GIF. Полученный URI данных при использовании в качестве src тега img будет воспроизводить анимацию в браузерах, поддерживающих анимацию GIF.

Как декодировать строку Base64 обратно в изображение?

Переключите инструмент в режим декодирования, вставьте строку Base64 (с префиксом data: или без), и инструмент декодирует её и предложит двоичное изображение для скачивания, а также покажет предпросмотр.