tigtools

Зображення в Base64

Перетворюйте файли PNG, JPEG, WebP, GIF, SVG або ICO на текст Base64 для вставлення в HTML, CSS чи JSON або декодуйте Base64 назад у зображення. Файл не залишає ваш браузер.

Працює у вашому браузері Без реєстрації

Напрямок

або перетягніть сюди (до 10 MB). Файл залишається на вашому пристрої.

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

  1. Виберіть Image → Base64 і додайте файл зображення або виберіть Base64 → Image, щоб виконати зворотне перетворення.
  2. Виберіть потрібний формат результату: URL даних, звичайний Base64, тег HTML img, правило CSS background-image або Markdown.
  3. Скопіюйте результат і вставте його у свій код, шаблон листа або JSON.
  4. Щоб декодувати зображення, вставте URL даних або звичайний Base64. Зображення з’явиться в попередньому перегляді, і його можна буде завантажити.

Як це працює

Base64 подає двійкові дані за допомогою 64 друкованих символів, тож зображення можна вставити безпосередньо в текстові формати. URL даних містить тип медіафайлу на початку, наприклад data:image/png;base64, а далі — закодовані байти. Браузери приймають URL даних усюди, де можна вказати URL зображення: в атрибуті src тега img, у CSS url() або в посиланні на зображення в SVG.

Закодований текст завжди приблизно на третину більший за оригінальний файл (4 символи на кожні 3 байти). Вбудовування маленьких піктограм і зображень-заповнювачів може заощадити окремий мережевий запит, але вбудовані дані не кешуються окремо й завантажуються знову з кожною сторінкою або таблицею стилів, у якій містяться. Тому такий спосіб рідко виправданий для файлів розміром понад кілька кілобайтів. Багато поштових клієнтів блокують або видаляють зображення в URL даних, тож перевірте їх перед використанням у розсилках.

Файл кодується побайтно: його не стискають повторно, а вбудовані метадані (наприклад, EXIF) зберігаються. Для декодування інструмент приймає повний URL даних, звичайний Base64, Base64 для URL-адрес і текст, скопійований разом із обгорткою CSS url(…). Тип зображення визначається за декодованими байтами, а не за вказаною міткою.

Приклади

Маленька піктограма в таблиці стилів

PNG-піктограма розміром 600 байтів перетворюється на рядок Base64 із 800 символів. Вивід CSS містить правило background-image, яке можна вставити в клас без розміщення окремого файлу на сервері.

Зображення з відповіді API

API повертає поле JSON, наприклад "iVBORw0KGgoAAAANSUhEUg…". Вставте його в режимі Base64 → Image, щоб переглянути зображення, перевірити його розмір і завантажити як PNG.

Логотип SVG у HTML

Кодування SVG створює URL data:image/svg+xml;base64, який працює в тезі img. Для SVG нескомпресована розмітка часто коротша за Base64, тож можна вставити безпосередньо сам SVG.

Поширені запитання

Чому версія Base64 більша за моє зображення?

Для збереження 3 байтів Base64 використовує 4 текстові символи, збільшуючи розмір приблизно на 33% плюс кілька символів для префікса URL даних. Стиснення Gzip або Brotli на вебсервері зменшує різницю, але не усуває її.

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

Ні. Кодуються точні байти файлу, зокрема всі метадані. Щоб скоротити рядок, спочатку стисніть зображення або змініть його розмір.

Чим URL даних відрізняється від звичайного Base64?

Звичайний Base64 — це лише закодовані байти. URL даних містить префікс, наприклад data:image/jpeg;base64,, який повідомляє браузеру тип файлу, тож його можна безпосередньо використовувати як джерело зображення.

Чи є обмеження на розмір?

Тут можна кодувати файли розміром до 10 MB. Дуже довгі рядки можуть сповільнювати роботу текстових полів і редакторів, а такі великі URL даних непрактично використовувати на вебсайтах.

Конфіденційність

Кодування та декодування відбуваються у вашому браузері. Зображення й текст Base64 не завантажуються на сервер, не зберігаються та не додаються до аналітики.