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

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

Що таке Base64 і навіщо його використовують?

Base64 перетворює двійкові дані завантаженого зображення на текст, щоб їх можна було передавати через системи, розраховані переважно на текстовий вміст. Кожні три байти вихідних даних він представляє чотирма друкованими символами з визначеного алфавіту.

Це корисно, коли формат не дає змоги передати окремий двійковий файл. Зображення можна вставити в URL даних, властивість JSON або MIME-частину електронного листа, не додаючи вихідні байти у звичайному двійковому вигляді. Створений рядок Base64 закодований, а не зашифрований. Кожен, хто отримає цей рядок, зможе його декодувати, тому Base64 не забезпечує конфіденційності чи контролю доступу.

Принцип роботи добре видно на невеликому прикладі з текстовими байтами.

• Вхідний текст: <svg></svg>
• Результат у Base64: PHN2Zz48L3N2Zz4=

Більшість зображень складаються з двійкових байтів, а не з читабельної розмітки, тому їхні вхідні дані не будуть схожі на цей текстовий приклад. Але принцип однаковий для PNG, JPEG, GIF, WebP та інших форматів зображень.

Як перетворити зображення на Base64?

Завантаж зображення в інструмент, запусти перетворення та скопіюй значення з поля Закодовано в Base64. Інструмент застосовує до даних зображення функцію PHP base64_encode.

1. Вибери зображення, яке потрібно представити у вигляді тексту.
2. Зачекай, поки сторінка обробить файл і поверне закодоване значення.
3. Скопіюй увесь рядок разом зі знаками рівності в кінці, якщо вони є.
4. Додай потрібний синтаксис, якщо система призначення очікує URL даних, значення JSON або інший контейнер.

Обробка відбувається на сервері. Зображення передається на сервер через HTTPS і не зберігається. Оскільки файл обробляється на сервері, не варто вважати, що під час перетворення він залишається лише на твоєму пристрої.

Як використовувати отриманий рядок Base64?

Використовуй рядок як необроблений Base64 або встав його в синтаксичну конструкцію, якої потребує система-одержувач. Сам Base64 не містить відомостей про формат зображення, назву файлу, розміри чи призначення.

В URL даних для HTML або CSS перед закодованим значенням зазвичай зазначають тип медіа та маркер Base64. URL даних для PNG починається з data:image/png;base64,, після чого без пробілу йде сам рядок. Для JPEG використовують image/jpeg, а для SVG зазвичай image/svg+xml. Через неправильно вибраний тип медіа програма може не показати навіть коректне зображення.

У JSON Base64 зазвичай зберігають як рядок у лапках, часто поруч з окремим полем, що визначає тип медіа. Не додавай префікс URL даних, якщо API прямо вимагає необроблений Base64. Перш ніж використовувати повернуте інструментом значення, прочитай документацію API, адже ці два варіанти вхідних даних не взаємозамінні.

Де Base64 трапляється на практиці?

Base64 часто використовують, коли двійкові дані потрібно передати через текстовий формат або протокол. Типові випадки:

• URL даних, вбудовані в HTML, CSS або створені документи.
• Дані JSON, які надсилають до API, що приймають вміст зображення в текстовій властивості.
• Електронні листи, у яких MIME може кодувати вкладення та вбудовані зображення у Base64.
• Рядки запиту, хоча стандартні символи Base64 іноді також потрібно кодувати для URL.
• Файли конфігурації та документи XML, у які не можна безпосередньо вставляти довільні двійкові байти.

Інтернаціоналізовані доменні імена також передбачають перетворення даних на обмежений набір символів, але для цього використовують Punycode, а не Base64. Для значень, що вставляються в URL, може додатково знадобитися Кодувальник URL, оскільки стандартний Base64 може містити знаки плюс, скісні риски та знаки рівності.

Чому Base64 не декодується або дає незрозумілий результат?

Декодування може завершитися помилкою, якщо разом із рядком скопійовано префікс, дані пошкоджені чи обрізані або формат Base64 не відповідає очікуванням декодера. Незрозумілі символи часто означають, що коректні двійкові дані зображення декодували, а потім помилково показали як звичайний текст.

• Скопійований префікс: може спричинити помилку, якщо декодер очікує лише Base64. Перед використанням декодера необробленого Base64 видали такий текст, як data:image/png;base64,.
• Пошкоджені або обрізані дані: можуть декодуватися в неповне зображення, яке не відкриється в засобі перегляду.
• Подвійне кодування: після першого декодування утворюється ще один рядок Base64. Якщо джерело закодувало вже закодоване значення, може знадобитися повторне декодування.
• Неправильний алфавіт: може спричинити помилку, якщо декодер очікує інший варіант. Base64url використовує дефіси та символи підкреслення там, де стандартний Base64 містить знаки плюс і скісні риски.
• Відсутнє доповнення: може вплинути на роботу суворих декодерів. Стандартний Base64 може закінчуватися одним або двома знаками рівності, хоча деякі системи навмисно їх пропускають.

Якщо результат декодування є двійковими даними, збережи його у правильному форматі зображення, а не відкривай у текстовому редакторі. Для зворотного перетворення можна скористатися інструментами Декодер Base64 або Base64 в зображення, якщо рядок повний і має очікуваний формат.

Вибір формату та нестандартні вхідні дані

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

Інструмент кодує байти завантаженого зображення. Пробіли, розділові знаки, цифри, символи з діакритикою та текст не латиницею всередині SVG або метаданих зображення кодуються як частина цих байтів. Назва файлу з такими символами існує окремо від його вмісту й сама по собі не представлена у Base64.

У PHP функція base64_encode повертає порожнє значення для порожньої послідовності байтів. Великі файли дають довгі рядки, а Base64 збільшує вихідну кількість байтів приблизно на третину, ще до додавання синтаксису JSON або URL даних. Він не стискає зображення, не покращує його якість і не змінює розміри в пікселях.

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

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

Так, у властивостях CSS, які приймають URL зображень, можна використовувати правильно сформований URL даних. Це зручно для невеликих самодостатніх ресурсів, але великі вбудовані зображення збільшують розмір таблиці стилів і не можуть кешуватися окремо від файлу CSS.

Чому в моєму рядку Base64 є переноси рядків?

Цей інструмент повертає суцільне значення, оскільки PHP-функція base64_encode не додає переносів рядків. Якщо вони з'явилися, причина в подальшому копіюванні або обробці в іншому місці. Багато декодерів ігнорують пробільні символи, але суворі API можуть відхилити такі дані. Тому використовуй суцільний рядок, якщо цього вимагає специфікація системи-одержувача.

Чи зміниться Base64, якщо перейменувати файл зображення?

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

Чи захищає Base64 приватне зображення?

Ні, Base64 можна декодувати без пароля чи секретного ключа. Для конфіденційних матеріалів використовуй належне шифрування, автентифікацію та контроль доступу. Також пам'ятай, що для обробки цей інструмент надсилає зображення на свій сервер через HTTPS.

Як перевірити, чи правильно виконано перетворення?

Декодуй увесь рядок і відкрий результат у засобі перегляду зображень, який підтримує вихідний формат. Переконайся, що розміри та видимий вміст збігаються з оригіналом. Не видаляй символи доповнення в кінці, якщо система призначення прямо цього не вимагає.