0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
Настройка
Преобразуйте изображения в Base64 для встраивания в HTML, CSS или JSON, или декодируйте строку Base64 обратно в изображение. Поддерживаются форматы PNG, JPEG, GIF, WebP, SVG и BMP.
Операция

Перетащите изображение или щелкните, чтобы выбрать

PNG, JPEG, GIF, WebP, SVG, BMP

Как это работает

Он преобразует изображение в строку Base64 в виде Data URI (data:image/…;base64,…), которую можно встроить прямо в HTML или CSS без отдельного файла и дополнительного HTTP-запроса.

Результат занимает примерно на 33 % больше, чем исходный файл, поэтому его лучше приберечь для небольших изображений: значков, логотипов, узоров или заглушек.

В режиме декодирования он принимает строку Base64 или полный Data URI, определяет тип изображения по первым байтам и показывает скачиваемый предпросмотр.

Примеры

logo.pngdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…Префикс data:image/png;base64, указывает тип. Каждый закодированный PNG начинается с iVBORw0KGgo, что соответствует его файловой сигнатуре.
background-image: url("data:image/png;base64,iVBORw0KGgo…");Data URI можно использовать как есть внутри правила CSS, чтобы встроить изображение без внешнего файла.

Сценарии использования

  • Встраивать маленькие значки или логотипы в CSS/HTML через data URI, избегая лишних запросов.
  • Хранить изображение внутри JSON, файла конфигурации или базы данных.
  • Отправлять изображения через API или письма (MIME), которые принимают только текст.
  • Восстановить и предпросмотреть изображение из строки Base64 или Data URI.

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

Стоит ли конвертировать все изображения в Base64?

Нет. Это увеличивает размер примерно на 33 %, и браузер не может кэшировать изображение отдельно. Это идеально для маленьких изображений, но для больших почти всегда лучше отдельный файл.

Какие форматы изображений он поддерживает?

Любой при кодировании (PNG, JPEG, GIF, WebP, BMP, SVG). При декодировании он автоматически определяет тип по первым байтам файла.

Почему мой Data URI такой длинный?

Потому что Base64 представляет каждые 3 байта 4 символами, поэтому текст растёт примерно на 33 % по сравнению с исходным двоичным. Это нормально, особенно для изображений.

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

Нет. Изображение читается и кодируется полностью в браузере; оно никогда не покидает ваш компьютер.

См. также