Dekoder slik Base64 | Dekodiranje in predogled slik na spletu

Kaj je dekodirnik slik base64?

Dekodirnik slik base64 je orodje, ki besedilni niz, kodiran v base64, pretvori nazaj v sliko. Base64 je način zapisovanja binarnih podatkov, kot so bajti slikovne datoteke, samo z uporabo 64 znakov navadnega besedila (črk, števk, +, / in = za dopolnitev). Brskalniki, e-pošta in številni API-ji tako shranjujejo slike, da lahko slika potuje znotraj navadnega besedila namesto kot ločena datoteka. Dekodirnik ta postopek obrne: niz prilepite in prikaže se izvirna slika.

Oblika podatkovnega URL-ja

V spletu je slika base64 običajno zapisana kot podatkovni URL. Vzorec je:

Na primer:

Vsak del ima svojo vlogo:

• data: označuje, da gre za podatkovni URL, ne za običajen spletni naslov.
• image/png je vrsta MIME, ki brskalniku pove, za kakšno vrsto datoteke gre.
• ;base64 pove, da so podatki za vejico kodirani v base64.
• Vse za vejico je sama kodirana slika.

Kako deluje dekodirnik

Dekodiranje poteka v štirih korakih.

1. Orodje preveri, ali se niz začne z data:. Podatkovni URL, ki določa drugo vrsto predstavnosti kot sliko, na primer data:text/plain, je takoj zavrnjen, saj ga ni mogoče prikazati kot sliko.
2. Odstrani presledke, tabulatorje in prelome vrstic, saj so dolgi nizi base64 včasih razporejeni čez več vrstic. Telo podatkov, ki namesto base64 uporablja kodiranje z odstotki, kar dovoljuje tudi RFC 2397, se posreduje nespremenjeno.
3. Besedilo base64 dekodira nazaj v surove bajte.
4. Pregleda prvih nekaj bajtov rezultata. Vsaka pogosta oblika slike se začne z nespremenljivim zaporedjem bajtov, imenovanim podpis ali »magično število«. Datoteke PNG se začnejo z 89 50 4E 47, datoteke JPEG z FF D8 FF in tako naprej. Dekodirnik primerja te podpise in sliko označi z vrsto, ki jo prepozna.

Bajte imajo prednost pred oznako. Če podatkovni URL navaja data:image/png, vendar se bajti začnejo z FF D8 FF, dekodirnik URL znova sestavi kot data:image/jpeg, zato niz, ki ga ponuja gumb »Kopiraj URL slike«, nikoli ne napačno opiše svoje vsebine.

Če niz nima predpone data:, ga dekodirnik obravnava kot surove podatke base64, jih dekodira in prebere podpis na enak način. Če se bajti ne ujemajo z nobenim znanim podpisom slike in niso videti kot besedilo SVG, dekodirnik sporoči, da niz očitno ni slika. Ne ugiba oblike in ne uporabi nobene privzete vrste.

SVG se obravnava drugače, ker je SVG besedilna oblika (XML), ne binarna, zato nima nespremenljivega podpisa bajtov. Dekodirnik v prvih 1024 bajtih dekodiranega besedila preveri oznako <svg, deklaracijo XML, kot je <?xml version="1.0"?>, ki ji sledi prva, ali deklaracijo vrste dokumenta SVG, ki ji sledi prva. Označevalnik vrstnega reda bajtov na samem začetku, ki ga nekateri urejevalniki dodajo datotekam UTF-8, se prezre. Ker SVG-ja ni mogoče prepoznati iz podpisa bajtov, podatkovni URL, ki določa image/svg+xml, ohrani navedeno vrsto.

Formula za velikost slike Base64

Base64 vsake 3 bajte binarnih podatkov pretvori v 4 znakov besedila. Formula za dolžino kodiranega zapisa je:

Simboli ⌈ ⌉ pomenijo »zaokroži navzgor na naslednje celo število«, saj base64 vedno deluje v skupinah po 4 znakov in preostalo skupino dopolni z znaki =.

Pri velikih datotekah to pomeni približno 33 % povečanje velikosti, saj velja 4 ÷ 3 ≈ 1,33. Pri majhnih datotekah je lahko odstotno povečanje večje, ker zaokroževanje navzgor na naslednjo skupino 4 znakov bolj vpliva, kadar je začetnih podatkov malo.

Primer izračuna

Zgornji primer PNG se dekodira v 85 bajtov slikovnih podatkov. Z uporabo formule:

Niz base64 je res dolg 116 znakov, kar se ujema. To je 36 % povečanje glede na izvirnih 85 bajtov (116 ÷ 85 ≈ 1,36), kar je nekoliko več od vrednosti 33 %, ker je datoteka tako majhna.

Podprte oblike slik

Dekodirnik prebere podpis bajtov dekodiranih podatkov, da prepozna obliko. Prepozna te vrste:

Kako dekodirati sliko base64

