Конвертер изображения в Base64 (data URI)
Преобразуйте изображение в data URI Base64 в браузере и скопируйте готовые фрагменты HTML img, CSS background и Markdown с данными о размере.
Работает полностью в вашем браузере. Ваши данные никуда не загружаются.
Что такое Изображение в Base64?
Инструмент кодирует файл изображения в Base64, чтобы встроить его прямо в HTML, CSS, JSON или Markdown. Он выдаёт полный data URI (data:image/png;base64,…), чистую строку Base64 и готовые к копированию фрагменты <img>, CSS background-image и Markdown, а также размер изображения и накладные расходы Base64.
Как пользоваться Изображение в Base64
- Перетащите, выберите или вставьте изображение (PNG, JPEG, GIF, WebP, SVG, ICO…).
- Прочитайте определённый формат, размеры, размер файла и длину data URI.
- Нажмите Копировать рядом с нужным вариантом: data URI, чистый Base64, фрагмент HTML, фон CSS или Markdown.
Пример
30×30 PNG filled with #3366CC (99 bytes)
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAIAAAC0Ujn1AAAAKklEQVR4nGM0TjvDQBvARCNzR40eNXrU6FGjR40eNXrU6FGjR40eEUYDACc1AaFANYRxAAAAAElFTkSuQmCC
Когда использовать Изображение в Base64
Встраивайте крошечные изображения — значки, небольшие логотипы, заглушки, — чтобы сэкономить HTTP-запрос, а также в одиночные HTML-файлы, письма, JSON API или CSS, который должен быть самодостаточным. Не делайте этого для изображений больше примерно 20 KB: они раздувают HTML/CSS и не кэшируются отдельно.
Как работает Изображение в Base64
Байты файла читаются через File.arrayBuffer(), реальный формат определяется по сигнатуре (например, 89 50 4E 47 для PNG), а не по расширению файла, и кодируются в Base64 через btoa. Data URI имеет вид data:<mime>;base64,<base64>. Base64 представляет каждые 3 байта 4 символами, поэтому текст примерно на 33% больше файла.
Распространенные Случаи Использования
- Встроить маленький значок прямо в файл CSS.
- Поместить логотип в шаблон HTML-письма или автономную одностраничную HTML-страницу.
- Отправить изображение внутри JSON-запроса к API.
- Написать самодостаточный документ Markdown или Jupyter.
Примечание по Безопасности
Изображения декодируются, обрабатываются и кодируются локально в вашем браузере через Canvas API. На сервер ничего не загружается.
Часто Задаваемые Вопросы
Почему Base64 больше моего файла?
Base64 использует 4 текстовых символа на каждые 3 байта, поэтому закодированная строка примерно на 33% больше (плюс несколько байт на выравнивание и префикс data URI).
Меняет ли инструмент или сжимает моё изображение?
Нет. Он кодирует точные байты вашего файла. Если нужен результат меньше, сначала воспользуйтесь инструментом сжатия изображений.
Можно ли преобразовать Base64 обратно в изображение?
Да, воспользуйтесь инструментом «Base64 в изображение»: он принимает data URI или чистый Base64 и позволяет скачать файл.