Obrázok na Base64
Preveď akýkoľvek obrázok na Base64 data URI pripravené na inline použitie v HTML, CSS alebo Markdown. Súbory zostávajú v prehliadači.
No image yet.
Zadaj vstup vyššie, aby si videl výsledok.
Vytvoril JXXR1 · ♥ Sponzorovať · ☕ Kúp mi kávu
Načo to slúži?
Premení obrázok na Base64 data URI — reťazec, ktorý môžeš inline vložiť do HTML <img src="data:image/png;base64,...">, CSS background-image: url(data:...) alebo Markdown. Súbor sa konvertuje v tvojom prehliadači a nikam sa neuploaduje.
Kedy to použiť
- Inline SVG/PNG ikona, ktorá ide do CSS a chceš sa vyhnúť dodatočnému HTTP requestu.
- Pripojenie obrázka do e-mailovej šablóny, ktorá nemôže linkovať externé zdroje.
- Príprava data URI pre Markdown dokument, ktorý sa rozdistribuuje samostatne.
- Demo / prototyp bez backendu na hosting súborov.
Časté chyby
- Base64 zväčší súbor o ~33 %. Pre veľké obrázky to nemusí byť výhra.
- Nemôže sa cache-ovať samostatne. Inline obrázok sa znovu stiahne s každou stránkou.
- Veľké data URI v HTML zvyšujú parse time. Pre obrázky > 1–2 KB radšej externý súbor.
- SVG netreba base64. Inline SVG ako
<svg>element je menší a flexibilnejší. - MIME type. Uisti sa, že
image/jpegvs.image/pngsedí so skutočným formátom súboru.