1. Kopirajte niz base64 s predpono data:image/... ali brez nje iz HTML-ja, CSS-a, odgovora API-ja ali e-pošte.
2. Prilepite ga v vnosno polje.
3. Slika se samodejno dekodira trenutek po koncu tipkanja ali s pritiskom gumba za dekodiranje.
4. Dekodirana slika se prikaže v območju za predogled. Njen podatkovni URL lahko kopirate z gumbom »Kopiraj URL slike«, samo sliko pa lahko shranite tako, da jo v predogledu kliknete z desnim miškinim gumbom in izberete shranjevanje slike, saj se v brskalniku izriše kot običajen slikovni element.

Pogoste uporabe slik base64

• Vdelava v HTML, CSS ali JavaScript: z neposrednim vnosom slikovnih podatkov v kodo se izognete ločeni zahtevi za datoteko.
• Predloge e-pošte: nekateri e-poštni odjemalci privzeto blokirajo zunanje povezane slike, vdelana slika base64 pa se še vedno prikaže.
• Orodja HTML v eni datoteki: celotna stran, vključno s slikami, se lahko pošlje kot ena samostojna datoteka.
• Odgovori API-ja: slika lahko potuje znotraj vsebine JSON, namesto da bi potrebovala lastno končno točko.
• Ozadja in ikone CSS: majhne ikone so včasih zapisane neposredno v slogovni datoteki kot podatkovni URL.

Slabosti slik base64

Kodiranje base64 je priročno, vendar ima svojo ceno:

• Kodirano besedilo je približno za tretjino večje od izvirne datoteke.
• Brskalniki vdelane slike ne morejo predpomniti tako kot povezane datoteke, zato se znova prenese vsakič, ko se naloži spremljajoča stran ali slogovna datoteka.
• Brskalnik mora besedilo base64 dekodirati, preden lahko prikaže sliko, kar zahteva nekoliko dodatne obdelave.
• Zaradi povečanja velikosti in izgubljenega predpomnjenja je vdelava base64 primerna za majhne slike, kot so ikone in preprosti logotipi. Večje fotografije je običajno bolje streči kot običajne slikovne datoteke.

Pogosta vprašanja

Kaj je dekodirnik slik base64?

Gre za orodje, ki besedilni niz, kodiran v base64, pretvori nazaj v prikazljivo sliko, na primer datoteko PNG, JPEG, GIF, WebP, BMP ali SVG.

Kako dekodiram sliko base64?

Niz base64 s predpono data:image/... ali brez nje prilepite v dekodirnik. Prebral bo niz, ga dekodiral in prikazal dobljeno sliko.

Ali je mogoče niz base64 dekodirati brez predpone podatkovnega URL-ja?

Da. Dekodirnik ga obravnava kot surove podatke base64, dekodira bajte in prebere prvih nekaj bajtov, da iz podpisa prepozna obliko, na primer PNG, JPEG, GIF, WebP, BMP ali ICO. SVG prepozna tako, da v dekodiranem besedilu poišče oznako <svg. Če se nič od tega ne ujema, dekodirnik sporoči, da niz očitno ni slika, namesto da bi ugibal obliko.

Zakaj se moja slika base64 ne dekodira?

V večini primerov gre za enega od treh vzrokov. Niz lahko vsebuje znake zunaj standardne abecede base64, ki je A–Z, a–z, 0–9, +, / in =; različica base64url, ki se uporablja v nekaterih spletnih žetonih, namesto tega uporablja - in _ ter ni sprejeta. Niz je bil morda prekinjen na sredini, zato je njegova dolžina za ena večja od večkratnika števila štiri, česar noben veljaven niz base64 nima. Lahko pa bajti preprosto niso v eni od podprtih oblik slik. Manjkajoče dopolnilo = samo po sebi ni težava, presledki in prelomi vrstic pa se pred dekodiranjem odstranijo.

Ali je kodiranje base64 oblika varnosti ali šifriranja?

Ne. Base64 je samo način predstavitve bajtov kot besedila; ničesar ne skrije. Vsakdo lahko niz base64 v nekaj sekundah dekodira z brezplačnim orodjem, zato ga nikoli ne smete uporabljati za zaščito zasebnih slik ali drugih podatkov.

Za koliko je niz Base64 večji od izvirne slike?

Pri večjih datotekah je približno za tretjino večji, saj se vsakih 3 bajtov izvirnih podatkov pretvori v 4 znakov besedila. Slika velikosti 100 KB po kodiranju postane velika približno 133 KB. Pri majhnih slikah je lahko odstotno povečanje nekoliko večje zaradi zaokroževanja.

Zgodovina

Base64 se je razvil iz shem kodiranja, zasnovanih v 1970. in 1980. letih za pošiljanje binarnih podatkov prek poštnih sistemov, ki so obravnavali samo navadno besedilo; za e-pošto je bil formaliziran v RFC 989 (1987) in pozneje v RFC 1421. Uporaba za vdelavo slik v spletne strani je postala mogoča, ko je bila shema URL-jev data: opredeljena v RFC 2397 (1998), v sredini 2000. let pa je postala pogostejša, ko so razvijalci iskali načine za zmanjšanje števila ločenih zahtev HTTP, zlasti pri počasnih mobilnih povezavah.

Viri

1. RFC 4648: Kodiranja podatkov Base16, Base32 in Base64
2. RFC 2397: Shema URL-jev »data«
3. MDN Web Docs: podatkovni URL-ji
4. Standard WHATWG za prepoznavanje MIME