CodeKitHubČo je tento nástroj?
Base64 je spôsob, ako reprezentovať binárne dáta — ako sú surové bajty obrázka — ako čistý text, používajúc len písmená, číslice a hŕstku symbolov. Keďže je to čistý text, obrázok zakódovaný v Base64 môže byť vložený priamo do HTML, CSS alebo JSON namiesto toho, aby sa naň odkazovalo ako na samostatný súbor.
"Data URL" obalí tento Base64 text malým prefixom (data:image/png;base64,), ktorý prehliadaču hovorí, o aký typ súboru ide, takže ho možno vložiť priamo do atribútu src alebo url() a vykresliť bez akejkoľvek ďalšej požiadavky.
Prečo ho používať?
- Získajte oba formáty naraz — kompletnú data URL pre HTML/CSS a čistý Base64 (bez prefixu) na vloženie do JSON alebo konfiguračných súborov.
- Žiadna okľuka cez server: eliminuje jednu HTTP požiadavku pre malé ikony, avatary alebo vložené obrázky.
- Presne zachováva pôvodné bajty súboru — žiadne prekódovanie ani strata kvality, na rozdiel od nástrojov, ktoré obrázok dekódujú a znova uložia.
- Zobrazuje rozdiel vo veľkosti, aby ste vedeli, čo obetujete za výhodu pohodlia.
- Súkromné: súbor sa číta lokálne pomocou FileReader API prehliadača a nikdy neopustí vaše zariadenie.
Ako sa používa
- Kliknite na oblasť na nahranie alebo tam presuňte súbor obrázka.
- Skopírujte kompletnú data URL, ak ju vkladáte do <img src> alebo CSS background-image.
- Skopírujte čistý Base64 (bez prefixu data:), ak vkladáte hodnotu do JSON, YAML alebo iného konfiguračného formátu, ktorý typ súboru už pozná.
- Skontrolujte poznámku o veľkosti — Base64 text je približne o tretinu väčší než pôvodný binárny súbor.
Príklad
Vstup
12 KB súbor PNG ikony.Výstup
data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 KB textu) plus rovnaký reťazec bez prefixu data:.Nárast veľkosti o ~33 % je vlastný kódovaniu Base64 (3 bajty binárnych dát sa stanú 4 znakmi textu) — nie je to chyba v nástroji.
Kde sa každý formát používa
| Formát | Typické použitie |
|---|---|
| Kompletná data URL | HTML <img src="...">, CSS background-image: url(...), vložené obrázky v e-mailoch |
| Čistý Base64 | JSON API payloady, YAML/konfiguračné súbory, BLOB polia v databáze, vlastné binárne protokoly |
Base64 a veľkosť obrázka — kompromis v praxi
Réžia ~33 % znamená, že vkladanie Base64 je najlepšie ponechať pre malé assety: 2 KB ikona sa stane neškodným ~2,7 KB vloženého textu, no 500 KB fotka sa stane ~665 KB textu sedeciho priamo vo vašom HTML, čo spomaľuje parsovanie a nemožno ju kešovať samostatne od stránky.
Ak vkladáte veľa obrázkov alebo väčšie, zvážte prínos ušetrenej jednej požiadavky oproti nákladu na váhu stránky — a zvážte najprv kompresiu.
Časté otázky
Prečo je Base64 reťazec taký oveľa väčší ako môj súbor obrázka?
Base64 kóduje každé 3 bajty binárnych dát ako 4 textové znaky, čo je fixná ~33% réžia veľkosti. Pre 100 KB obrázok očakávajte približne 133 KB Base64 textu. Toto je normálne a nevyhnutné — je to cena za reprezentáciu binárnych dát ako bezpečného, prenosného textu.
Aký je rozdiel medzi data URL a čistým Base64 reťazcom?
Data URL obsahuje prefix data:image/png;base64,, ktorý prehliadaču alebo vykresľovaču hovorí, aký MIME typ nasledujúci text dekóduje. Kompletnú data URL vložte do HTML src alebo CSS url(). Čistý Base64 (všetko za čiarkou) je to, čo chcete, keď systém už typ súboru pozná samostatne — napríklad JSON pole ako { "format": "png", "data": "<čistý base64>" }.
Kedy by som mal vložiť obrázok ako Base64 namiesto odkazu na súbor?
Vkladanie Base64 je užitočné pre malé, často opakovane používané obrázky (ikony, logá, drobná UI grafika), kde úspora jednej HTTP požiadavky prevažuje nad ~33% penalizáciou veľkosti, alebo v kontextoch, kde samostatný súbor nie je praktický, ako vložené e-maily alebo jednosúborové HTML exporty. Pre veľké fotky alebo čokoľvek opakovane používané na mnohých stránkach je takmer vždy lepší normálny prepojený súbor s vyrovnávacou pamäťou prehliadača.
Zmení alebo skomprimuje konverzia na Base64 môj obrázok?
Nie. Base64 je bezstratové textové kódovanie presne pôvodných bajtov — nedotýka sa pixelov, rozlíšenia ani kompresie. Ak chcete menší súbor, najprv skomprimujte obrázok pomocou kompresora obrázkov a potom skomprimovaný výsledok prekonvertujte na Base64.
Nahráva sa môj obrázok niekam?
Nie. Súbor sa číta priamo vo vašom prehliadači pomocou FileReader API a kóduje sa lokálne — nikdy sa neposiela cez sieť.