В чём разница между Data URL и сырым Base64?

Data URL несёт префикс data:image/png;base64, и может быть вставлена прямо в CSS background-image, HTML img src или Markdown. Сырой Base64 — это просто закодированная нагрузка, подходящая для переменных кода или нагрузок API. Этот инструмент копирует любой режим в один клик.

Делает ли Base64 изображение больше?

Да. Base64 кодирует 3 байта как 4 символа, поэтому нагрузка растёт примерно на 33% и не может кэшироваться браузером отдельно. Используйте только для крошечных иконок и заглушек в несколько КБ; реальные изображения должны оставаться сжатыми файлами.

Как использовать конвертированный код?

В CSS: background-image: url("вставьте DataURL"). В HTML: . В Markdown поместите DataURL в скобки синтаксиса изображения. В режиме сырого Base64 добавьте префикс data:image/png;base64, сами (замените png на реальный формат).

Загружается ли изображение на сервер?

Нет. Кодирование выполняется локально встроенным FileReader браузера — изображение никогда не покидает ваше устройство. Вы можете проверить офлайн.

Почему лимит 10 МБ?

Текст Base64 примерно в 1,33 раза больше оригинала. Изображение 10 МБ производит строку более 13 МБ, которая может заморозить ваш редактор при копировании или вставке. Сначала сожмите большие изображения до нескольких сотен КБ на главной странице.

Изображение в Base64 - Конвертация в DataURL онлайн

Pixvise

Сжать сейчас

Изображение в Base64

Конвертируйте маленькие иконки и изображения в готовые для встраивания DataURL или сырой текст Base64, копируемые в ваш код в один клик. Конвертация выполняется локально в вашем браузере — без загрузки.

Режимы DataURL / сырой Base64Локальная конвертация · без загрузкиДо 10 МБ каждое

Нажмите для выбора или перетащите изображения сюда

Можно также вставить скриншоты

JPGPNGWebPAVIFGIFSVG

Макс. 10 МБ на изображение; кодирование локальное, изображение не загружается

Base64 увеличивает размер на ≈33%; используйте только для иконок и inline

Когда встраивать изображения как Base64

Встраивание Base64 превращает изображение в текст. Это подходит для: крошечных иконок в несколько КБ (экономит HTTP-запрос), HTML-писем (многие клиенты блокируют удалённые изображения), распространения HTML одним файлом (демо, офлайн-документы) и случаев, когда вашему canvas или коду нужны данные изображения напрямую.

Но это не универсальный ответ: размер растёт примерно на 33%, данные не могут кэшироваться отдельно, а длинные строки замедляют парсинг HTML. Для реальных изображений страницы правильный ход — сжать до файлов WebP/AVIF — та же чёткость, доля байтов. Сначала сожмите, потом решайте о встраивании; так вы получите и производительность, и удобство.

Частые вопросы

Связанные инструменты

Компрессор изображений (главная)PNG в WebP Сжать до 50КБ API для разработчиков