Изображение в Base64
Перетащите любую картинку в этот конвертер изображений в Base64, чтобы получить data URI и готовые фрагменты для HTML, CSS и JavaScript. Встроенные изображения экономят HTTP-запросы для маленьких иконок и незаменимы для однофайловых HTML-страниц, шаблонов писем и офлайн-приложений.
Как конвертировать Изображение в Base64 онлайн
- Выберите файл изображения или вставьте URL изображения.
- Выберите формат результата: data URI,
<img>, фон CSS, favicon, JSON и другие. - Нажмите Кодировать изображение в Base64.
- Просмотрите изображение и скопируйте код.
Другие конвертеры: Изображение в Base64
Форматы результата
Выберите, в каком виде выдать результат. Конвертер может вернуть:
- txt: только строка Base64, готовая для вставки в код, поле базы данных или запрос к API.
- uri: полный URI
data:, который можно вставить в адресную строку браузера или использовать везде, где принимается URL. - html img: тег
<img>с data URI вsrc. - css background image: правило CSS с
background-image: url(data:...). - html favicon: тег
<link rel="icon">для встроенного favicon. - html hyperlink: ссылка
<a>, которая скачивает или открывает встроенный файл. - html iframe:
<iframe>, отображающий содержимое прямо на странице. - javascript image: JavaScript, создающий объект
Image. - javascript popup: JavaScript, открывающий содержимое в новом окне.
- json: объект JSON с именем файла, MIME-типом и данными.
- xml: элемент XML с данными внутри секции CDATA.
Когда стоит встраивать изображения в Base64?
Встраивайте небольшие изображения (примерно до 5–10 КБ): иконки, логотипы и заглушки — это экономит запросы. Не встраивайте большие фотографии: они утяжеляют HTML/CSS, не кешируются отдельно и задерживают отрисовку. Подробнее читайте в статье о data URI.
Часто задаваемые вопросы
Как конвертировать изображение в Base64?
Выберите изображение, укажите формат «Data URI» или «<img>» и нажмите «Кодировать изображение в Base64». Скопируйте результат в HTML или CSS.
Какие форматы изображений поддерживаются?
Любой формат, который читает ваш браузер: PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO, AVIF, TIFF и другие.
Как использовать изображение в Base64 в HTML?
Поместите data URI в атрибут src: <img src="data:image/png;base64,iVBORw0KGgo..." alt="">.
Комментарии (0)
Есть вопросы, идеи или нашли ошибку в «Изображение в Base64»? Оставьте комментарий, оцените инструмент или ответьте другим.
Комментариев пока нет. Станьте первым, кто поделится отзывом!