Инструмент преобразования изображений в Base64
Взаимная конвертация изображений и кодировки Base64, поддержка перетаскивания и предпросмотра в реальном времени
Перетащите изображение сюда или нажмите для выбора файла
Поддерживаются JPG, PNG, GIF, WebP, SVG и другие форматы
Что такое кодирование изображений в Base64?
Инструмент Image Base64 преобразует файлы изображений в Base64-текст или data URL, а также декодирует такие строки обратно в просматриваемое изображение. Он удобен для маленьких иконок, заглушек, email-шаблонов, CSS-фонов, API-тестов и демонстраций, где отдельный файл мешает. Base64 не является сжатием: обычно размер данных увеличивается, а кэширование больших фотографий или повторяющихся ресурсов становится хуже. Инструмент полезен для быстрой конвертации, проверки и отладки перед выбором между встроенными данными, CDN-файлом и обычным URL изображения в реальном проекте. Это особенно важно, когда строка вставляется в HTML, CSS или JSON-конфигурацию. Перед публикацией или отправкой нужно открыть результат и проверить читаемость, crop, resolution, порядок и отсутствующие элементы.
Как использовать
Как использовать
- Перетащите файл или нажмите, чтобы загрузить изображение — тип и размеры определятся автоматически
- Выберите формат вывода: Data URL (готов к вставке в код) или чистый Base64
- Нажмите кнопку копирования, чтобы вставить закодированный результат в нужное место
- Для обратного преобразования вставьте строку Base64 и нажмите «Конвертировать», чтобы скачать изображение
Base64 в изображение
- Вставьте Data URL или строку чистого Base64 в поле ввода и конвертируйте, чтобы просмотреть изображение перед скачиванием.
- Если декодирование не удалось, убедитесь, что строка Base64 полная и префикс data:image/... указан корректно.
Изображение в Base64
- Выбирайте Data URL, если результат будет вставлен напрямую в HTML или CSS, и чистый Base64 — когда MIME-тип уже хранится в другой системе отдельно.
- Следите за размером Base64-изображений: большие изображения увеличивают объём текста примерно на треть и усложняют поддержку HTML, CSS или JSON.
Применение
Технический принцип
Изображение в кодировке Base64 — это data URI, определённый в RFC 2397: префикс схемы data:, MIME-тип (например, image/png), литерал ;base64 и полезная нагрузка, построенная из 64-символьного алфавита A-Z, a-z, 0-9, +, / с = в качестве терминального дополнения. Кодирование берёт бинарный поток по три байта за раз и выдаёт четыре символа, поэтому полезная нагрузка увеличивается на фиксированный коэффициент 4/3 (примерно 33%) плюс один или два символа дополнения, когда количество байтов не кратно трём. В браузере кодирование начинается с FileReader.readAsDataURL, который пропускает файл через тот же конвейер и возвращает готовый data: URL для вставки в <img src> или CSS background-image url(). Примитивы btoa и atob работают только с уже-бинарными данными (только latin-1, поэтому бинарные байты должны быть преобразованы через Uint8Array). Декодирование обратно в просматриваемое изображение проходит через atob в Uint8Array, затем в Blob с исходным MIME-типом, и URL.createObjectURL становится обычным HTTP-доступным ресурсом. Практический компромисс — не в пропускной способности, а в кэшировании. Каждое вхождение полезной нагрузки дублируется везде, где появляется HTML, CSS или JSON, поэтому ресурс нельзя кэшировать отдельно, нельзя присвоить ему собственный ETag, и он перезагружается с каждым родительским документом. Строгие правила Content-Security-Policy также блокируют data: URI, если 'data:' явно не указан в img-src или style-src. С появлением мультиплексирования HTTP/2 встраивание маленьких иконок редко выигрывает у отдельного запроса, поэтому современное правило — встраивать только ресурсы до ~2 КБ, а крупные изображения и повторно используемые спрайты оставлять кэшируемыми файлами.
- Data URI scheme: формат RFC 2397 data:[<mime>][;base64],<payload>; запятая обязательна и является самой частой ошибкой при копировании.
- Накладные расходы кодирования: 3 бинарных байта превращаются в 4 символа ASCII, поэтому полезная нагрузка увеличивается в 4/3 раза (~33%) плюс до 2 символов дополнения '='.
- Browser API: FileReader.readAsDataURL для файлов; btoa/atob для уже-текстовых данных (только latin-1, поэтому для бинарных данных нужен мост через Uint8Array).
- Путь декодирования: atob → Uint8Array → new Blob([buf], {type}) → URL.createObjectURL даёт обычный доступный URL ресурса вместо замороженной строки.
- Подводный камень CSP: строгая политика img-src или default-src блокирует data:, если ключевое слово явно не указано, что молча ломает встроенные изображения в продакшене.
- Компромисс кэширования: встроенные данные не имеют собственного ETag или записи кэша, поэтому мультиплексирование HTTP/2 обычно выигрывает у инлайна для всего, что превышает ~2 КБ.
Примеры
Использование в HTML
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="1x1 прозрачный пиксель" width="16" height="16" />Использование в CSS
.icon-search {
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTYgMmE0IDQgMCAxIDAgMi4yNCA3LjMzbDMuMjEgMy4yMSAxLjQyLTEuNDItMy4yMS0zLjIxQTQgNCAwIDAgMCA2IDJ6Ii8+PC9zdmc+');
background-size: contain;
}Передача в JSON API
POST /api/v1/avatar
Content-Type: application/json
{
"userId": 10086,
"avatar": {
"mimeType": "image/png",
"data": "iVBORw0KGgoAAAANSUhEUgAAAAUA..."
}
}
// Примечание: Base64 увеличивает объём данных примерно на 33%; для файлов > 100KB предпочтительнее multipart/form-data.Часто задаваемые вопросы
Загружается ли изображение на сервер?
Нет. Изображение читается через FileReader API и кодируется в Base64 в вашем браузере. Байты не покидают ваше устройство. Чтобы убедиться, посмотрите вкладку «Сеть» во время преобразования.
Почему строка Base64 примерно на 33% длиннее файла?
Base64 представляет 3 байта входных данных как 4 ASCII-символа, поэтому размер закодированных данных = ceil(file_size / 3) * 4. Это около 33% накладных расходов — плата за представление двоичных данных в виде печатаемого текста.
Как использовать результат в HTML или CSS?
Используйте data URI: <img src="data:image/png;base64,..."> в HTML или background-image: url(data:image/png;base64,...) в CSS. Страница сама генерирует полный data: URI. Это удобно для крошечных встроенных ресурсов, но раздувает размер HTML/CSS и обходит браузерное кеширование изображений.
Какой порог размера для встраивания против ссылки?
До ~5 КБ встраивание обычно выгоднее (экономит HTTP-запрос). Выше этого порога файл лучше выделить в отдельный ресурс ради кеширования. Выше ~50 КБ встраивание заметно раздувает HTML. Разные сборщики используют разные пороги; webpack по умолчанию — 8 КБ.
Можно ли декодировать строку Base64 обратно в изображение?
Да. Вставьте data: URI или сырую Base64-строку (с MIME-типом image/*) — страница восстановит изображение и предложит его скачать. Полезно, когда вы нашли встроенное изображение в исходном коде и хотите получить оригинальный файл.
Поддерживаются ли SVG и анимированные GIF?
Да. SVG можно кодировать напрямую или через URL-кодирование текста (что для SVG-XML короче, чем Base64). Анимированные GIF кодируются в одну Base64-строку; результат продолжает анимироваться. WebP, AVIF и другие современные форматы работают аналогично.
Стоит ли кодировать большие фото в Base64 для писем?
Электронная почта сама по себе кодирует вложения в Base64 через MIME, поэтому предварительно кодировать их не нужно. Вставка строки Base64 в тело письма лишь увеличит размер сообщения и сделает его нечитаемым в большинстве клиентов. Прикрепляйте файл как обычное вложение.