Изображение в Base64
Войдите или зарегистрируйтесь, чтобы сохранять инструменты в избранное
Конвертация изображения в Base64 строку онлайн. Генерация data URI для встраивания картинок в HTML и CSS
Нажмите или перетащите файл
Перетащите изображение или нажмите на зону загрузки — инструмент мгновенно сконвертирует его в Base64.
С data:URI префиксом — добавляет data:image/png;base64,... в начало — готово для использования в CSS и HTML.
HTML <img> тег — оборачивает строку в готовый тег <img src="..."> для вставки прямо в разметку.
Поддерживаются PNG, JPEG, WebP, GIF, SVG и другие форматы изображений.
Конвертация происходит полностью в браузере — файл не отправляется на сервер.
Перевод изображения в Base64 онлайн
Бесплатный онлайн-конвертер для преобразования изображений в строку Base64 и обратно. Получите готовый data:URI для встраивания картинки прямо в HTML или CSS без дополнительных HTTP-запросов.
Что такое Base64 для изображений
Base64 — это способ кодирования бинарных данных (в том числе изображений) в строку из ASCII-символов. Бинарные байты изображения конвертируются в последовательность из 64 символов: латинские буквы, цифры, +, / и = для выравнивания.
Результат — длинная текстовая строка, которую можно встроить прямо в HTML, CSS или JavaScript без создания отдельного файла. Браузер декодирует строку обратно в изображение на лету.
Как перевести картинку в Base64
- Нажмите на зону загрузки или перетащите файл изображения
- Выберите опции: с data:URI префиксом или как HTML <img> тег
- Скопируйте результат кнопкой «Копировать»
Конвертация происходит мгновенно в браузере через FileReader API — файл не покидает ваше устройство.
Формат data:URI
Data URI — стандартный формат для встраивания данных непосредственно в URL. Для изображений структура такая:
data:[MIME-тип];base64,[BASE64-ДАННЫЕ]
Примеры:
- PNG:
data:image/png;base64,iVBORw0KGgo... - JPEG:
data:image/jpeg;base64,/9j/4AAQSkZJRgAB... - SVG:
data:image/svg+xml;base64,PHN2ZyB4bWxucz... - WebP:
data:image/webp;base64,UklGRl4A...
Если отключить опцию data:URI, получите «голую» Base64-строку без префикса — для ситуаций, когда MIME-тип задаётся отдельно (например, в API-запросе).
Где применяется Base64 изображение
| Сценарий | Описание |
|---|---|
| CSS backgrounds | background-image: url(data:image/png;base64,...) — иконки без HTTP-запросов |
| HTML email | Встраивание логотипов и баннеров без внешних ссылок для обхода блокировок |
| Inline HTML | <img src="data:image/..."> — одностраничные документы без зависимостей |
| JSON API | Передача изображения в теле JSON-запроса (поле в виде Base64-строки) |
| localStorage | Сохранение маленьких изображений в браузерном хранилище |
| Canvas export | Метод canvas.toDataURL() возвращает Base64 по умолчанию |
Влияние на размер файла
Base64-кодирование увеличивает размер примерно на 33%: каждые 3 байта бинарных данных кодируются в 4 символа Base64. PNG размером 10 КБ после кодирования займёт ~13,3 КБ в виде строки.
Это нормально для небольших иконок (до 2–5 КБ). Для больших изображений рекомендуется использовать обычные файлы с CDN — это экономит трафик и позволяет браузеру кэшировать изображения независимо от страницы.
Частые вопросы
Поддерживаются ли все форматы изображений? Да — PNG, JPEG, WebP, GIF, SVG, AVIF, BMP, ICO и другие, которые понимает браузер.
Есть ли ограничение по размеру файла? Технического ограничения нет — всё зависит от памяти браузера. Для файлов крупнее 5 МБ рекомендуем использовать серверные решения.
Как декодировать Base64 обратно в файл? Используйте наш инструмент Base64 декодер — он поддерживает и превью data:URI изображений.
Смотрите также: Base64 декодирование · Сжатие изображений · Конвертер форматов · Изменение размера
Полезные статьи
Распознавание текста с картинки онлайн — ИИ OCR vs обычный режим
Как распознать текст с фото, скриншота или скана. Два режима: ИИ OCR для сложных изображений и обычный без лимитов. Сравнение, примеры, советы.
Удаление фона с фото онлайн: как это работает и где применяется
Как нейросеть удаляет фон с изображения, чем ИИ лучше ручного выделения и для каких задач пригодится прозрачный PNG.