DEVELOP.07 BASE64 IMAGE

Конвертер изображений Base64

Редактируйте или вставляйте Base64 и сразу смотрите результат; изображения не покидают браузер.

SOURCE

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

Перетащите изображение сюда

или выберите JPG, PNG, GIF, WebP, SVG, BMP или ICO

Максимум 10 МБ · файл остаётся в этом браузере

Выберите изображение для кодирования

BASE64

Код Base64

Ожидание изображения или кода Base64Локальная обработка FileReader и Data URI · без загрузки и сохранения

§ 01

Понятный процесс кодирования и декодирования

Добавьте содержимое

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

Проверьте предпросмотр

Правая часть разберёт содержимое, уберёт пробелы, исправит заполнение и определит распространённый формат.

Скопируйте или скачайте

Проверьте предпросмотр, размеры и объём, затем скопируйте код или скачайте изображение.

§ 02

Base64 меняет представление, но не пиксели

Base64 переводит группы из 6 бит двоичных данных в печатные символы, чтобы использовать их в JSON, HTML или CSS. Это кодирование, а не сжатие, поэтому качество не меняется.

Цена — примерно на треть больший объём. Небольшие значки можно встроить, а крупные изображения увеличивают документ и теряют отдельное кеширование.

§ 03

Ввод и назначение в обоих направлениях

Направление

Ввод

Подходит для

Изображение в Base64

JPG, PNG, GIF, WebP, SVG, BMP, ICO

Веб, API JSON, отчёты в одном файле

Base64 в изображение

Data URI или обычный Base64

Проверка API, восстановление ресурсов, проверка MIME

§ 04

Используйте Data URI для небольших стабильных ресурсов

Data URI объединяет MIME и Base64 в готовый адрес. Полная URI подходит для атрибутов изображения, обычный Base64 — для API с отдельным MIME-полем.

Обычно встраивайте только значки и декорации размером в несколько КБ. Повторно используемые или большие изображения лучше размещать по обычному URL.

§ 05

Преобразование изображения в Base64 в коде

const dataUri = await new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.onload = () => resolve(reader.result);
  reader.onerror = reject;
  reader.readAsDataURL(file);
});

§ 06

Частые вопросы

Q1Можно ли показать Base64 без префикса Data URI?

Да. Распознаются сигнатуры PNG, JPEG, GIF, WebP и SVG; при неизвестной сигнатуре используется выбранный MIME по умолчанию.

Q2Почему Base64 увеличивает размер?

Четыре текстовых символа представляют три исходных байта, поэтому тело растёт примерно на треть, плюс небольшой префикс.

Q3Снижается ли качество при преобразовании?

Нет. Читаются исходные байты и меняется только представление; ресайз и сжатие не выполняются.

Q4Изображения загружаются или коды сохраняются?

Нет. Чтение, проверка, предпросмотр и скачивание выполняются на текущей странице.

Q5Почему строка Base64 не отображается?

Она может быть обрезана, содержать запрещённые символы, иметь неверный MIME или не быть изображением, которое браузер умеет декодировать.