Image to Base64
Encoder
Upload any image and get its Base64 string or Data URI instantly. Copy with one click, processed entirely in your browser.
Click or drag an image to upload
PNG, JPG, WebP, GIF, SVG
How It Works
Upload Image
Drop or select any image file (PNG, JPG, WebP, GIF, SVG).
Encode
Your image is converted to Base64 instantly in the browser.
Copy
Copy the Base64 string or full Data URI with one click.
Converta imagens em strings Base64 online para as incorporar diretamente em HTML, CSS, JSON ou modelos de email. A ferramenta de imagem para Base64 da ConverterUp gera uma string codificada limpa ou um data URI completo pronto a colar numa folha de estilos, num sprite SVG ou num documento markdown. É útil para apps offline-first, emails transacionais que têm de funcionar sem pedidos externos e para incorporar ícones pequenos, poupando pedidos HTTP. A codificação corre inteiramente no browser, por isso mockups confidenciais e capturas internas nunca saem da sua máquina.
Quando faz mesmo sentido inline em Base64
Inline brilha em ativos abaixo de 4 KB onde o custo de um pedido HTTP separado (DNS, TCP, TLS, cabeçalhos) ultrapassa o overhead de 33 % da codificação Base64. Ícones minúsculos em pseudo-elementos CSS, PNGs de pixel transparente e spinners pequenos são os exemplos canónicos.
Os emails transacionais são o segundo caso óbvio. Os clientes de email bloqueiam pedidos de imagem externos por defeito até o destinatário clicar em 'carregar imagens', por isso logótipos e ícones inline aparecem de imediato. Como os emails ficam arquivados durante anos, inline garante que a imagem ainda renderiza em 2030, mesmo que o seu CDN tenha desaparecido.
PWAs offline-first e relatórios HTML em ficheiro único (faturas para descarregar, dashboards exportados, PDF-como-HTML) beneficiam de inline pela mesma razão: o documento é autocontido e funciona sem rede. O mesmo vale para bundles assinados entregues como ficheiro único.
Onde inline falha: qualquer imagem acima de ~10 KB, ativos reutilizados entre páginas (perde a cache HTTP), animações e frames de vídeo, e tudo o que precisa de lazy-loading. Para esses casos, mantenha um ficheiro real e refira-o por URL — a cache HTTP do browser bate o inline ao fim de 2 a 3 visualizações de página.
ToolSeo.image-to-base64.section1.p5
Compromissos de desempenho que tem de conhecer
A codificação Base64 inflaciona dados binários em exatamente 33,3 %: cada 3 bytes de entrada tornam-se 4 caracteres de saída. Um PNG de 9 KB passa a uma string de ~12 KB. Gzip e brotli recuperam parte (~10 % a 15 % em dados de imagem típicos) mas não conseguem anular todo o overhead.
A perda de cache é o maior castigo para ativos repetidos. Um logótipo de 50 KB referenciado como <img src="/logo.png"> é descarregado uma vez e fica em cache em todas as páginas seguintes. O mesmo logótipo inline em 20 emails ou 20 páginas HTML é descarregado 20 vezes. Para um ativo de página única não importa; para ativos partilhados é um custo real em largura de banda e parse.
O tempo de parse de CSS cresce de forma não-linear com o tamanho da folha em dispositivos modestos. Uma folha que passa de 50 KB para 200 KB por causa de imagens inline pode adicionar dezenas de milissegundos ao first paint em telemóveis Android de gama média. Trate inline como orçamento, não como default.
Memória: o browser mantém os dados descodificados da imagem e a string Base64 original em memória até o documento ser interpretado. Em ativos inline muito grandes, isto pode brevemente duplicar o uso de memória face a um ficheiro referenciado por URL.
ToolSeo.image-to-base64.section2.p5
Estrutura do data URI e onde o colar
O formato de data URI é data:<mime>;base64,<codificado>. Exemplo: data:image/png;base64,iVBORw0KGgo…. O tipo MIME diz ao consumidor como interpretar os bytes — image/png, image/jpeg, image/svg+xml, image/webp, etc. MIME errado e o browser recusa-se a renderizar a imagem, mesmo que os bytes estejam corretos.
Em HTML: <img src="data:image/png;base64,…" alt="...">. Em CSS: background-image: url("data:image/png;base64,…");. Em JSON: guarde o data URI completo como string num campo e atribua-o ao src na altura de renderizar. Em Markdown:  funciona na maioria dos renderers, mas verifique se o seu não trunca strings longas.
Para SVG, prefira embutir o markup SVG diretamente (mais barato e estilizável por CSS) em vez de o codificar em Base64. Se tiver mesmo de o codificar em Base64, use image/svg+xml como MIME e considere URL-encoding — produz um resultado mais pequeno e legível que Base64 para formatos baseados em texto.
ToolSeo.image-to-base64.section3.p4
ToolSeo.image-to-base64.section3.p5
ToolSeo.image-to-base64.section4.heading
ToolSeo.image-to-base64.section4.p1
ToolSeo.image-to-base64.section4.p2
ToolSeo.image-to-base64.section4.p3
ToolSeo.image-to-base64.section4.p4
ToolSeo.image-to-base64.section4.p5
ToolSeo.image-to-base64.section5.heading
ToolSeo.image-to-base64.section5.p1
ToolSeo.image-to-base64.section5.p2
ToolSeo.image-to-base64.section5.p3
ToolSeo.image-to-base64.section5.p4
ToolSeo.image-to-base64.section5.p5
Perguntas frequentes
Quando devo incorporar uma imagem em Base64?
Base64 faz sentido para ativos muito pequenos (abaixo de 4 KB) onde um pedido HTTP separado custa mais do que o overhead de tamanho. Para imagens maiores mantenha ficheiros normais, já que Base64 aumenta o tamanho cerca de 33 %.
Existe um limite de tamanho de ficheiro?
A ConverterUp aceita imagens até 25 MB. Strings codificadas podem ficar muito longas, por isso a maioria dos editores e clientes de email tem dificuldade a partir de alguns megabytes.
Qual a diferença entre uma string Base64 e um data URI?
Uma string Base64 são apenas os bytes codificados, enquanto um data URI prefixa o tipo MIME, como data:image/png;base64,.... Use o data URI completo em src ou url() e a string crua quando indicar o tipo separadamente.
Que formatos de imagem são suportados?
PNG, JPG/JPEG, WebP, AVIF, GIF e SVG. O tipo MIME no data URI é definido automaticamente com base no ficheiro carregado.
Posso copiar o resultado diretamente para JSON sem escapar?
As strings Base64 contêm apenas <code>A-Z</code>, <code>a-z</code>, <code>0-9</code>, <code>+</code>, <code>/</code> e <code>=</code> — todos seguros dentro de uma string JSON. O data URI completo também é seguro em JSON. O único caractere que pode ter de escapar é a aspa JSON que envolve o valor; os botões de copiar da ConverterUp já produzem uma string pronta para JSON.
Devo usar Base64 ou URL encoding para inline de SVG?
Use <strong>URL encoding</strong> para SVG. O SVG é texto, por isso percent-encoding apenas dos caracteres inseguros (<code>%, #, <, ></code>, aspas) produz um resultado mais pequeno e legível que Base64. Muitas ferramentas de SVG-para-data-URI usam URL encoding por defeito por essa razão.
ToolSeo.image-to-base64.q7
ToolSeo.image-to-base64.a7
ToolSeo.image-to-base64.q8
ToolSeo.image-to-base64.a8