Конвертер зображень у Base64

Що робить інструмент

Цей інструмент перетворює зображення на текст Base64 і готовий до вставлення data URI. Data URI вбудовує зображення безпосередньо в HTML, CSS, Markdown, JSON чи лист, тож сторінці потрібно на один HTTP-запит менше, а фрагмент працює без розміщення окремого файлу. Працює й у зворотний бік: вставте Base64 чи data URI, щоб переглянути зображення й зберегти його.

Як користуватися

1. Перетягніть зображення в зону для файлів, натисніть Вибрати зображення або Приклад, щоб завантажити SVG-логотип.
2. У перегляді показано зображення з його типом, розміром файлу, розміром Base64 і розмірами в пікселях.
3. Виберіть Формат виводу:
   • Data URI: data:image/png;base64,… — для атрибутів src і JSON.
   • Лише Base64: голий рядок, за бажанням із перенесенням кожні 76 символів для MIME і PEM.
   • CSS background: повне оголошення background-image: url("…");.
   • HTML <img>: тег зображення з data URI в src.
   • Markdown: ![image](data:…).
4. Скопіюйте результат. Щоб натомість декодувати, вставте Base64 чи data URI в поле вхідних даних і натисніть Зберегти зображення.

Приклад

PNG розміром 2×1 піксель перетворюється на:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAADUlEQVR4nGP4zwAE/wEHAAH/4iOeWQAAAABJRU5ErkJggg==

У CSS:

.dot { background-image: url("data:image/png;base64,iVBORw0KGgo…"); }

Коли вбудовувати зображення

Вбудовування корисне для маленьких зображень, що часто використовуються: іконок, крихітних фонів, індикаторів завантаження й підписів у листах. Для фото й великої графіки воно погано підходить: Base64 додає приблизно третину до розміру, зображення не кешується окремо від сторінки чи таблиці стилів, а ще воно затримує розбір решти файлу. Практичне правило: тримайте вбудовані зображення в межах кількох кілобайтів. Для SVG data URI з відсотковим кодуванням (data:image/svg+xml,…) часто менший за Base64, і інструмент приймає обидва варіанти.