Изображение → Base64
Кодируйте изображение в Base64 data URI для CSS или HTML.
- Мгновенно
- Бесплатно
- Приватно (обработка локально)
- Без регистрации
- Размер файла
- —
- После кодирования
- —
Большое изображение: такой data URI утяжеляет страницу. Свыше нескольких десятков КБ лучше использовать обычный файл.
Обработка локально: изображение не покидает устройство.
Кодируйте изображение в Base64 за две секунды
Data URI позволяет встроить изображение прямо в код, без внешнего файла. Перетащите изображение, выберите формат вывода — чистый data URI, CSS-свойство или HTML-тег — и скопируйте результат.
-
Перетащите изображение
PNG, JPG, WebP, GIF, SVG… принимается любой формат и сохраняется как есть: без перекодирования и потерь.
-
Выберите вывод
Чистый data URI, готовый к вставке CSS background-image или полный HTML-тег <img>.
-
Скопируйте
Один клик по «Копировать» — и код в буфере обмена, с размерами до и после.
Когда использовать Base64 (а когда нет)
| Ситуация | Data URI? | Почему |
|---|---|---|
| Иконка или логотип < 10 КБ | Да | Экономит HTTP-запрос, мгновенный показ |
| HTML-письмо | Да | Внешние изображения часто блокируются по умолчанию |
| Фото или баннер > 100 КБ | Нет | +33 % веса, нет отдельного кеша, медленнее отрисовка |
| Изображение на нескольких страницах | Нет | Обычный файл кешируется один раз |
Совет: для векторных иконок встроенный SVG (вставленный прямо в HTML) часто легче и чётче, чем его Base64-версия.
Частые вопросы
Что такое data URI?
Это URL, который содержит данные файла напрямую, в виде data:image/png;base64,iVBOR… Его можно использовать везде, где ожидается URL изображения: атрибут src, CSS background-image, favicon…
Зачем кодировать изображение в Base64?
Чтобы встроить изображение прямо в HTML, CSS или JSON — без отдельного файла и лишнего HTTP-запроса. Удобно для маленьких иконок, HTML-писем и автономных прототипов.
Увеличивает ли Base64 размер файла?
Да, примерно на 33 % по сравнению с исходным бинарным файлом. Это цена текстового представления. Сжатие gzip/brotli на сервере частично компенсирует это, но для больших изображений обычный файл эффективнее.
До какого размера это оправдано?
Как правило, используйте data URI для изображений меньше нескольких десятков КБ (иконки, логотипы, мелкие узоры). Сверх этого они раздувают страницы, мешают отдельному кешированию и замедляют отрисовку.
Отправляется ли моё изображение куда-либо?
Нет. Чтение и кодирование выполняет FileReader API вашего браузера. Изображение никогда не покидает устройство.