Изображение в Base64 — Бесплатно Онлайн
Конвертируйте любое изображение в строку Base64 для CSS или HTML.
Who uses the Изображение в Base64?
- Фронтенд-разработчики, встраивающие маленькие значки в CSS для устранения дополнительных HTTP-запросов.
- Разработчики email-рассылок, встраивающие изображения логотипов в HTML-письма, блокирующие внешние ресурсы.
- Интеграторы API, отправляющие данные изображений в телах JSON-запросов, требующих строкового кодирования.
How the Изображение в Base64 works
Загрузите файл изображения с помощью выбора файла или перетащите его в область инструмента.
Строка Base64 генерируется мгновенно в текстовой области вывода.
Нажмите «Копировать Base64», чтобы скопировать полный Data URI (data:image/png;base64,...) в буфер обмена для использования в атрибутах src HTML или фонах CSS.
Если вам нужен только необработанный Base64 без префикса URI данных, вручную удалите всё до первой запятой включительно перед использованием.
Tips & tricks
- Кнопка «Копировать» всегда копирует полный data URI (с префиксом «data:image/...;base64,») — отдельной кнопки только для необработанной строки Base64 нет.
- Base64 добавляет около 33% к размеру файла — этот инструмент лучше всего подходит для маленьких значков и изображений менее 10 КБ, а не для больших фотографий.
- За раз можно обработать только одно изображение — пакетной конвертации нескольких файлов нет.
- Текстовая область вывода показывает полный Data URI в виде обычного текста — вы также можете вручную выделить и скопировать только часть его, если не хотите использовать полный вывод кнопки «Копировать».
Frequently Asked Questions
Зачем встраивать изображение как Base64 вместо использования файла изображения?
Встраивание изображений в виде Base64 в HTML или CSS устраняет HTTP-запрос для этого изображения, что может улучшить производительность для маленьких значков и критически важных изображений в верхней части страницы. Это особенно полезно в HTML-письмах, где внешние изображения могут блокироваться.
Насколько изображение Base64 больше по сравнению с оригинальным файлом?
Кодирование Base64 добавляет примерно 33% накладных расходов. PNG размером 10 КБ становится примерно 13,3 КБ в Base64. Для больших изображений эти накладные расходы перевешивают выгоду от экономии HTTP-запроса — используйте Base64 только для изображений менее 10 КБ.
Копирует ли кнопка «Копировать» только необработанный Base64, или полный data URI?
Кнопка «Копировать Base64» всегда копирует полный data URI, включая префикс «data:image/...;base64,» — отдельной кнопки только для необработанной строки Base64 нет. Если вам нужна только необработанная строка (например, для полезной нагрузки API), скопируйте её и вручную удалите всё до первой запятой включительно.
Как использовать изображение Base64 в теге img HTML?
Используйте полный Data URI в качестве src: <img src="data:image/png;base64,iVBORw0KGgo..." alt="icon">. Браузер декодирует и отображает изображение встроенно без каких-либо внешних запросов.
Как использовать изображение Base64 в CSS?
Используйте его как фон: background-image: url("data:image/svg+xml;base64,..."). Это особенно эффективно для значков SVG, так как сохраняет стили автономными.
Какие форматы изображений можно преобразовать в Base64?
Кодируется любой формат, который ваш браузер может прочитать как файл: JPG, PNG, GIF, WebP и другие. Префикс выходного data URI отражает фактический MIME-тип исходного файла.
Is my data safe when using the Изображение в Base64?
Completely safe. The Изображение в Base64 processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
What image formats does the Изображение в Base64 support?
The Изображение в Base64 works with common image formats supported by your browser, including JPEG, PNG, WebP, and GIF. SVG support varies by tool. No format conversion plugin or driver is needed.
Does the Изображение в Base64 work with large image files?
Yes. The Изображение в Base64 processes files entirely in your browser using the Canvas API. Very large files (over 20 MB) may take a few extra seconds on older or lower-powered devices. Closing other tabs can free up memory for better performance.