Converter Imagem
para Base64
Converta qualquer imagem em texto Base64 ou Data URI para usar no HTML e no CSS, na hora. Copie com um clique — tudo processado no seu navegador.
Clique ou arraste uma imagem para enviar
PNG, JPG, WebP, GIF, SVG
Como funciona
Envie a imagem
Solte ou escolha qualquer imagem (PNG, JPG, WebP, GIF, SVG).
Codifique
Sua imagem é convertida para Base64 na hora, no navegador.
Copie
Copie o texto Base64 ou o Data URI completo com um clique.
Converta imagem para Base64 online e embuta direto no HTML, CSS, JSON ou em modelos de e-mail. A ferramenta de imagem para Base64 do ConverterUp gera uma string codificada limpa ou um data URI completo, pronto para colar em uma folha de estilos, em um SVG ou em um documento markdown. É útil para apps que funcionam offline, e-mails transacionais que precisam aparecer sem requisições externas e ícones pequenos que economizam requisições HTTP. A codificação roda inteira no navegador, então mockups confidenciais e prints internos nunca saem da sua máquina.
Quando vale a pena usar imagem em Base64
Embutir compensa em arquivos abaixo de 4 KB, onde o custo de uma requisição HTTP separada (DNS, TCP, TLS, cabeçalhos) passa dos 33% extras da codificação Base64. Ícones minúsculos em pseudo-elementos CSS, PNGs de pixel transparente e pequenos spinners são os exemplos clássicos.
Os e-mails transacionais são o segundo caso óbvio. Os clientes de e-mail bloqueiam imagens externas até o destinatário clicar em 'mostrar imagens', então logotipos e ícones embutidos aparecem na hora. Como e-mails ficam arquivados por anos, embutir garante que a imagem ainda apareça em 2030, mesmo que o seu CDN tenha sumido.
PWAs offline e relatórios HTML em arquivo único (notas para baixar, dashboards exportados, PDF em HTML) se beneficiam pelo mesmo motivo: o documento é independente e funciona sem internet. O mesmo vale para pacotes assinados entregues como arquivo único.
Onde embutir não funciona: imagens acima de ~10 KB, arquivos reaproveitados em várias páginas (perde o cache HTTP), animações e quadros de vídeo, e tudo que precisa de carregamento preguiçoso. Nesses casos, mantenha um arquivo de verdade e aponte por URL — o cache do navegador ganha do Base64 depois de 2 ou 3 visualizações.
Impacto no desempenho que você precisa conhecer
A codificação Base64 aumenta dados binários em exatamente 33,3%: cada 3 bytes viram 4 caracteres. Um PNG de 9 KB vira uma string de ~12 KB. Gzip e brotli recuperam uma parte (~10% a 15% em imagens típicas), mas não anulam todo o aumento.
A perda de cache é o maior custo em arquivos repetidos. Um logo de 50 KB usado como <img src="/logo.png"> é baixado uma vez e fica em cache nas páginas seguintes. O mesmo logo embutido em 20 e-mails ou 20 páginas é baixado 20 vezes. Para uma página única tanto faz; para arquivos compartilhados é um custo real de banda e processamento.
O tempo de processamento do CSS cresce de forma não linear com o tamanho da folha em aparelhos mais simples. Uma folha que passa de 50 KB para 200 KB por causa de imagens embutidas pode somar dezenas de milissegundos ao primeiro carregamento em celulares Android intermediários. Trate o Base64 como orçamento, não como padrão.
Memória: o navegador mantém a imagem decodificada e a string Base64 na memória até o documento ser processado. Em imagens embutidas muito grandes, isso pode dobrar o uso de memória por um tempo, comparado a um arquivo apontado por URL.
Estrutura do data URI e onde colar
O formato do data URI é data:<mime>;base64,<codificado>. Exemplo: data:image/png;base64,iVBORw0KGgo…. O tipo MIME diz como interpretar os bytes — image/png, image/jpeg, image/svg+xml, image/webp etc. Com o MIME errado, o navegador não mostra a imagem, mesmo com os bytes certos.
No HTML: <img src="data:image/png;base64,…" alt="...">. No CSS: background-image: url("data:image/png;base64,…");. No JSON: guarde o data URI completo como string em um campo e coloque no src na hora de renderizar. No Markdown:  funciona na maioria dos renderizadores, mas confira se o seu não corta strings longas.
Para SVG, prefira colar o código SVG direto (mais leve e estilizável com CSS) em vez de codificar em Base64. Se precisar mesmo codificar, use image/svg+xml como MIME e considere URL encoding — fica menor e mais legível que Base64 em formatos de texto.
Perguntas frequentes
Como usar uma imagem Base64 no HTML?
Copie o data URI completo e cole no atributo src: <code><img src="data:image/png;base64,…" alt="..."></code>. No CSS, use <code>background-image: url("data:image/png;base64,…")</code>. Vale a pena para imagens pequenas, abaixo de 4 KB.
Existe limite de tamanho de arquivo?
Não há limite fixo, mas a string gerada fica cerca de 33% maior que o arquivo e muito longa — a maioria dos editores e clientes de e-mail tem dificuldade acima de alguns megabytes, então o Base64 é melhor para imagens pequenas.
Qual a diferença entre string Base64 e data URI?
A string Base64 são só os bytes codificados; o data URI coloca o tipo MIME na frente, como data:image/png;base64,.... Use o data URI completo em src ou url() e a string pura quando o tipo for informado separadamente.
Quais formatos de imagem são aceitos?
PNG, JPG/JPEG, WebP, GIF e SVG. O tipo MIME do data URI é definido automaticamente a partir do arquivo enviado.
Posso colar o resultado direto em JSON sem escapar?
Strings Base64 só têm <code>A-Z</code>, <code>a-z</code>, <code>0-9</code>, <code>+</code>, <code>/</code> e <code>=</code> — tudo seguro dentro de uma string JSON. O data URI completo também é seguro. Os botões de copiar do ConverterUp já entregam uma string pronta para JSON.
Para SVG, uso Base64 ou URL encoding?
Use <strong>URL encoding</strong> para SVG. Como SVG é texto, codificar só os caracteres problemáticos (<code>%, #, <, ></code>, aspas) gera um resultado menor e mais legível que Base64. Muitas ferramentas de SVG para data URI usam URL encoding por padrão por isso.