Встраивайте изображения прямо в код
Иногда изображение нужно использовать без отдельного файла: как иконку в таблице стилей, логотип в однофайловом HTML-отчете, заглушку в ответе JSON API, картинку в Markdown-документе или фон в библиотеке компонентов. Этот конвертер кодирует любое изображение в Base64 и подготавливает его для быстрой вставки — в виде Data URI, чистого Base64, CSS-свойства background-image, HTML-тега <img> или синтаксиса Markdown.
Возможности
- Все популярные форматы изображений: PNG, JPG, GIF, WebP, AVIF, SVG, ICO и другие.
- Пять форматов вывода для различных задач.
- Сравнение размеров исходного файла и закодированного текста.
- Предпросмотр изображения на шахматном фоне для проверки прозрачности.
- Копирование в один клик.
- Конфиденциально: файл никогда не покидает ваш браузер.
Примеры результата
| Формат | Как выглядит |
|---|---|
| Data URI | data:image/png;base64,iVBORw0KGgo… |
| Base64 | iVBORw0KGgo… |
| CSS | background-image: url("data:image/png;base64,…"); |
| HTML | <img src="data:image/png;base64,…" alt="logo"> |
| Markdown |  |
Следите за размером встроенных изображений
Встроенные изображения не могут кэшироваться отдельно и скачиваются заново вместе с каждой страницей или таблицей стилей, которая их содержит. Как правило, встраивать стоит только картинки размером не более нескольких килобайт. Сначала уменьшите размер файлов с помощью инструмента Сжать изображение, конвертируйте векторные иконки через SVG в PNG, если требуется растр, или закодируйте другие файлы и текст с помощью кодировщика Base64.