Base64 dekodér obrázkov | Dekódovanie a náhľad obrázkov online

Čo je dekodér obrázkov vo formáte base64?

Dekodér obrázkov vo formáte base64 je nástroj, ktorý prevádza textový reťazec zakódovaný vo formáte base64 späť na obrázok. Base64 je spôsob zápisu binárnych údajov, napríklad bajtov obrazového súboru, pomocou iba 64 znakov obyčajného textu (písmen, číslic, +, / a = na doplnenie). Prehliadače, e-maily a mnohé rozhrania API ukladajú obrázky týmto spôsobom, aby sa obrázok mohol prenášať v obyčajnom texte namiesto samostatného súboru. Dekodér tento proces obráti: po vložení reťazca sa zobrazí pôvodný obrázok.

Formát dátovej URL

Na webe sa obrázok zakódovaný vo formáte Base64 zvyčajne zapisuje ako dátová URL. Jej vzor je:

Príklad:

Každá časť má svoju úlohu:

• data: označuje, že ide o dátovú URL, nie o bežnú webovú adresu.
• image/png je typ MIME, ktorý prehliadaču oznamuje, o aký druh súboru ide.
• ;base64 uvádza, že údaje za čiarkou sú zakódované vo formáte base64.
• Všetko za čiarkou je samotný zakódovaný obrázok.

Ako dekodér funguje

Dekódovanie prebieha v štyroch krokoch.

1. Nástroj skontroluje, či reťazec začína znakom data:. Dátová URL, ktorá uvádza iný typ média než obrázok, napríklad data:text/plain, sa okamžite odmietne, pretože ju nemožno zobraziť ako obrázok.
2. Odstránia sa všetky medzery, tabulátory a zalomenia riadkov, pretože dlhé reťazce base64 bývajú niekedy rozdelené na viac riadkov. Údajový obsah s percentovým kódovaním namiesto base64, ktoré povoľuje aj RFC 2397, sa ponechá nezmenený.
3. Text vo formáte base64 sa dekóduje späť na nespracované bajty.
4. Skontroluje sa prvých niekoľko bajtov výsledku. Každý bežný obrazový formát začína pevnou postupnosťou bajtov, ktorá sa nazýva signatúra alebo „magické číslo“. Súbory PNG začínajú postupnosťou 89 50 4E 47, súbory JPEG postupnosťou FF D8 FF a podobne. Dekodér tieto signatúry porovná a priradí obrázku typ, ktorý identifikujú.

Rozhodujú bajty, nie označenie. Ak dátová URL uvádza data:image/png, ale bajty začínajú postupnosťou FF D8 FF, dekodér URL vytvorí nanovo ako data:image/jpeg, takže reťazec ponúknutý tlačidlom „Kopírovať URL obrázka“ nikdy nesprávne neoznačuje svoj obsah.

Ak reťazec nemá predponu data:, dekodér ho považuje za nespracované údaje base64, dekóduje ich a rovnakým spôsobom prečíta signatúru. Ak sa bajty nezhodujú so žiadnou známou obrazovou signatúrou a nevyzerajú ako text SVG, dekodér oznámi, že reťazec zrejme nie je obrázok. Formát neodhadne ani nepoužije predvolený typ.

SVG sa spracúva odlišne, pretože ide o textový formát (XML), nie binárny formát, a preto nemá pevnú bajtovú signatúru. Dekodér skontroluje prvých 1024 bajtov dekódovaného textu, či obsahujú značku <svg, deklaráciu XML, napríklad <?xml version="1.0"?>, po ktorej nasleduje táto značka, alebo deklaráciu typu dokumentu SVG, po ktorej nasleduje táto značka. Značka poradia bajtov na úplnom začiatku, ktorú niektoré editory pridávajú do súborov UTF-8, sa ignoruje. Keďže SVG nemožno identifikovať podľa bajtovej signatúry, dátová URL s deklarovaným typom image/svg+xml si zachováva tento deklarovaný typ.

Vzorec pre veľkosť obrázka vo formáte base64

Base64 prevedie každé 3 bajty binárnych údajov na 4 textové znaky. Vzorec pre dĺžku zakódovaných údajov je:

Symboly ⌈ ⌉ znamenajú „zaokrúhliť nahor na najbližšie celé číslo“, pretože base64 vždy pracuje v skupinách po 4 znakoch a neúplnú skupinu dopĺňa znakmi =.

Pri veľkých súboroch to predstavuje približne 33 % zväčšenie, pretože 4 ÷ 3 ≈ 1,33. Pri malých súboroch môže byť percentuálne zväčšenie väčšie, pretože zaokrúhlenie nahor na ďalšiu skupinu po 4 znakoch má pri malom množstve údajov väčší vplyv.

Vyriešený príklad

Uvedený príklad PNG sa dekóduje na 85 bajtov obrazových údajov. Pri použití vzorca:

Reťazec base64 má skutočne dĺžku 116 znakov, čo zodpovedá výpočtu. V porovnaní s pôvodnými 85 bajtmi ide o zväčšenie o 36 % (116 ÷ 85 ≈ 1,36), teda o niečo viac než 33 %, pretože súbor je veľmi malý.

Podporované obrazové formáty

Dekodér podľa bajtovej signatúry dekódovaných údajov identifikuje formát. Rozpoznáva tieto typy:

Ako dekódovať obrázok vo formáte base64

