Como converter uma imagem para URI de dados Base64
Incorpore ícones pequenos e marcas d’água direto em HTML, CSS, JSON ou modelos de e-mail como Base64 — sem requisição HTTP extra nem arquivos faltando.
Mais utilitários que combinam com este guia:
Por que isso importa
Um e-mail transacional precisa de um logo pequeno. Linkar uma imagem remota funciona até o cliente bloquear carregamentos remotos “por privacidade”. Solução: embutir o logo como URI data:image/png;base64,.... O custo é ~33% de tamanho a mais, mas para ativos minúsculos (abaixo de 4 KB), a economia de latência e a garantia de renderização compensam. O mesmo vale para favicons inline, ícones de fundo em CSS e sprites SVG em geradores estáticos.
Três cenários reais
Codifique o logo 80×80, cole o URI de dados no src do <img>.
Sem pedido para carregar imagens remotas
background-image: url(data:image/svg+xml;base64,...) mantém o pacote autocontido.
Uma requisição a menos
Codifique a miniatura e embuta no JSON; o cliente renderiza sem novo fetch.
Um único round-trip
Passo a passo
Abra a ferramenta Imagem para Base64.
Solte a imagem
PNG, JPEG, WebP, GIF, SVG, ICO. A ferramenta lê via File API do navegador.
Escolha o formato de saída
URI completa (
data:image/png;base64,...) — parasrcou CSS. Base64 cru — para campos JSON onde o prefixo é tratado no servidor.Escolha codificação URL-safe
Base64 padrão com
+/serve em HTML/CSS. URL-safe (-_) ajuda em query string ou nome de arquivo.Copie ou baixe
O texto também pode ser baixado como
.txtpara strings muito longas.
Origem
icon.svg (412 bytes)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2L2 22h20L12 2z"/>
</svg>URI de dados
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDJMMiAyMmgyMEwxMiAyeiIvPjwvc3ZnPg==
Dicas avançadas
- Embuta só ativos pequenos (≤ 4 KB). Imagens grandes incham HTML/CSS/JSON além do ganho da requisição a menos.
- Prefira SVG embutido para ícones. SVG compacta bem em Base64 e escala sem perda.
- Em CSS, use
url().background: url(data:image/png;base64,...)é amplamente suportado. - Em e-mail, teste nos clientes. Outlook no Windows já teve suporte estranho a URI de dados; Gmail e Mail modernos costumam funcionar bem.
Armadilhas comuns
Erro comum
URI ultrapassa limites de linha em CSS
Alguns parsers antigos falham em linhas gigantes. CDN para imagens grandes; embuta só o minúsculo.
Erro comum
URI quebra no JSON por causa de "/" na URL
JSON não exige escapar /, mas alguns editores escapam sozinhos. Base64 URL-safe evita o problema.
Erro comum
Imagens inline em HTML quebram por conflito CID
Alguns clientes preferem referências cid: em vez de data:. Teste no destino; ofereça fallback se precisar.
Quando esta não é a ferramenta certa
- Empacotamento em massa no servidor no build — use
url-loaderno Webpack ou sufixo?inlineno Vite. - Processamento de imagem antes de codificar — compacte primeiro com o compactador de imagens.
- Imagens muito grandes — enviar 5 MB em Base64 no JSON é desperdício; sirva por URL na CDN.
FAQ
Qual o custo de tamanho?
Base64 aumenta ~33%. Um PNG de 1 KB vira ~1,37 KB como URI de dados.
O navegador faz cache de imagem embutida?
Não — cada página que usa o mesmo URI reanalisa os bytes. Por isso embutir só vale para itens minúsculos.
Minha imagem é enviada?
Não. O codificador lê localmente e devolve a string na hora.
Próximos passos
- Inverso — cole uma URI de volta em arquivo com Base64 para imagem.
- Compacte antes de codificar: compactador de imagens.
- Converta formato com o conversor de imagens quando só JPEG for aceito.