Конвертировать изображение в base64 и создать data URI

Получите base64-код и data URI для встраивания изображений в HTML, CSS или JSON.

🖼️ → 🔢
Перетащите изображение или выберите файлJPG · PNG · WebP

Как работает конвертер

Инструмент считывает выбранное изображение через FileReader API браузера, полностью локально. Затем преобразует его содержимое в base64, добавляя MIME-тип и формируя строку data URI.

Результат готов к копированию: можно вставить data URI в HTML, CSS или JSON без необходимости внешней ссылки. Все операции выполняются на вашем компьютере — изображение не отправляется на сервер ToolMole или куда-либо ещё.

Когда использовать base64 для изображений

Встраивание изображения в base64 подходит для небольших файлов — например, иконок или логотипов до 10 KB. Это удобно для single-file проектов, email-шаблонов или когда нельзя использовать внешние ссылки.

Но для крупных изображений base64 увеличивает размер примерно на 33%, и лишает возможности кэширования отдельных файлов. Если изображение используется на многих страницах, лучше хранить его отдельно.

Особенности и ограничения

В base64-кодировании исходная картинка становится больше, так как каждые 3 байта превращаются в 4 символа. Это важно учитывать при вставке в CSS или HTML: большие строки могут привести к ошибкам в старых почтовых клиентах или нарушить стили.

Перед конвертацией можно сжать изображение (например, уменьшить размер или качество), чтобы уменьшить итоговую строку. Инструмент поддерживает форматы JPG, PNG и WebP, автоматически определяя MIME-тип для корректного data URI.

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

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

Уменьшает ли base64 размер файла?

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

Когда целесообразно встраивать изображение как data URI?

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

Почему вставленный data URI может нарушить CSS?

Если строка очень длинная, некоторые редакторы или почтовые клиенты могут её обрезать или разбить на несколько строк. Важно использовать корректные кавычки и избегать переноса строк при вставке.

Передаётся ли изображение на сервер при конвертации?

Нет, все преобразования выполняются в браузере на вашем устройстве, и данные не уходят на сервер ToolMole или сторонние сервисы.

Как уменьшить размер base64-строки перед конвертацией?

Перед загрузкой изображения можно сжать его с помощью редактора: уменьшить разрешение или снизить качество. Это уменьшит итоговую base64-строку.

Какие форматы и MIME-типы поддерживаются?

Инструмент автоматически определяет MIME-тип для JPG, PNG и WebP. Для других форматов результат не гарантируется.

Что-то не так или есть идея? Сообщить