1. Skopírujte reťazec base64 s predponou data:image/... alebo bez nej z HTML, CSS, odpovede rozhrania API či e-mailu.
2. Vložte ho do vstupného poľa.
3. Obrázok sa dekóduje automaticky chvíľu po skončení písania alebo po stlačení tlačidla dekódovania.
4. Dekódovaný obrázok sa zobrazí v oblasti náhľadu. Jeho dátovú URL možno skopírovať tlačidlom „Kopírovať URL obrázka“ a samotný obrázok možno uložiť kliknutím pravým tlačidlom myši na náhľad a výberom možnosti uloženia obrázka, pretože v prehliadači sa vykresľuje ako bežný obrazový prvok.

Bežné použitia obrázkov vo formáte base64

• Vkladanie do HTML, CSS alebo JavaScriptu: vloženie obrazových údajov priamo do kódu eliminuje požiadavku na samostatný súbor.
• E-mailové šablóny: niektorí e-mailoví klienti predvolene blokujú obrázky odkazované externe, ale vložený obrázok vo formáte base64 sa naďalej zobrazí.
• Jednosúborové nástroje HTML: celá stránka vrátane obrázkov môže byť distribuovaná ako jeden samostatný súbor.
• Odpovede rozhraní API: obrázok môže byť prenášaný vo vnútri dátovej štruktúry JSON bez toho, aby potreboval vlastný koncový bod.
• Pozadia a ikony v CSS: malé ikony sa niekedy zapisujú priamo do súboru so štýlmi ako dátová URL.

Nevýhody obrázkov vo formáte base64

Kódovanie base64 je praktické, ale má aj nevýhody:

• Zakódovaný text je približne o tretinu väčší než pôvodný súbor.
• Prehliadače nemôžu vložený obrázok ukladať do vyrovnávacej pamäte rovnakým spôsobom ako odkazovaný súbor, takže sa znova stiahne pri každom načítaní okolitej stránky alebo šablóny so štýlmi.
• Prehliadač musí pred zobrazením obrázka dekódovať text base64, čo si vyžaduje malé množstvo dodatočného spracovania.
• Vzhľadom na zväčšenie a stratu ukladania do vyrovnávacej pamäte je vkladanie vo formáte base64 vhodné pre malé obrázky, napríklad ikony a jednoduché logá. Väčšie fotografie sa zvyčajne načítavajú lepšie ako bežné obrazové súbory.

Najčastejšie otázky

Čo je dekodér obrázkov vo formáte base64?

Ide o nástroj, ktorý prevádza textový reťazec zakódovaný vo formáte base64 späť na zobraziteľný obrázok, napríklad súbor PNG, JPEG, GIF, WebP, BMP alebo SVG.

Ako dekódujem obrázok vo formáte base64?

Vložte reťazec base64 s predponou data:image/... alebo bez nej do dekodéra. Ten reťazec prečíta, dekóduje ho a zobrazí výsledný obrázok.

Možno reťazec base64 dekódovať bez predpony dátovej URL?

Áno. Dekodér ho považuje za nespracované údaje base64, dekóduje bajty a podľa prvých niekoľkých bajtov identifikuje formát z jeho signatúry, napríklad PNG, JPEG, GIF, WebP, BMP alebo ICO. SVG sa identifikuje vyhľadaním značky <svg v dekódovanom texte. Ak sa nezhoduje nič z uvedeného, dekodér oznámi, že reťazec zrejme nie je obrázok, namiesto toho, aby formát odhadol.

Prečo sa môj obrázok vo formáte base64 nedá dekódovať?

Väčšinu prípadov spôsobujú tri príčiny. Reťazec môže obsahovať znaky mimo štandardnej abecedy base64, ktorou sú A–Z, a–z, 0–9, +, / a =; variant base64url používaný v niektorých webových tokenoch namiesto nich používa - a _ a nie je podporovaný. Reťazec mohol byť skrátený uprostred, takže jeho dĺžka je o jeden väčšia než násobok štyroch, čo pri platnom reťazci base64 nikdy nenastane. Alebo bajty jednoducho nepatria k žiadnemu podporovanému obrazovému formátu. Chýbajúce doplňujúce znaky = samy osebe nepredstavujú problém a medzery či zalomenia riadkov sa pred dekódovaním odstránia.

Je kódovanie base64 formou zabezpečenia alebo šifrovania?

Nie. Base64 je iba spôsob reprezentácie bajtov pomocou textu; nič neskrýva. Každý môže reťazec base64 dekódovať za niekoľko sekúnd pomocou bezplatného nástroja, preto by sa nikdy nemal používať na ochranu súkromných obrázkov ani iných údajov.

O koľko je reťazec base64 väčší než pôvodný obrázok?

Pri väčších súboroch približne o tretinu, pretože každé 3 bajty pôvodných údajov sa prevedú na 4 textové znaky. Obrázok s veľkosťou 100 KB bude po zakódovaní veľký približne 133 KB. Pri malých obrázkoch môže byť percentuálne zväčšenie o niečo vyššie v dôsledku zaokrúhľovania.

História

Base64 vzniklo z kódovacích schém vytvorených v 1970. a 1980. rokoch na prenos binárnych údajov cez poštové systémy, ktoré spracúvali iba obyčajný text. Pre e-mail bolo formalizované v RFC 989 (1987) a neskôr v RFC 1421. Používanie na vkladanie obrázkov do webových stránok umožnilo zavedenie schémy URL data: v RFC 2397 (1998). V polovici 2000. rokov sa rozšírilo, keď vývojári hľadali spôsoby, ako znížiť počet samostatných požiadaviek HTTP, najmä pri pomalých mobilných pripojeniach.

Referencie

1. RFC 4648: Kódovanie údajov Base16, Base32 a Base64
2. RFC 2397: Schéma URL „data“
3. MDN Web Docs: Dátové URL
4. Štandard WHATWG na zisťovanie typu MIME