data:image/xxx;base64,..., чтобы вы могли встраивать изображение прямо в HTML, CSS или JSON без необходимости внешнего хостинга.Обзор
Изображение → 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.Конфиденциальность и безопасность
Чтение и кодирование изображений полностью выполняются локально в вашем браузере и не отправляются на сервер, поэтому инструмент безопасен для работы со скриншотами, макетами дизайна или продуктовыми фотографиями, содержащими чувствительное содержимое.