CodeKitHubCo je tento nástroj?
Base64 je způsob, jak reprezentovat binární data — třeba syrové bajty obrázku — jako čistý text, pomocí pouze písmen, číslic a hrstky symbolů. Protože jde o čistý text, obrázek zakódovaný v Base64 lze vložit přímo dovnitř HTML, CSS nebo JSON místo odkazování na samostatný soubor.
„Data URL“ obalí tento text Base64 malým prefixem (data:image/png;base64,), který prohlížeči řekne, o jaký typ souboru jde, takže ho lze vložit přímo do atributu src nebo url() a vykreslit bez jakéhokoli dalšího požadavku.
Proč ho používat?
- Získejte oba formáty najednou — plnou data URL pro HTML/CSS a čistý Base64 (bez prefixu) pro vložení do JSON nebo konfiguračních souborů.
- Žádná komunikace se serverem navíc: eliminuje jeden HTTP požadavek u malých ikon, avatarů nebo vložených obrázků.
- Zachovává původní bajty souboru přesně — žádné překódování ani ztráta kvality, na rozdíl od nástrojů, které obrázek dekódují a znovu uloží.
- Zobrazuje rozdíl ve velikosti, takže víte, co obětujete za tu pohodlnost.
- Soukromé: soubor se čte lokálně pomocí FileReader API prohlížeče a nikdy neopustí vaše zařízení.
Jak se používá
- Klikněte na oblast pro nahrání nebo do ní přetáhněte soubor s obrázkem.
- Zkopírujte plnou data URL, pokud ji vkládáte do <img src> nebo CSS background-image.
- Zkopírujte čistý Base64 (bez prefixu data:), pokud vkládáte hodnotu dovnitř JSON, YAML nebo jiného konfiguračního formátu, který už typ souboru zná.
- Zkontrolujte poznámku o velikosti — text Base64 je zhruba o třetinu větší než původní binární soubor.
Příklad
Vstup
12KB soubor ikony PNG.Výstup
data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 KB textu) plus stejný řetězec bez prefixu data:.Zvětšení o ~33 % je vlastní kódování Base64 (3 bajty binárních dat se stanou 4 znaky textu) — nejde o chybu nástroje.
Kde se který formát používá
| Formát | Typické použití |
|---|---|
| Plná data URL | HTML <img src="...">, CSS background-image: url(...), vložené obrázky v e-mailech |
| Čistý Base64 | Payloady JSON API, YAML/konfigurační soubory, sloupce BLOB v databázi, vlastní binární protokoly |
Base64 a velikost obrázku — kompromis v praxi
Režie ~33 % znamená, že vkládání přes Base64 je nejlepší nechat pro malé prostředky: 2KB ikona se stane neškodnými ~2,7 KB vloženého textu, ale 500KB fotka se stane ~665 KB textu sedícího přímo v HTML, což zpomaluje zpracování a nelze ji cachovat odděleně od stránky.
Pokud vkládáte mnoho obrázků nebo větší obrázky, zvažte přínos ušetřeného požadavku proti nákladu na váhu stránky — a zvažte nejdřív kompresi.
Časté dotazy
Proč je řetězec Base64 tak mnohem větší než můj soubor s obrázkem?
Base64 kóduje každé 3 bajty binárních dat jako 4 textové znaky, což je pevná režie navíc ~33 %. U 100KB obrázku počítejte s přibližně 133 KB textu Base64. To je normální a nevyhnutelné — je to cena za reprezentaci binárních dat jako bezpečného, přenositelného textu.
Jaký je rozdíl mezi data URL a čistým řetězcem Base64?
Data URL obsahuje prefix data:image/png;base64,, který řekne prohlížeči nebo vykreslovači, jaký MIME typ následující text dekóduje. Plnou data URL vložte do HTML src nebo CSS url(). Čistý Base64 (vše za čárkou) chcete tehdy, když systém typ souboru zná zvlášť jiným způsobem — třeba pole JSON jako { "format": "png", "data": "<raw base64>" }.
Kdy mám obrázek vložit jako Base64 místo odkazu na soubor?
Vkládání Base64 se hodí pro malé, často opakovaně používané obrázky (ikony, loga, drobná UI grafika), kde ušetření jednoho HTTP požadavku převáží penalizaci ~33 % velikosti navíc, nebo v kontextech, kde samostatný soubor není praktický, jako vložené e-maily nebo jednosouborové HTML exporty. Pro velké fotky nebo cokoli opakovaně používaného na mnoha stránkách je téměř vždy lepší normální odkazovaný soubor s cachováním v prohlížeči.
Mění nebo komprimuje převod na Base64 můj obrázek?
Ne. Base64 je bezztrátové textové kódování přesně původních bajtů — nedotýká se pixelů, rozlišení ani komprese. Pokud chcete menší soubor, nejdřív obrázek zkomprimujte kompresorem obrázků a teprve zkomprimovaný výsledek převeďte na Base64.
Nahrává se můj obrázek někam?
Ne. Soubor se čte přímo ve vašem prohlížeči pomocí FileReader API a kóduje se lokálně — nikdy se neposílá po síti.