Зачем преобразовывать изображение в Base64?

Base64 позволяет встроить изображение прямо в HTML или CSS в виде текстовой строки, убирая необходимость отдельного HTTP-запроса за внешним файлом. Особенно удобно для иконок, логотипов и небольших графических элементов.

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

Инструмент не устанавливает жёсткого лимита — фактическое ограничение определяется памятью вашего браузера. Учтите, что Base64-вывод примерно на 33% больше исходного бинарного файла, поэтому Base64 рекомендуется использовать только для небольших изображений.

Приводит ли конвертация к потере качества?

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

В чём разница между «сырым» Base64 и Data URI?

«Сырой» Base64 — это просто строка закодированных символов. Data URI добавляет префикс вида data:image/png;base64,, который сообщает браузеру тип MIME, что позволяет использовать его непосредственно в атрибуте src тега или в CSS background-image.

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

Нет. Всё кодирование происходит локально в браузере с помощью FileReader API — ваши файлы никогда не покидают устройство.

Как использовать Base64-изображение в CSS?

Скопируйте Data URI и используйте его как значение свойства background-image: url('data:image/png;base64,...'); в вашем файле CSS.

Поддерживается ли формат SVG?

Да, SVG поддерживается. Однако, поскольку SVG является текстовым форматом, в ряде случаев эффективнее встраивать его непосредственно как тег , а не конвертировать в Base64.

Конвертер изображения в Base64 — бесплатно онлайн

Преобразуйте изображения в строки Base64 онлайн: поддержка PNG, JPG, GIF, WebP, SVG и BMP. Быстро, безопасно и локально в браузере.

Перетащите любое изображение в инструмент или нажмите, чтобы выбрать — оно мгновенно будет закодировано в строку Base64. Вы получите как «сырой» текст Base64, так и готовый к вставке Data URI (data:image/png;base64,...). Поддерживаются PNG, JPG, GIF, WebP, SVG и BMP. Всё обрабатывается локально в браузере — файлы никогда не отправляются на сервер.

Загрузить изображение

Загрузить

Очистить

Перетащите или нажмите для загрузки

Поддержка PNG, JPG, GIF, WebP, SVG, BMP

Вывод Base64

Строка Base64 появится здесь...

Копировать

Строка Base64 появится здесь...

Ключевые особенности

Мгновенная конвертация

Конвертируйте изображения в Base64 мгновенно без загрузки на сервер.

Приватность прежде всего

Вся обработка происходит локально в вашем браузере. Ваши изображения никогда не покидают ваше устройство.

Поддержка всех форматов

Совместимость с форматами PNG, JPEG, GIF, SVG, WebP и BMP.

Готовность Data URI

Получите полную строку Data URI, готовую к использованию в HTML тегах <img> или CSS background-image.

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

1
Загрузите изображение
Перетащите файл в область загрузки или нажмите, чтобы выбрать файл. Поддерживаются PNG, JPG, GIF, WebP, SVG и BMP.
2
Получите закодированный результат
Инструмент читает файл локально и мгновенно создаёт строку Base64 — без обращений к серверу.
3
Выберите «сырой» Base64 или Data URI
Скопируйте «сырой» текст Base64 для JSON-полезных нагрузок или скопируйте полную строку Data URI для использования в HTML-теге <img> и CSS background-image.
4
Встройте в код
Вставьте Data URI прямо в HTML или CSS, чтобы изображение загружалось инлайн и сэкономить HTTP-запрос.

Источники

RFC 2397 — Схема data URL
Спецификация IETF, определяющая схему data: URL для встраивания закодированных в Base64 медиафайлов непосредственно в документ.
MDN — Data URLs
Практическое руководство по синтаксису data URL, кодированию Base64 и встраиванию изображений в HTML и CSS.

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

Зачем преобразовывать изображение в Base64?: Base64 позволяет встроить изображение прямо в HTML или CSS в виде текстовой строки, убирая необходимость отдельного HTTP-запроса за внешним файлом. Особенно удобно для иконок, логотипов и небольших графических элементов.
Есть ли ограничение на размер файла?: Инструмент не устанавливает жёсткого лимита — фактическое ограничение определяется памятью вашего браузера. Учтите, что Base64-вывод примерно на 33% больше исходного бинарного файла, поэтому Base64 рекомендуется использовать только для небольших изображений.
Приводит ли конвертация к потере качества?: Нет. Кодирование Base64 является обратимым — декодированное изображение байт в байт идентично оригинальному файлу.
В чём разница между «сырым» Base64 и Data URI?: «Сырой» Base64 — это просто строка закодированных символов. Data URI добавляет префикс вида data:image/png;base64,, который сообщает браузеру тип MIME, что позволяет использовать его непосредственно в атрибуте src тега <img> или в CSS background-image.
Загружаются ли мои изображения на сервер?: Нет. Всё кодирование происходит локально в браузере с помощью FileReader API — ваши файлы никогда не покидают устройство.
Как использовать Base64-изображение в CSS?: Скопируйте Data URI и используйте его как значение свойства background-image: url('data:image/png;base64,...'); в вашем файле CSS.
Поддерживается ли формат SVG?: Да, SVG поддерживается. Однако, поскольку SVG является текстовым форматом, в ряде случаев эффективнее встраивать его непосредственно как тег <svg>, а не конвертировать в Base64.