Декодер зображень Base64 | Онлайн декодування та перегляд зображень

Що таке декодер зображень Base64?

Декодер зображень Base64 — це інструмент, який перетворює текстовий рядок у кодуванні Base64 назад на зображення. Base64 — це спосіб запису двійкових даних, наприклад байтів файлу зображення, за допомогою лише 64 звичайних текстових символів (літер, цифр, +, / і = для доповнення). Браузери, електронні листи та багато API зберігають зображення в такому вигляді, щоб зображення могло передаватися всередині звичайного тексту, а не як окремий файл. Декодер виконує зворотне перетворення: вставте рядок — і з’явиться початкове зображення.

Формат URL даних

У вебсередовищі зображення Base64 зазвичай записують як URL даних. Шаблон має такий вигляд:

Наприклад:

Кожна частина має своє призначення:

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

Як працює декодер

Декодування відбувається у чотири етапи.

1. Інструмент перевіряє, чи починається рядок із data:. URL даних, у якому вказано тип медіа, відмінний від зображення, наприклад data:text/plain, одразу відхиляється, оскільки його неможливо відобразити як зображення.
2. Він видаляє пробіли, табуляції та розриви рядків, оскільки довгі рядки Base64 іноді переносяться на кілька рядків. Дані, у яких замість Base64 використано кодування відсотками, яке також дозволяє RFC 2397, передаються без змін.
3. Він декодує текст Base64 назад у необроблені байти.
4. Він переглядає перші кілька байтів результату. Кожен поширений формат зображень починається з фіксованої послідовності байтів, яку називають сигнатурою або «магічним числом». Файли PNG починаються з 89 50 4E 47, файли JPEG — з FF D8 FF тощо. Декодер зіставляє ці сигнатури та визначає тип зображення за відповідною сигнатурою.

Байти мають перевагу над міткою. Якщо URL даних містить data:image/png, але байти починаються з FF D8 FF, декодер перебудовує URL як data:image/jpeg, тому рядок, який надає кнопка «Копіювати URL зображення», ніколи не містить неправильного опису власного вмісту.

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

SVG обробляється інакше, оскільки SVG — це текстовий формат (XML), а не двійковий, тому він не має фіксованої сигнатури байтів. Декодер перевіряє перші 1024 байти декодованого тексту на наявність тегу <svg, декларації XML, наприклад <?xml version="1.0"?>, після якої є такий тег, або декларації типу документа SVG, після якої є такий тег. Маркер порядку байтів на самому початку, який деякі редактори додають до файлів UTF-8, ігнорується. Оскільки SVG неможливо ідентифікувати за сигнатурою байтів, URL даних, у якому заявлено image/svg+xml, зберігає вказаний у ньому тип.

Формула розміру зображення Base64

Base64 перетворює кожні 3 байти двійкових даних на 4 текстові символи. Формула довжини закодованих даних така:

Символи ⌈ ⌉ означають «округлити вгору до наступного цілого числа», оскільки Base64 завжди працює з групами по 4 символи та доповнює неповну групу знаками =.

Для великих файлів це дає приблизно 33% збільшення розміру, оскільки 4 ÷ 3 ≈ 1,33. У малих файлів відсоткове збільшення може бути більшим, адже округлення вгору до наступної групи з 4 символів має більший вплив, коли початкових даних небагато.

Приклад обчислення

Наведений вище приклад PNG після декодування дає 85 байтів даних зображення. Застосуємо формулу:

Довжина рядка Base64 справді становить 116 символів, що відповідає розрахунку. Це 36% збільшення порівняно з початковими 85 байтами (116 ÷ 85 ≈ 1,36), трохи більше за показник 33%, оскільки файл дуже малий.

Підтримувані формати зображень

Декодер зчитує сигнатуру байтів декодованих даних, щоб визначити формат. Він розпізнає такі типи:

Як декодувати зображення Base64

