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 се обработва по различен начин, защото е текстов формат (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 типове