UltKit
Зображення11
Конвертер зображеньСтиснути зображенняЗмінити розмір зображенняОбрізати зображенняЗображення в PDFФото на паспортЗображення в SVGУсі інструменти: Зображення →
PDF13
Стиснути PDFКонвертер PDFPDF у зображенняОб’єднати PDFРозділити PDFРозблокувати PDFЗахистити PDFУсі інструменти: PDF →
Документи й дані7
Конвертувати в PDFКонвертер документівЗображення в текст (OCR)Зображення в ExcelКонвертер данихКонвертер електронних книгУсі інструменти: Документи й дані →
Відео6
Конвертер відеоСтиснути відеоВідео в аудіоВідео в GIFОбрізати відеоАудіо у відеоУсі інструменти: Відео →
Аудіо4
АудіоконвертерСтиснути аудіоОбрізати аудіоАудіо в текстУсі інструменти: Аудіо →
Інші інструменти22
Генератор QR-кодівЗаархівувати в ZIPРозпакувати архів онлайнКонвертер часових поясівКонвертер одиницьГенератор паролівЛічильник слівВибір кольоруУсі інші інструменти →
БлогЯк це працює

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

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

Конвертер даних

або перетягніть Файли CSV, TSV, TXT … сюди ·

До 95 МБ на файл· До 20 файлів· Видаляються через 30 хв

Результат

Файли обробляються на наших серверах і видаляються через 30 хв.

Як користуватися цим інструментом

  1. 1

    Додайте зображення

    Перетягніть файли PNG, JPG, GIF, WebP або SVG в область завантаження: до 20 за раз, кожен до 95 MB.

  2. 2

    Залиште або приберіть префікс

    Параметр Префікс Data URI увімкнено, тому результат починається з data:image/png;base64, або з відповідного типу. Вимкніть його в розділі Додаткові налаштування, якщо API потрібен чистий рядок Base64.

  3. 3

    Конвертуйте та скопіюйте

    Натисніть Конвертувати у Base64 text і завантажте .txt-файл для кожного зображення, готовий для вставки у ваш код.

Завантажте зображення й натисніть Конвертувати у Base64 text. Ви отримаєте файл, закодований звичайними символами, що починається з data:image/…;base64, тож його можна одразу вставляти в img src або CSS url(). Саме зображення не змінюється.

Коли зображення в Base64 стане в пригоді

Base64 визначено в RFC 4648 (2006): кожні 3 байти двійкових даних відображаються на 4 символи з алфавіту з 64 знаків A–Z, a–z, 0–9, + і /. Результат проходить будь-який канал, створений для тексту. Схема data URI, описана Ларрі Масінтером як RFC 2397 у 1998 році, дає змогу браузеру сприймати цей текст як файл.

Фронтенд-розробники вбудовують малі іконки, індикатори завантаження й заглушки, щоб сторінка відображалась без додаткових запитів. Бекенд-розробники надсилають зображення всередині JSON, бо багато API, зокрема сервіси розпізнавання зображень і OCR, приймають зображення як поле Base64. Тестувальники зберігають тестові дані в коді, а ті, хто робить одно­файлові HTML-звіти або нотатки Markdown, вбудовують скриншоти, щоб файл лишався самодостатнім під час пересилання поштою чи архівування.

Як виглядає результат у Base64

Прозорий PNG 1 × 1 (68 байт) як data URI в тегу img
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR4nGNgAAIAAAUAAXpeqz8AAAAASUVORK5CYII=" width="1" height="1" alt="Прозорий піксель">

Файл іконки PNG

24 KB

типовий набір іконок панелі інструментів, 96 × 96 px

+33% до розміру, якість без змін

Текст Base64

32 KB

4 символи на 3 байти плюс префікс

ANY I

Будь-яке зображення

Цей інструмент приймає поширені формати зображень, зокрема JPG, PNG, WebP, HEIC, GIF, BMP і TIFF. Формат визначається з файлу автоматично, тож знати тип зображення не потрібно.

