← Назад к функциям
Free

Изображение <-> Base64

Изображение <-> Base64 преобразует файлы изображений (PNG, JPG, SVG, WebP, GIF) в Base64-кодированные Data URI и обратно. Перетащите, вставьте или нажмите, чтобы загрузить изображение; скопируйте полную строку data:image/...;base64,... для встраивания встроенно в CSS, HTML или конфиг. Или вставьте Data URI для предпросмотра и загрузки как файл изображения.

Base64-кодированные изображения можно встраивать непосредственно в CSS, HTML или файлы конфигурации - полезно для небольших значков, шаблонов электронной почты или артефактов сборки, где нежелательны запросы внешних изображений. Этот инструмент делает преобразование простым. Перетащите файл изображения, вставьте из буфера обмена или нажмите для просмотра. Инструмент преобразует его в Data URI с правильным типом MIME (data:image/png;base64,..., data:image/svg+xml;base64,..., и т.д.). Обратное направление также работает - вставьте Data URI и инструмент отобразит изображение для предпросмотра и предложит ссылку для загрузки, чтобы сохранить его как реальный файл. Работает полностью в браузере, без загрузок - ваши изображения никогда не покидают ваш компьютер. Обрабатывает форматы PNG, JPG/JPEG, SVG, WebP, GIF и ICO.

Предпросмотр в реальном времени
example.com
Image ↔ Base64 Изображение → Base64 Base64 → Изображение
Перетащите изображение
Перетащите, вставьте или нажмите
PNG, JPG, SVG, WebP
logo.png
8.4 KB · 256×256
Base64 Data URI
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADJJREFUeNrs0rERwCAIhFEwjv9/6OS...
Копировать Скачать
Ключевые особенности

Перетащить, вставить или просмотреть

Несколько способов загрузить изображение: перетащить файл из вашей ОС, вставить из буфера обмена (работают скриншоты) или нажать для открытия средства выбора файлов.

Предпросмотр изображения в реальном времени

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

Однокликовое копирование Data URI

Копирует полную строку data:image/...;base64,... готовую вставить в ваш CSS, атрибут src HTML или конфиг JSON.

Мгновенное преобразование

Без ожидания загрузки - все происходит локально. Даже большие изображения преобразуются за долю секунды.

Загрузить как файл

Из Data URI Base64 сохраните декодированное изображение как реальный файл (PNG, JPG, SVG и т.д.) с правильным расширением.

Обрабатывает все общие форматы

Поддерживает PNG, JPG, SVG, WebP, GIF и ICO. Тип MIME определяется автоматически, поэтому ваш Data URI всегда правильный.

Типичные сценарии использования

Встраивание небольших значков в CSS

Преобразуйте значок 16x16 в Base64 и встроите его в background-image: url(...). Без HTTP запроса, без промаха кеша - значок отправляется с вашим CSS.

Шаблоны электронной почты

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

Артефакты сборки и пакеты

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

Извлечение изображений из Data URI

Вставьте Data URI из инструментов разработчика, источника HTML или файла CSS для предпросмотра и загрузки базового изображения как файла.

Отладка встроенных изображений

Когда встроенное изображение не отображается, вставьте Data URI в декодер, чтобы проверить, действителен ли Base64 и правильный ли тип MIME.

Как использовать
1

Откройте изображение <-> Base64

Нажмите на значок Image Base64 в панели DevSuite Pro. Откроется двухпанельная панель с зоной перетаскивания и полем Data URI.

2

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

Перетащите файл в зону перетаскивания, вставьте изображение из буфера обмена (Ctrl+V) или нажмите на зону для просмотра. Появится предпросмотр.

3

Получить Data URI

Data URI Base64 генерируется немедленно в поле выхода - нажмите Copy, чтобы отправить его в буфер обмена, готов вставить встроенно.

4

Обратное направление

Чтобы перейти Base64 -> изображение, вставьте Data URI в поле. Предпросмотр отображает изображение и появляется кнопка загрузки.

5

Загрузить или копировать

Сохраните реконструированное изображение как реальный файл или скопируйте Data URI для обмена или встраивания в другом месте.

Готовы попробовать?

Установите DevSuite Pro бесплатно и разблокируйте более 64 инструментов разработчика для вашего браузера.

Добавить в Chrome Добавить в Edge Добавить в FireFox