Изображение в Base64: data URI, HTML и CSS
Преобразуйте изображение в строку Base64 или data URI с готовым кодом HTML img, CSS background и JSON. Работает в браузере.
Загрузка: Конвертер изображений в Base64…
Ваши файлы не покидают устройство
Как пользоваться: Конвертер изображений в Base64
- 1
Откройте «Конвертер изображений в Base64» на этой странице. Инструмент загружается прямо в браузере.
- 2
Добавьте файл, текст или значения и настройте параметры.
- 3
Скопируйте или скачайте результат. Ничего не загружается и не хранится.
Как преобразовать изображение в Base64
Base64 превращает двоичные данные изображения в обычный текст из букв, цифр и нескольких символов. Этот текст можно встроить туда, где допускается только текст: в HTML или CSS как data URI, в JSON-запрос к API, в шаблон письма или в файл конфигурации. При показе браузер декодирует его обратно в исходное изображение.
Конвертер читает изображение в браузере и мгновенно выдаёт закодированную строку вместе с готовыми фрагментами: полный data URI (data:image/png;base64,…), только строку Base64, тег HTML img, правило CSS background-image и объект JSON. Любой из них можно скопировать в буфер обмена или скачать как текстовый или JSON-файл. Принимаются изображения до 10 МБ.
Как пользоваться: Конвертер изображений в Base64
- Загрузите или перетащите изображение (JPG, PNG, WebP, GIF, SVG и другие форматы, поддерживаемые браузером, до 10 МБ). Будут показаны формат, размеры и вес оригинала.
- Выберите формат вывода: Data URI, Base64 Only, CSS Background, HTML Image или JSON.
- Скопируйте результат одним щелчком или скачайте его, затем вставьте в HTML, CSS, JavaScript или запрос к API.
- Перед использованием очень больших изображений проверьте количество символов и закодированный размер в панели статистики.
Когда изображения в Base64 оправданы
- Маленькие иконки и логотипы в CSS или HTML, без отдельного HTTP-запроса.
- HTML-шаблоны писем, где внешние изображения могут блокироваться.
- API и JSON, которые принимают изображения только как текстовые поля.
- Однофайловые демо и прототипы, которые должны работать без внешних ресурсов.
Примеры вывода
Data URI выглядит как data:image/png;base64,iVBORw0KGgo… и может использоваться везде, где ожидается URL. В HTML он превращается в <img src="data:image/png;base64,…" alt="">, а в CSS: в background-image: url(data:image/png;base64,…). Вывод JSON оборачивает строку вместе с MIME-типом и размерами, что удобно для запросов к API и тестовых данных.
Размер и производительность
Поскольку Base64 примерно на 33% больше двоичного файла и разбирается вместе с содержащим его HTML или CSS, встраивание окупается в основном для изображений меньше нескольких килобайт: иконок, крошечных логотипов и заглушек. Сначала сожмите или уменьшите изображение, лучше всего до точного размера показа, чтобы строка оставалась короткой, а страницы: быстрыми.
Base64 увеличивает данные примерно на треть по сравнению с исходным файлом, а встроенные изображения браузер не может кэшировать отдельно. Используйте его для небольших изображений; для фото и крупной графики быстрее обычный файл, сжатый в компрессоре изображений.
Приватно, бесплатно и быстро
Инструмент полностью работает в вашем браузере: файлы и текст обрабатываются на вашем устройстве и не загружаются на сервер. Без регистрации, водяных знаков и дневных лимитов.
Возможности
- Вывод data URI и чистого Base64
- Готовые фрагменты HTML img и CSS background
- Вывод JSON для API
- Копирование в буфер или скачивание
- Показывает число символов и закодированный размер
- Изображения до 10 МБ, обработка в браузере
Частые вопросы
Что такое изображение в Base64?
Изображение, двоичные данные которого закодированы как текст. В виде data URI его можно вставить прямо в HTML или CSS вместо ссылки на отдельный файл.
Увеличивает ли Base64 размер изображений?
Да, примерно на 33%, потому что каждые 3 байта превращаются в 4 символа. Лучше всего подходит для небольших изображений.
Как использовать изображение Base64 в HTML?
Выберите вывод HTML Image и вставьте сгенерированный тег img или поместите data URI в атрибут src любого элемента img.
Как использовать его в CSS?
Выберите вывод CSS Background: будет создано правило background-image с data URI, которое можно вставить в таблицу стилей.
Как превратить Base64 обратно в изображение?
Вставьте data URI в адресную строку браузера, чтобы увидеть изображение, или декодируйте строку Base64 любым декодером и сохраните байты с нужным расширением.
Загружаются ли мои файлы на сервер?
Нет. Всё обрабатывается локально в браузере, на сервер ничего не отправляется. При закрытии вкладки данные удаляются.