Как использовать
- Перетащите изображение PNG, JPG, SVG, WebP или GIF в область загрузки или нажмите, чтобы выбрать файлы.
- Проверьте предварительный просмотр изображения, MIME-тип, исходный размер и размер полученного Data URI.
- Скопируйте полный Data URI, чистую строку Base64, фрагмент CSS
background-imageили HTML<img>. - Вставьте код в CSS, HTML, шаблон электронной почты или конфигурацию JSON.
Пример: нажмите «Загрузить пример SVG», чтобы сгенерировать локальную SVG-иконку в виде Data URI, а затем скопируйте фрагмент CSS или HTML.
Основные функции
- Мгновенное создание Data URI: Перетащите изображение и сгенерируйте URI
data:image/...;base64,...прямо в вашем браузере. - Готовые сниппеты CSS и HTML: Копируйте фрагменты CSS
background-imageили HTML<img>, не прописывая префикс Data URI вручную. - Поддержка веб-форматов изображений: Работает с PNG, JPG, SVG, WebP, GIF, AVIF и другими форматами изображений, которые может прочитать ваш браузер.
- Пакетная обработка: Загрузите сразу несколько иконок, элементов для email или UI и скопируйте нужный сниппет для каждого файла.
- 100% приватная обработка: Изображения считываются локально с помощью встроенного в браузер API
FileReader. Ничего не отправляется на сервер.
Похожие инструменты
Онлайн-конвертер Base64: конвертируйте файлы в Data URL, декодируйте строки обратно в файлы и копируйте CSS-код фона. Поддержка WebP, локальная обработка без загрузок.
Декодируйте изображения Base64 или Data URI в вашем браузере, мгновенно просматривайте и скачивайте в оригинальном формате, PNG, JPG или WebP.
Безопасный JSON-форматтер: форматируйте, проверяйте и исправляйте JSON локально. Улучшение читаемости/минификация, подсветка ошибок, генерация TypeScript или Zod, конвертация в XML — приватно. Попробуйте сейчас.
Бесплатный тестер и анализатор JSONPath для JSON из API. Извлекайте совпадающие узлы в реальном времени, проверяйте пути и копируйте результаты JSON, пока парсинг остается локальным в вашем браузере.
Конвертируйте объекты или массивы JSON в CSV локально в вашем браузере. Выравнивайте вложенные поля, просматривайте результат, а затем копируйте или скачивайте CSV без загрузки данных на сервер.
Конвертируйте текст или файлы CSV в массивы JSON локально в вашем браузере. Поддерживает заголовки, разделители (запятая/точка с запятой/табуляция), перетаскивание файлов, копирование и скачивание без загрузки на сервер.
Локально сравнивайте два JSON-документа в браузере. Сортируйте ключи объектов для семантического сравнения (semantic diff), игнорируйте различия в порядке следования ключей и отмечайте добавленные, удаленные и измененные поля без загрузки на сервер.
Сжимайте JSON в одну строку, удаляйте отступы и переносы строк, а также сравнивайте исходный размер, сжатый размер, сэкономленные байты и процент сжатия.
Логика расчёта
Кодирование Base64 преобразует двоичные данные изображения в строку ASCII, что позволяет встраивать изображения непосредственно в HTML, CSS или JSON. Data URI имеет формат data:[mime-type];base64,[encoded-data], и браузеры могут читать его как ресурс изображения.
Важный компромисс: Base64 — это не сжатие изображений. Закодированный результат обычно примерно на 33% больше исходного файла, поэтому он лучше всего подходит для небольших иконок, логотипов, изображений для электронной почты или для сокращения небольшого числа HTTP-запросов. Большие фотографии и множество файлов следует оставлять в виде обычных файлов изображений и сжимать их отдельно.
Часто задаваемые вопросы
Зачем конвертировать изображение в Base64?
Это полезно, когда вы хотите встроить небольшие иконки, изображения для email или конфигурационные изображения прямо в код, чтобы сократить внешние запросы или избежать блокировки удаленных изображений в почтовых клиентах.
Уменьшает ли Base64 размер изображения?
Нет. Кодирование Base64 обычно увеличивает размер примерно на 33%. Оно помогает при внедрении и сокращении числа запросов, а не при экономии места.
Какие форматы изображений поддерживаются?
PNG, JPG, JPEG, SVG, WebP, GIF, AVIF и любые другие форматы, которые может прочитать ваш браузер.
Загружаются ли мои изображения на сервер?
Нет. Конвертация использует нативный API браузера FileReader.readAsDataURL, поэтому файлы остаются на вашем устройстве.
Могу ли я скопировать CSS или HTML напрямую?
Да. Для каждого изображения создается полный Data URI, чистая строка Base64, фрагмент CSS background-image и HTML <img>.