Data URI vložíte přímo do atributu src, CSS a HTML jsou hotové úryvky k vložení do kódu.
Formát pro e-mailové hlavičky a MIME. Zalomený řetězec nefunguje v data URI, CSS ani HTML, proto je volba dostupná jen u čistého Base64.
Vložit můžete i řetězec s uvozovkami, zalomenými řádky nebo bez padding znaků — vstup se srovná sám.
Jak převést obrázek do Base64 a zpátky
- Vyberte směr: z obrázku do Base64, nebo z Base64 zpátky na obrázek.
- Nahrajte soubor, nebo vložte řetězec do textového pole.
- U kódování zvolte tvar výstupu: čistý Base64, data URI, CSS pravidlo nebo hotový tag
img. - Výsledek zkopírujte jedním kliknutím, obrázek si můžete stáhnout.
Data URI v HTML a CSS
Base64 se u obrázků používá hlavně proto, aby se obrázek dal vložit přímo do kódu. Vznikne z něj data URI, tedy adresa, která místo odkazu na soubor nese samotná data.
V HTML má tvar <img src="data:image/png;base64,iVBORw0…">, v CSS background-image: url("data:image/png;base64,…"). Prohlížeč pak obrázek nestahuje zvlášť, protože ho má rovnou v dokumentu. Nástroj oba zápisy vypíše hotové, takže je stačí zkopírovat.
O kolik Base64 zvětší velikost obrázku
Přibližně o třetinu. Base64 kóduje tři bajty do čtyř znaků, takže nárůst je asi 33 % a nástroj vám u každého souboru spočítá, kolik to je konkrétně.
U malé ikony do několika kilobajtů se vkládání do kódu vyplatí. Ušetříte jeden síťový požadavek a obrázek se objeví ve stejném okamžiku jako stránka. U fotografie ne. Nafoukne se, nedá se cachovat zvlášť a při každém načtení stránky se přenese znovu.
Podporované formáty
Nástroj zvládne PNG, JPEG, SVG, WebP, GIF, ICO, BMP, AVIF, HEIC a TIFF. Při dekódování formát pozná z prvních bajtů dat, ne z popisku v data URI. Když se tyhle dvě věci rozcházejí, upozorní na to a nabídne stažení se správnou příponou.
Vstup nemusí být uklizený. Zalomené řádky, mezery, chybějící znaky = na konci i obalující uvozovky si nástroj srovná sám a napíše, co upravil. Nahraný soubor může mít až 15 MB.
Časté otázky
Jak zobrazit Base64 jako obrázek v HTML?
Do atributu src vložte data URI, tedy data:image/png;base64, a za to samotný řetězec. Nástroj tenhle zápis vypíše celý, včetně varianty s hotovým tagem img.
Jak otevřít obrázek zakódovaný v Base64?
Vložte řetězec do pole pro dekódování a obrázek se zobrazí v náhledu s rozměry a velikostí. Odtud si ho můžete stáhnout jako soubor. Prefix data:image/… tam být může, ale nemusí.
Proč se náhled nezobrazí?
Nejčastěji proto, že řetězec není celý. Při kopírování z konzole nebo z logu se konec často ořízne a z neúplných dat obrázek složit nejde. Druhá možnost je, že vstup vůbec obrázek nenese, třeba když jde o zakódovaný text nebo PDF.
Dá se do Base64 převést jakýkoli soubor?
Ano, Base64 je obecné kódování binárních dat a na typu souboru nezáleží. Tenhle nástroj je ale zaměřený na obrázky, protože u nich dělá náhled a kontrolu formátu. Na text a jiná data použijte Base64 enkodér a dekodér.