Кодировщик и декодировщик изображений Base64: перетащите изображение, чтобы скопировать его Data URI со сниппетами HTML и CSS, или вставьте Data URI для просмотра.
Кодировщик изображений Base64
Кодировщик и декодировщик изображений Base64: перетащите изображение, чтобы скопировать его Data URI со сниппетами HTML и CSS, или вставьте Data URI для просмотра.
Кодировщик / декодировщик изображений Base64 работает полностью в вашем браузере. Изображения, которые вы перетаскиваете, и Data URI, которые вставляете, обрабатываются на вашем устройстве и никогда не загружаются в ArrayKit.
Об инструменте Кодировщик / декодировщик изображений 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, затем просмотрите и скачайте изображение
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,. Эти накладные расходы нормальны и ожидаемы.