Imagem para Base64
Converte qualquer imagem em um data URI Base64 pronto pra uso inline em HTML, CSS ou Markdown. O arquivo fica no seu browser.
No image yet.
Digite uma entrada acima para ver o resultado.
Para que serve?
Um data URI embute os bytes de um arquivo direto numa URL usando Base64 — sem request separada, sem arquivo externo. Este conversor lê qualquer imagem que você soltar e gera uma string data:image/...;base64,... pronta pra colar em HTML, CSS, Markdown ou JSON. O arquivo nunca sai do seu browser; a conversão acontece via FileReader.readAsDataURL.
Quando usar
- Ícones pequenos (< 4 KB) inline em CSS — economiza uma request HTTP e evita um flash no primeiro paint.
- E-mails HTML autocontidos, demos em arquivo único ou PWAs offline-capable.
- Colagens rápidas em notas Markdown, páginas do Notion ou threads de chat que precisam viajar com a imagem.
- Fixtures de teste e arquivos de snapshot em que você quer o asset commitado junto com o teste.
Cuidados comuns
- Penalidade de tamanho. Base64 infla o payload em uns 33%. Acima de 4–8 KB, o custo de embutir supera a request economizada, especialmente porque data URIs não podem ser cacheados separadamente pelo browser.
- Sem deduplicação entre páginas. Cada página que embute o URI envia os bytes de novo. Pra qualquer coisa reutilizada, mantenha como URL real pra que o browser cacheie uma vez.
- Clientes de e-mail variam. Os clientes modernos renderizam data URIs, mas o Outlook no Windows historicamente bloqueia em
<img src>. Anexos CID ainda são mais seguros pra envio em massa. - SVG ≠ raster. Pra SVG, embutir o markup direto (ou fazer url-encoding do SVG) costuma ficar menor que Base64.