Что такое Base64 Data URI изображения?

Data URI встраивает изображение прямо в строку вида data:image/png;base64,XXXX. Байты изображения кодируются в Base64, поэтому вы можете поместить всё изображение в HTML-атрибут src или CSS url() без отдельного файла или запроса.

Какие форматы изображений я могу кодировать?

Любое изображение, которое читает ваш браузер — PNG, JPEG, WebP, GIF, SVG, BMP, AVIF и ICO. Декодировщик считывает MIME-тип из Data URI и предлагает подходящее расширение для скачивания.

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

Встраивание подходит для небольших, часто используемых ресурсов вроде иконок или картинок в письмах, где экономия запроса полезна. Для более крупных изображений это обычно вредит, ведь Base64 увеличивает размер примерно на треть, а данные нельзя кэшировать отдельно.

Можно ли декодировать Data URI обратно в файл изображения?

Да. Переключитесь на Base64 → Изображение, вставьте строку data:image/…;base64, — и инструмент покажет изображение и позволит скачать его с правильным расширением.

Загружаются ли мои изображения при кодировании?

Нет. Кодировщик читает файл с помощью браузерного FileReader и собирает Data URI на вашем устройстве. Ничего не отправляется в ArrayKit или на какой-либо сервер.

Почему строка Base64 больше моего изображения?

Base64 представляет три байта четырьмя символами, поэтому закодированный текст примерно на 33% больше исходных двоичных данных, плюс короткий префикс data:…;base64,. Эти накладные расходы нормальны и ожидаемы.

Кодировщик / декодировщик изображений Base64

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

Кодировщик / декодировщик изображений Base64 работает полностью в вашем браузере. Изображения, которые вы перетаскиваете, и Data URI, которые вставляете, обрабатываются на вашем устройстве и никогда не загружаются в ArrayKit.

Открыть кодировщик / декодировщик Base64

Об инструменте Кодировщик / декодировщик изображений Base64

Кодировщик изображений Base64 превращает любое изображение в Base64 Data URI, который можно вставить прямо в HTML или CSS. Перетащите PNG, JPEG, WebP, SVG или GIF — и он мгновенно покажет Data URI и готовые к продакшену сниппеты: тег <img> с редактируемым alt-текстом и правило CSS background-image, каждый с копированием в один клик. Он также показывает MIME-тип, размер файла, размеры в пикселях и длину строки, чтобы вы точно знали, что встраиваете. Переключитесь в режим декодирования, чтобы вставить Data URI, просмотреть изображение и скачать его с правильным расширением. Он создан для фронтенд-разработчиков, авторов писем и шаблонов и всех, кто встраивает небольшие иконки, чтобы сэкономить запрос. Всё работает локально в вашем браузере, поэтому изображения остаются на вашем устройстве.

Возможности

Перетащите или щёлкните, чтобы закодировать PNG, JPEG, WebP, SVG и GIF в Base64 Data URI
Копирование в один клик исходного Data URI, готового тега HTML <img> и правила CSS background-image
Редактируемый alt-текст, который сразу попадает в сгенерированный сниппет <img> для доступности
Показывает MIME-тип, размер файла, размеры в пикселях и длину Data URI с одного взгляда
Режим декодирования вставляет Data URI для просмотра изображения и скачивания с правильным расширением
Предупреждает, когда изображение слишком велико, чтобы эффективно встраивать его как Base64
Обрабатывает SVG и GIF наравне с растровыми фото, с разумными расширениями для скачивания
Работает полностью в вашем браузере, поэтому изображения никогда не загружаются на сервер

Как использовать Кодировщик / декодировщик изображений Base64

Оставьте выбранной вкладку Изображение → Base64 и перетащите изображение в зону загрузки
Скопируйте Base64 Data URI, тег HTML <img> или правило CSS background-image
При желании введите alt-текст, чтобы вставить его в сниппет <img>
Переключитесь на Base64 → Изображение, вставьте Data URI, затем просмотрите и скачайте изображение

Пример

Ввод

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB…

Результат

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB…" alt="logo" />

PNG превращается во встроенный тег <img>, который загружается без дополнительного сетевого запроса.

Частые ошибки и устранение неполадок

При вставке Data URI появляется 'The Data URI payload is not valid Base64.' — Скопируйте всю строку, начиная с data:image/… и включая ';base64,', и удалите лишние кавычки или переносы строк, добавленные редактором.
Декодированное изображение не отображается. — Проверьте, что MIME-тип соответствует данным — содержимое PNG, помеченное как image/jpeg, не отрисуется. Перекодируйте исходный файл, чтобы получить корректный Data URI.
Мой файл HTML или CSS сильно вырос после встраивания изображения. — Base64 добавляет около 33% накладных расходов, а встроенные изображения не кэшируются отдельно. Встраивайте только небольшие иконки, а изображения покрупнее подключайте обычными файлами.
Data URI с SVG из другого инструмента выглядит иначе. — Некоторые инструменты кодируют SVG в процентном виде, а не в Base64. Этот кодировщик всегда использует Base64; оба варианта — допустимые Data URI, но они не взаимозаменяемы побайтово.

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

Что такое Base64 Data URI изображения?: Data URI встраивает изображение прямо в строку вида data:image/png;base64,XXXX. Байты изображения кодируются в Base64, поэтому вы можете поместить всё изображение в HTML-атрибут src или CSS url() без отдельного файла или запроса.
Какие форматы изображений я могу кодировать?: Любое изображение, которое читает ваш браузер — PNG, JPEG, WebP, GIF, SVG, BMP, AVIF и ICO. Декодировщик считывает MIME-тип из Data URI и предлагает подходящее расширение для скачивания.
Стоит ли встраивать изображения как Base64?: Встраивание подходит для небольших, часто используемых ресурсов вроде иконок или картинок в письмах, где экономия запроса полезна. Для более крупных изображений это обычно вредит, ведь Base64 увеличивает размер примерно на треть, а данные нельзя кэшировать отдельно.
Можно ли декодировать Data URI обратно в файл изображения?: Да. Переключитесь на Base64 → Изображение, вставьте строку data:image/…;base64, — и инструмент покажет изображение и позволит скачать его с правильным расширением.
Загружаются ли мои изображения при кодировании?: Нет. Кодировщик читает файл с помощью браузерного FileReader и собирает Data URI на вашем устройстве. Ничего не отправляется в ArrayKit или на какой-либо сервер.
Почему строка Base64 больше моего изображения?: Base64 представляет три байта четырьмя символами, поэтому закодированный текст примерно на 33% больше исходных двоичных данных, плюс короткий префикс data:…;base64,. Эти накладные расходы нормальны и ожидаемы.

Связанные инструменты

Кодирование / Декодирование Base64 — Безопасное кодирование и декодирование Base64 в UTF-8.
Конвертер форматов изображений — Конвертируйте изображения между PNG, JPEG и WebP полностью в вашем браузере.
Оптимизатор изображений — Перекодируйте и уменьшайте изображения (JPEG/WebP/PNG) с опциональным изменением размера.
Оптимизатор SVG — Минифицирует SVG: удаляет комментарии, метаданные и остатки редактора, сжимает пробелы.
Просмотр и удаление EXIF — Просматривайте и удаляйте метаданные EXIF (включая GPS) из фотографий; ничего не загружается.
Кодирование / Декодирование URL — Кодируйте и декодируйте компоненты URL.
Генератор QR-кодов — Создайте QR-код из текста или URL; скачайте как PNG или SVG.