ToolsMaxxing

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

Закодируйте изображение в строку Base64 или data URL.

или перетащите сюда файлы (изображения)

изображения JPG, PNG, WebP, GIF, AVIF, BMP или SVG · Можно выбрать несколько файлов

Ваши файлы остаются на устройстве

  1. 1Добавьте файлы
  2. 2Настройте
  3. 3Скачайте

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

  1. 1Выберите одно или несколько изображений или перетащите их на страницу.
  2. 2Выберите вывод: data URL, обычный текст Base64, HTML-тег img или CSS background-image.
  3. 3Нажмите «Копировать всё», чтобы скопировать текст, или «Сохранить как .txt», чтобы сохранить файл.
  4. 4Вставьте его в код, шаблон письма или таблицу стилей.

Что делают параметры

Data URL
Полный текст «data:image/png;base64,...». Работает прямо как src изображения или внутри CSS url().
Только текст Base64
Только закодированные символы для API и полей JSON, которым нужен чистый Base64.
HTML-тег img
Готовый элемент img с data URL внутри.
CSS background-image
Строка CSS, которая использует изображение как фон.

Конфиденциальность

Инструмент работает в вашем браузере. Файлы никогда не загружаются на сервер.

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

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

Нет. Изображение кодируется в вашем браузере, а текст видите только вы.

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

Base64 записывает каждые 3 байта 4 символами, поэтому текст примерно на треть больше файла.

Когда стоит использовать data URL?

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

Работает ли это с SVG?

Да. Файлы SVG кодируются как data URL типа image/svg+xml.

Можно ли превратить Base64 обратно в изображение?

Вставьте data URL в адресную строку браузера, чтобы его увидеть, или воспользуйтесь декодером Base64 в разделе инструментов для разработчиков.

Похожие инструменты