Как пользоваться: Изображение в Base64
- В разделе Изображение → Base64 перетащите картинку или выберите её на компьютере. Файл обрабатывается локально, на сервер ничего не загружается.
- Скопируйте data URI или готовый сниппет CSS-фона или <img>. Снимите галочку «data: префикс», если нужна только чистая строка Base64.
- Для SVG переключитесь на URL-кодирование: обычно оно короче Base64.
- Чтобы сделать обратное преобразование, откройте Base64 → Изображение, вставьте строку и скачайте декодированный файл.
Что такое конвертер изображения в Base64?
Base64 — это способ записи двоичных данных с помощью всего 64 безопасных текстовых символов (A–Z, a–z, 0–9, + и /). Преобразование изображения в Base64 позволяет встроить его прямо в HTML, CSS, JSON или шаблон письма в виде data URI, вместо ссылки на отдельный файл:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…Часть до запятой задаёт MIME-тип, а остальное — закодированный файл. Браузеры обрабатывают такую строку так же, как URL изображения, поэтому она работает в <img src>, CSS-свойстве background-image, <link rel="icon"> и в коде canvas.
Накладные расходы около 33%
Base64 записывает каждые 3 байта файла четырьмя символами, поэтому закодированная строка примерно на 33% больше оригинала (плюс короткий префикс data:). Gzip или Brotli на сервере compensate часть этого объёма, но основные издержки структурные: встроенное изображение загружается заново вместе с каждым HTML- или CSS-файлом, в котором оно есть, не кэшируется отдельно и утяжеляет таблицу стилей, которая блокирует отрисовку страницы.
Когда встраивать изображения, а когда нет
- Подходит: небольшие иконки, индикаторы загрузки и UI-спрайты размером до нескольких КБ, картинки в HTML-подписях писем, где внешние изображения блокируются, одиночные HTML-отчёты и тестовые данные в коде.
- Не подходит: фотографии, hero-изображения и всё, что больше примерно 10–20 КБ. Такие файлы лучше отдавать обычными файлами с кэшированием, сжатием и
loading="lazy". Сначала уменьшите их с помощью сжатия изображений.
SVG: URL-кодирование лучше Base64
SVG уже является текстом, поэтому Base64 здесь вообще не нужен. URL-кодированная data URI, например data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'…, экранирует только несколько символов (<, >, #, %) и обычно на 20–30% короче варианта в Base64. Кроме того, она остаётся читаемой и лучше сжимается gzip. Этот инструмент предлагает оба варианта для SVG-файлов. Если вы часто работаете с SVG в CSS, пригодится и инструмент SVG в CSS.
Декодирование Base64 обратно в изображение
Вставьте полную data URI или просто строку Base64 (работает и base64url с - и _). Инструмент определяет реальный формат по сигнатуре файла — PNG, JPEG, GIF, WebP, AVIF, SVG, ICO или BMP — показывает превью с размерами и позволяет скачать файл с правильным расширением. Если в Base64 закодировано не изображение, воспользуйтесь универсальным кодировщиком и декодером Base64.
Также ищут как: data uri, svg в data uri, встроить картинку css base64.
Инструменты, которые хорошо сочетаются с Изображение в Base64
- Генератор фавикона — Создайте полный набор фавикона из логотипа, буквы или эмодзи: favicon.ico с несколькими размерами, Apple touch icon, иконки Android/PWA, webclip для Webflow, веб-манифест и HTML-теги для вставки.
- Кодирование и декодирование URL — Выполняйте процентное кодирование текста для безопасного использования в URL, декодируйте закодированные строки обратно в читаемый текст и разбирайте любой URL на части и параметры запроса.
- Генератор штрихкодов — Создавайте сканируемые штрихкоды для товаров, склада, доставки и библиотек.
- Сканер QR-кодов — Наведите камеру на QR-код или перетащите сюда изображение или скриншот, на котором он есть.
Часто задаваемые вопросы
Почему строка Base64 больше моего изображения?
Как использовать изображение в Base64 в CSS?
url(): background-image: url("data:image/png;base64,…");. CSS-сниппет выше готов к вставке — достаточно лишь переименовать селектор.Ускоряет ли встраивание изображений в Base64 загрузку страницы?
Безопасно ли конвертировать здесь личные изображения?
Почему вставленная строка Base64 выдаёт ошибку?
url() и кавычки.