CodeKitHubKaj je to orodje?
Base64 je način predstavitve binarnih podatkov — kot so surovi bajti slike — kot navadno besedilo, z uporabo le črk, številk in peščice simbolov. Ker gre za navadno besedilo, je slika, kodirana v Base64, vgrajena neposredno v HTML, CSS ali JSON namesto kot ločena referenčna datoteka.
"Podatkovni URL" ovije to Base64 besedilo v kratko predpono (data:image/png;base64,), ki brskalniku pove, za kakšno vrsto datoteke gre, tako da ga lahko preprosto vstaviš v atribut src ali url() in se izriše brez dodatne zahteve.
Zakaj ga uporabiti?
- Dobiš oba formata hkrati — celoten podatkovni URL za HTML/CSS in surov Base64 (brez predpone) za vgradnjo v JSON ali konfiguracijske datoteke.
- Brez povratne poti do strežnika: odpravi eno HTTP zahtevo za majhne ikone, avatarje ali vgrajene slike.
- Ohrani izvirne bajte datoteke natanko takšne, kot so — brez ponovnega kodiranja ali izgube kakovosti, za razliko od orodij, ki sliko dekodirajo in znova shranijo.
- Prikaže razliko v velikosti, tako da veš, kaj menjaš za udobje.
- Zasebno: datoteka se prebere lokalno z brskalnikovim FileReader API-jem in nikoli ne zapusti tvoje naprave.
Kako ga uporabljati
- Klikni območje za nalaganje ali povleci vanj slikovno datoteko.
- Kopiraj celoten podatkovni URL, če ga lepiš v <img src> ali CSS background-image.
- Kopiraj surov Base64 (brez predpone data:), če vrednost vgrajuješ v JSON, YAML ali drug konfiguracijski format, ki že pozna vrsto datoteke.
- Preveri opombo o velikosti — Base64 besedilo je približno tretjino večje od izvirne binarne datoteke.
Primer
Vnos
PNG ikona velikosti 12 KB.Rezultat
data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 KB besedila) plus enak niz brez predpone data:.Približno 33-odstotno povečanje velikosti je lastnost Base64 kodiranja (3 bajti binarnih podatkov postanejo 4 znaki besedila) — to ni napaka orodja.
Kje se posamezen format uporablja
| Format | Tipična uporaba |
|---|---|
| Celoten podatkovni URL | HTML <img src="...">, CSS background-image: url(...), vgrajene slike v e-pošti |
| Surov Base64 | JSON API tovori, YAML/konfiguracijske datoteke, BLOB polja v podatkovni bazi, prilagojeni binarni protokoli |
Base64 in velikost slike — kompromis v praksi
Približno 33-odstotna dodatna teža pomeni, da je vgradnjo v Base64 najbolje pridržati za majhne datoteke: ikona velikosti 2 KB postane neškodljivih ~2,7 KB vgrajenega besedila, fotografija velikosti 500 KB pa postane ~665 KB besedila, ki sedi znotraj tvojega HTML-ja, kar upočasni razčlenjevanje in ga ni mogoče predpomniti ločeno od strani.
Če vgrajuješ več slik ali večje, pretehtaj korist ene prihranjene zahteve proti stroškom teže strani — in razmisli o predhodnem stiskanju.
Pogosta vprašanja
Zakaj je Base64 niz toliko večji od moje slikovne datoteke?
Base64 vsakih 3 bajte binarnih podatkov kodira kot 4 besedilne znake, kar je fiksna približno 33-odstotna dodatna teža. Za sliko velikosti 100 KB pričakuj približno 133 KB Base64 besedila. To je normalno in neizogibno — to je cena predstavitve binarnih podatkov kot varnega, prenosljivega besedila.
Kakšna je razlika med podatkovnim URL-jem in surovim Base64 nizom?
Podatkovni URL vsebuje predpono data:image/png;base64,, ki brskalniku ali izrisovalniku pove, na kateri MIME tip se dekodira naslednje besedilo. Celoten podatkovni URL prilepi v HTML src ali CSS url(). Surov Base64 (vse za vejico) je tisto, kar potrebuješ, kadar sistem že ločeno pozna vrsto datoteke — na primer polje JSON, kot je { "format": "png", "data": "<surov base64>" }.
Kdaj naj sliko vgradim kot Base64 namesto povezave do datoteke?
Vgradnja v Base64 je koristna za majhne, pogosto uporabljene slike (ikone, logotipe, majhne grafike vmesnika), kjer prihranek ene HTTP zahteve odtehta približno 33-odstotno večjo velikost, ali v kontekstih, kjer ločena datoteka ni praktična, kot so vgrajene e-poštne slike ali izvozi HTML z eno datoteko. Za velike fotografije ali karkoli, kar se ponavlja na več straneh, je skoraj vedno boljša navadna povezana datoteka s predpomnjenjem v brskalniku.
Ali pretvorba v Base64 spremeni ali stisne mojo sliko?
Ne. Base64 je kodiranje brez izgub, ki natanko ohrani izvirne bajte — ne dotika se pikslov, ločljivosti ali stiskanja. Če želiš manjšo datoteko, sliko najprej stisni s kompresorjem slik, nato pa stisnjen rezultat pretvori v Base64.
Ali se moja slika kamor koli naloži?
Ne. Datoteka se prebere neposredno v tvojem brskalniku z uporabo FileReader API-ja in se kodira lokalno — nikoli ni poslana prek omrežja.