§

Перетягніть зображення або натисніть для вибору

PNG, JPEG, GIF, WebP, SVG, BMP — до 30 МБ. По одному зображенню.

Зображення зчитується та кодується повністю на вашому пристрої — воно ніколи не залишає браузер.

Українські фронтенд-команди вдаються до Data URI там, де HTTP-запит обходиться дорожче за роздуття Base64: іконки в CSS-модулях для Next.js, логотипи в PDF-звітах, заглушки для PWA, які мають працювати без мережі. HTML-розсилки через SendPulse та eSputnik покладаються на вбудовані зображення, аби логотип відображався навіть коли поштовий клієнт блокує зовнішній контент. Вимоги ДСТУ та внутрішні регламенти щодо захисту персональних даних роблять браузерне кодування особливо доречним: вихідне зображення — скриншот, скан документа чи внутрішня схема — жодного разу не виходить за межі пристрою, що спрощує аудит безпеки та виключає ненавмисне розкриття чутливих відомостей.

// Схожі інструменти

./base64-encoder
Кодувальник Base64
Кодуйте текст та файли у формат Base64.
→
./image-format-converter
Конвертер форматів зображень
Конвертуйте PNG, JPEG та WebP локально — без завантажень, з підтримкою пакетів.
→
./image-compressor
Стиснення зображень
Стискайте зображення JPEG, PNG та WebP локально — за якістю чи цільовим розміром, без завантажень.
→
./
Всі інструменти
Перегляньте повний набір онлайн-інструментів Ultim8Soft.
→

Як працює конвертація зображення в Base64

Вся конвертація виконується у браузері за допомогою File API та вбудованої функції btoa — жодна бібліотека кодеків не завантажується, і жоден сервер не бачить зображення. Ось весь процес від початку до кінця:

  1. Ви перетягуєте або вибираєте зображення. Браузер читає його як Blob з локального диска, жодного разу не копіюючи байти на сервер.
  2. Файл зчитується шматками по 1 МБ, байти кожного шматка додаються до бінарного рядка. Такий підхід не дає великим зображенням переповнити стек викликів JavaScript.
  3. Бінарний рядок передається у btoa, яка відображає кожні три байти на чотири символи Base64 з алфавіту A–Z, a–z, 0–9, плюс /.
  4. MIME-тип файлу (image/png, image/jpeg тощо) читається з об'єкта File і додається на початку як префікс data:, формуючи повний URI виду data:image/…;base64,….
  5. Сторінка збирає чотири результати з цього URI — повний Data URI, сирий Base64 без префікса, готовий до вставки тег і фрагмент CSS background-image — кожен із власною кнопкою копіювання.

Навіщо кодувати зображення як Data URI?

  • Вбудовування невеликого логотипу або іконки як Data URI прибирає окремий мережевий запит, тому сторінка або лист відображають перший кадр трохи швидше.
  • Сторінка або таблиця стилів із вбудованими зображеннями є самодостатньою. Вона працює офлайн, і її можна переносити без окремої папки з ресурсами.
  • Багато поштових клієнтів типово блокують зовнішні зображення. Вбудуйте логотип як Base64 — і він з'явиться одразу при відкритті листа, без зовнішнього запиту.
  • Кодування відбувається повністю у браузері, тому чутливі зображення ніколи не потрапляють на сторонній сервер. Це стосується скриншотів, сканів документів і внутрішніх схем.

Типові сценарії використання Base64-зображень

Data URI застосовується скрізь, де зображення достатньо мале, щоб окремий запит коштував дорожче, ніж ~33% роздуття від Base64. Три паттерни трапляються постійно:

  • Вбудовані CSS-іконки: спрайт або іконка 1–2 КБ, додана до таблиці стилів як background-image: url(data:…), щоб правило було повністю самодостатнім.
  • Підписи та розсилки: логотип, вбудований як з data URI src, відображається навіть коли клієнт блокує зовнішні зображення.
  • Вбудовування у збирачах: бандлери Webpack і Vite автоматично вбудовують ресурси нижче порогового розміру, а цей інструмент дає змогу подивитися, як саме виглядає результат.

Як виглядає Base64-зображення?

Візьмемо крихітний прозорий PNG розміром 1×1 піксель. Його необроблені байти займають лише 67 байт, але в кодованому вигляді це рядок iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII=, а повний Data URI виглядає як data:image/png;base64,iVBORw0KGgo…. Зверніть увагу: закодована форма приблизно на третину більша за оригінал. Це і є компроміс за можливість вбудовувати бінарні дані прямо в текст.

Чи завантажується моє зображення кудись?

Ні. Конвертація використовує File API браузера та нативну функцію btoa для кодування зображення повністю на вашому пристрої. Переконайтеся самостійно: відкрийте інструменти розробника, перейдіть на вкладку «Мережа» і сконвертуйте зображення — ви побачите лише запити завантаження сторінки та можливо реклами. Нічого схожого на зображення не надсилається на сервер, що робить інструмент безпечним для скриншотів, документів і внутрішніх схем.

Чому Base64-результат більший за вихідне зображення?

Base64 представляє кожні три байти бінарних даних чотирма ASCII-символами, тому закодований текст приблизно на 33% більший за вихідний файл. Індикатор розміру Data URI на цій сторінці показує точний збільшений розмір. Саме тому Data URI доречні лише для невеликих зображень — вбудовування фото 2 МБ роздме ваш HTML або CSS значно більше, ніж обійшовся б окремий запит. Практичне правило: вбудовуйте зображення до ~4 КБ, а для всього більшого використовуйте посилання.

Які формати зображень можна конвертувати?

Працює будь-який формат, який браузер розпізнає як зображення, оскільки інструмент читає сирі байти, а не декодує картинку. Це PNG, JPEG, GIF, WebP, SVG і BMP. MIME-тип читається безпосередньо з файлу, тому префікс data: завжди відповідає реальному формату — JPEG дає data:image/jpeg, а SVG — data:image/svg+xml. SVG заслуговує окремої примітки: він уже є текстом, тому для SVG URL-encoded Data URI часто менший за версію Base64, хоча цей інструмент видає форму Base64 для однорідності.

Скиньте зображення, скопіюйте Data URI або потрібний фрагмент і вставте в HTML, CSS або шаблон листа. Кожен байт залишається на вашому пристрої. Без завантаження на сервер, без реєстрації, без серверних запитів.