data:image/xxx;base64,..., чтобы вы могли встраивать изображение прямо в HTML, CSS или JSON без необходимости внешнего хостинга.встроить favicon как base64 в css inline
Встроить favicon как base64 в css inline. Этот инструмент обрабатывает этот и связанные сценарии — включая data uri base64 в изображение конвертер загрузки и конвертировать ico в data uri для html link тега — полностью в браузере, без регистрации и загрузки файлов.
конвертировать svg в data uri для css фона
Конвертировать svg в data uri для css фона. Работаете ли вы с данными API, конфигурационными файлами или логами, всё обрабатывается локально. Такие задачи, как конвертировать ico в data uri для html link тега, также поддерживаются.
webp в base64 data uri для lazy загрузки
Webp в base64 data uri для lazy загрузки. Вы также можете использовать инструмент для base64 image кодировщик для встраивания email html и конвертировать маленький логотип png в base64 для markdown. Результаты появляются мгновенно — без обращения к серверу.
конвертировать gif в base64 для подписи email inline
Конвертировать gif в base64 для подписи email inline. Это один из многих поддерживаемых сценариев. Вы также можете конвертировать маленький логотип png в base64 для markdown, не покидая страницу и не создавая аккаунт.
jpg в base64 для тела json api запроса
Jpg в base64 для тела json api запроса. Вся обработка происходит на вашем устройстве, гарантируя конфиденциальность. Связанные возможности включают data uri base64 в изображение конвертер загрузки и конвертировать ico в data uri для html link тега.
Обзор
Изображение → Base64 превращает локальное изображение (PNG, JPG, GIF, SVG, WEBP и т. д.) в Data URL, закодированный в Base64, формы
Как пользоваться инструментом
Шаг 1 — кликните на область для перетаскивания, чтобы открыть выбор файла, или просто перетащите изображение на неё. Шаг 2 — инструмент считывает изображение и преобразует его в Base64 Data URL; вы увидите превью, имя файла, исходный размер и длину строки Base64. Шаг 3 — нажмите «Копировать DataURL», чтобы поместить всю строку в буфер обмена; вставьте её в CSS
background: url('...'), HTML <img src="..."> или поле JSON. Шаг 4 — нажмите «Очистить», чтобы сбросить и загрузить другое изображение.Типичные сценарии
Фронтенд-разработчики сокращают количество HTTP-запросов, встраивая маленькие иконки (favicon, иконки кнопок) в CSS; встраивание изображений в email-шаблоны, чтобы получатели видели их без внешних ссылок; конвертация SVG в Data URL для использования как CSS-фона; поставка изображений внутри Electron-приложений или расширений Chrome; встраивание изображений в Markdown-документы для избавления от зависимостей от путей; отправка изображений как значений JSON-полей в API.
Технические детали
Конвертация использует нативный API браузера
FileReader.readAsDataURL. Строка Base64 примерно в 4/3 больше исходного файла (33% накладных расходов). Data URL автоматически определяет MIME-тип (image/png, image/jpeg и т. д.). Держите размер изображений в пределах примерно 100 KB — большой Data URL раздувает HTML/CSS и ухудшает производительность первой отрисовки. Для SVG URL-кодирование обычно меньше, чем Base64.Конфиденциальность и безопасность
Чтение и кодирование изображений полностью выполняются локально в вашем браузере и не отправляются на сервер, поэтому инструмент безопасен для работы со скриншотами, макетами дизайна или продуктовыми фотографиями, содержащими чувствительное содержимое.