1. Скопіюйте рядок Base64 із префіксом data:image/... або без нього з HTML, CSS, відповіді API чи електронного листа.
2. Вставте його в поле введення.
3. Зображення декодується автоматично через мить після припинення введення або після натискання кнопки декодування.
4. Декодоване зображення з’явиться в області попереднього перегляду. Його URL даних можна скопіювати кнопкою «Копіювати URL зображення», а саме зображення можна зберегти, клацнувши його правою кнопкою миші в області попереднього перегляду та вибравши команду збереження, оскільки в браузері воно відображається як звичайний елемент зображення.

Поширені способи використання зображень Base64

• Вбудовування в HTML, CSS або JavaScript: розміщення даних зображення безпосередньо в коді усуває потребу в окремому запиті файлу.
• Шаблони електронних листів: деякі поштові клієнти типово блокують зовнішні зображення, але вбудоване зображення Base64 усе одно відображається.
• Однофайлові HTML-інструменти: ціла сторінка разом із зображеннями може постачатися як один самодостатній файл.
• Відповіді API: зображення може передаватися всередині даних JSON, без окремої кінцевої точки.
• Фони та піктограми CSS: невеликі піктограми іноді записують безпосередньо в таблицю стилів як URL даних.

Компроміси під час використання зображень Base64

Кодування Base64 зручне, але має свою ціну:

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

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

Що таке декодер зображень Base64?

Це інструмент, який перетворює текстовий рядок у кодуванні Base64 назад на зображення, придатне для перегляду, наприклад файл PNG, JPEG, GIF, WebP, BMP або SVG.

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

Вставте рядок Base64 із префіксом data:image/... або без нього в декодер. Він зчитає рядок, декодує його та покаже отримане зображення.

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

Так. Декодер обробляє його як необроблені дані Base64, декодує байти та зчитує перші кілька байтів, щоб визначити формат за сигнатурою, наприклад PNG, JPEG, GIF, WebP, BMP або ICO. SVG визначається пошуком тегу <svg у декодованому тексті. Якщо жодна з цих ознак не збігається, декодер повідомляє, що рядок, імовірно, не є зображенням, замість того щоб вгадувати формат.

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

У більшості випадків причина одна з трьох. Рядок може містити символи поза стандартним алфавітом Base64, а саме A–Z, a–z, 0–9, +, / і =; варіант base64url, який використовується в деяких вебтокенах, натомість містить - і _ та не приймається. Рядок може бути обрізано, через що його довжина стала на один символ більшою за число, кратне чотирьом, а такого не буває в жодному дійсному рядку Base64. Або байти просто можуть не відповідати жодному з підтримуваних форматів зображень. Відсутність доповнення = сама по собі не є проблемою, а пробіли й розриви рядків видаляються перед декодуванням.

Чи є кодування Base64 різновидом захисту або шифрування?

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

Наскільки рядок Base64 більший за початкове зображення?

Приблизно на третину для великих файлів, оскільки кожні 3 байти початкових даних перетворюються на 4 текстові символи. Зображення розміром 100 KB після кодування матиме приблизний розмір 133 KB. У малих зображень відсоткове збільшення може бути дещо більшим через округлення.

Історія

Base64 виникло на основі схем кодування, розроблених у 1970-х і 1980-х роках для передавання двійкових даних через поштові системи, які працювали лише зі звичайним текстом; для електронної пошти цей підхід було формалізовано в RFC 989 (1987) і пізніше в RFC 1421. Використання цього формату для вбудовування зображень у вебсторінки стало можливим після визначення схеми URL data: у RFC 2397 (1998), а в середині 2000-х років цей підхід став поширенішим, коли розробники почали шукати способи зменшити кількість окремих HTTP-запитів, особливо в умовах повільного мобільного з’єднання.

Джерела

1. RFC 4648: Кодування даних Base16, Base32 і Base64
2. RFC 2397: Схема URL «data»
3. MDN Web Docs: URL даних
4. Стандарт WHATWG для визначення типу MIME