Конвертация изображения в Base64 (data URI)

Импортируйте изображение и сразу получите строку data:image/...;base64,... готовую для вставки в CSS или HTML, чтобы добавить небольшую иконку без дополнительного сетевого запроса.

Пример:

Как это работает

Хотите встроить небольшую иконку, логотип или пиктограмму прямо в CSS-файл (например, в background-image) или в HTML, без отдельного файла и дополнительного сетевого запроса? Импортируйте изображение: оно будет закодировано в строку Base64 с правильным префиксом data:image/png;base64, (или jpeg, gif, webp... в зависимости от обнаруженного формата), которую можно сразу использовать как значение URL в вашем коде.

Когда использовать изображение в Base64 вместо отдельного файла?

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

Определяется ли формат изображения автоматически?

Да. Инструмент анализирует первые байты импортированного файла, чтобы определить его реальный формат (PNG, JPEG, GIF, WebP...) и подставляет его в префикс сгенерированной строки, не полагаясь на расширение имени файла.

Обработка происходит полностью локально в вашем браузере (WebAssembly) — ваше изображение никогда не отправляется на сервер.