Зображення в 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»? Залиште коментар, оцініть інструмент або дайте відповідь іншим.
Коментарів ще немає. Залиште свій відгук першими!