Конвертер Any image

BASE64

Текст у кодуванні Base64

Base64 — це кодування, визначене в RFC 4648, яке перетворює будь-які двійкові дані на рядок із 64 безпечних текстових символів. Його використовують, щоб вбудовувати зображення в HTML і CSS як data URI, додавати файли до електронних листів і передавати двійкові дані в JSON або XML. Кодування повністю оборотне, але збільшує дані приблизно на 33%. Base64 не є шифруванням і не забезпечує захисту; його може декодувати будь-хто.

Стиснення
Без втрат
Прозорість
–
Анімація
–
Рік появи
–
Конвертер BASE64

Зображення стають текстом Base64, коли їх потрібно передати всередині чогось, що несе лише текст: файлу HTML або CSS без окремого запиту, поля JSON у виклику API, тестових даних або одно­файлового звіту.

Коли вбудоване зображення допомагає сторінці, а коли шкодить

Вбудовування економить запит, що було найважливіше за HTTP/1.1, коли браузери відкривали лише кілька з’єднань на сайт. Із мультиплексуванням HTTP/2 і HTTP/3 додаткові малі запити дешеві, тож користь зменшується, а недоліки лишаються: закодоване зображення не можна кешувати окремо, воно завантажується знову щоразу, коли змінюється HTML або CSS, і сповільнює розбір файлу, в якому лежить.

Розумне правило: вбудовуйте лише зображення на кілька кілобайтів, що є на кожній сторінці, як-от логотип чи спрайт іконок, а решту віддавайте файлами. Фото майже ніколи не варто вбудовувати. Якщо вам насправді потрібен інший тип файлу, а не текст, з цим впорається конвертер зображень.

Переваги зображення в Base64

  • Один самодостатній файл HTML, CSS або JSON
  • Жодного додаткового запиту для крихітних іконок
  • Безпечно всередині JSON, XML та інших текстових форматів
  • Без втрат і оборотно

Недоліки зображення в Base64

  • Приблизно на 33% більше за двійковий файл
  • Браузер не кешує окремо
  • Багато поштових клієнтів блокують як зображення
  • Важко переглядати в різницях коду

Запитання про зображення в Base64

Чим Base64 відрізняється від data URI?

Base64 — це лише закодовані символи. Data URI обгортає їх схемою і типом: data:image/png;base64, а далі самі символи, щоб браузер знав, як їх декодувати й показати. Для HTML і CSS потрібен повний data URI, а більшості JSON API — лише частина Base64.

Наскільки більшим стає зображення в Base64?

Base64 записує 4 символи на кожні 3 байти, тому текст приблизно на третину більший за файл, плюс короткий префікс. PNG на 30 KB перетворюється на приблизно 40 KB тексту. Якщо HTML або CSS передається зі стисненням gzip, частина цих витрат повертається під час передачі.

Чи можна використати зображення в Base64 у підписі електронного листа?

Це ненадійно. Gmail не показує зображення data URI, а кілька десктопних поштових програм теж їх вирізають, тому одержувачі бачать зламану іконку. Розмістіть зображення на вебсервері або додайте у вкладення, а Base64 залиште для вебсторінок і застосунків.

Чи варто кодувати SVG-іконку в Base64?

Це працює, але SVG уже є текстом. Якщо закодувати розмітку як URL замість Base64, data URI зазвичай виходить коротшим і лишається читабельним. Для чогось більшого за невелику іконку краще окремий SVG-файл, який браузер може кешувати.

Чи можна перетворити текст Base64 назад на зображення?

Так, кодування без втрат і повністю оборотне: декодування повертає точні вихідні байти. Декодер є в кожній мові програмування, а якщо вставити повний data URI в адресний рядок браузера, відобразиться зображення.

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

Ні. Base64 змінює спосіб запису байтів, а не пікселі. Щоб рядок став коротшим, спершу зменште зображення, наприклад за допомогою стиснути фото до 20 KB, і закодуйте менший файл.