Conversor de Imagem para Base64

O que é uma Imagem Base64 (Data URI)?

<!-- The same 1×1 transparent PNG, four ways -->

<!-- HTML -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" alt="pixel">

/* CSS */
.badge {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==");
}

<!-- Markdown -->
![pixel](data:image/png;base64,iVBORw0KGgo…)

// JSON
{ "mime": "image/png", "data": "iVBORw0KGgo…" }

Recursos Principais

Exemplos

transparent-1x1.png  (um PNG de 68 bytes)

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

icon.svg

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…" alt="icon">

photo.jpg  (12 KB)

![photo](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ…)

Como Converter uma Imagem para Base64

1. 1

   Adicione sua imagem

   Arraste uma imagem para a zona de soltar, clique para procurar, ou cole da área de transferência com Ctrl+V / Cmd+V. PNG, JPG, GIF, WebP, SVG, ICO e BMP são todos suportados e codificados inteiramente no seu navegador.

2. 2

   Escolha um formato de saída

   Escolha Data URI, Base64 bruto, HTML, background CSS, Markdown ou JSON nas abas. Verifique a barra de metadados para o aumento de tamanho e o selo de recomendação para saber se incorporar vale a pena.

3. 3

   Copie ou baixe

   Clique em Copiar para pegar o trecho, ou Baixar para salvá-lo como arquivo. Para reverter o processo, mude para a aba Base64 → Imagem, cole uma string e baixe a imagem reconstruída.

Armadilhas Comuns

data:base64,iVBORw0KGgo…
<!-- no MIME type — will not render -->

data:image/png;base64,iVBORw0KGgo…
<!-- correct: image/png -->

data:image/png;base64,iVBORw0KGgoAAAANS
UhEUgAAAAEAAAABCAYAAAA…
<!-- embedded newline breaks the attribute -->

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAA…
<!-- single unbroken line -->

…WjR9awAAAABJRU5ErkJggg
<!-- missing trailing == -->

…WjR9awAAAABJRU5ErkJggg==
<!-- complete with padding -->

/* 380 KB hero photo inlined into a global stylesheet */
.hero { background-image: url("data:image/jpeg;base64,/9j/…(½ MB of text)…"); }

/* Serve it as a cached file instead */
.hero { background-image: url("/img/hero.jpg"); }

Casos de Uso Comuns

Incorporar um logo ou ícone em CSS

Solte um pequeno ícone PNG ou SVG, copie o trecho de background-image em CSS e cole na sua folha de estilos para eliminar uma requisição HTTP de um recurso que raramente muda. Mantenha abaixo de ~2 KB (observe o selo verde) para que a folha de estilos permaneça enxuta.

Incorporar imagens em e-mail HTML

Clientes de e-mail frequentemente bloqueiam imagens remotas. Codifique seu logo como data URI e cole o elemento no template para que ele renderize sem uma busca no servidor. Teste nos clientes — mantenha as incorporações em ícones pequenos, não fotos.

Markdown e READMEs autocontidos

Quando você não pode hospedar uma imagem — uma issue do GitHub, um notebook, um documento offline — a saída em Markdown incorpora a figura diretamente no arquivo, para que ela viaje junto com o texto. Ideal para diagramas e selos pequenos.

Imagens dentro de JSON ou payloads de API

Precisa enviar uma miniatura dentro de um documento JSON ou um arquivo de configuração? A saída JSON fornece um objeto { mime, data } que você pode colocar diretamente, e o decodificador recupera a imagem do outro lado.

Depuração rápida de data URI

Encontrou um data: URI misterioso numa folha de estilos ou numa resposta de API? Cole-o na aba Base64 → Imagem para ver o que ele realmente é, ler suas dimensões reais e baixá-lo como um arquivo normal para inspeção mais detalhada.

Widgets e bookmarklets de arquivo único

Bookmarklets e widgets incorporáveis precisam ser autocontidos, com zero dependências externas. Incorporar seus ícones como Base64 mantém tudo num único arquivo que funciona não importa onde seja colocado.

Detalhes Técnicos

Como Funciona a Codificação Base64

Base64 pega o fluxo binário da imagem três bytes (24 bits) de cada vez e o divide em quatro grupos de 6 bits, cada um mapeado para um caractere no alfabeto de 64 símbolos. Quando o comprimento da entrada não é múltiplo de três, um ou dois caracteres de preenchimento = marcam o resto. Essa proporção de 3 para 4 é o motivo de o texto codificado ser cerca de 33% maior do que a fonte. A ferramenta calcula o comprimento em bytes decodificado diretamente do comprimento da string e do preenchimento, então os valores de tamanho que ela informa são exatos, não estimados.

Detecção de MIME e Magic Bytes

Quando você codifica um arquivo, seu tipo MIME vem do objeto File do navegador. Quando você decodifica uma string Base64 bruta sem prefixo data:, a ferramenta inspeciona os caracteres iniciais, que correspondem aos magic bytes da imagem: iVBORw0KGgo para PNG, /9j/ para JPEG, R0lGOD para GIF, UklGR para WebP, e PHN2Zy ou PD94bWw para SVG. Isso permite que o decodificador reconstrua um data URI correto e baixe com a extensão de arquivo certa, mesmo quando a entrada é apenas o payload puro.

Processamento Apenas Local

A codificação usa o readAsDataURL da API FileReader, que retorna um data URI sintetizado inteiramente no navegador. A decodificação para download usa atob mais um Uint8Array para reconstruir o binário, depois um Blob e uma object URL — novamente sem rede envolvida. O resultado é uma ferramenta que você pode rodar offline e na qual pode confiar com imagens confidenciais, porque os bytes nunca saem da página. Você pode verificar o comportamento de zero requisições nas ferramentas de desenvolvedor do seu navegador.

Boas Práticas

Incorpore Apenas Recursos Pequenos e Estáveis

O ponto ideal para Base64 são recursos abaixo de ~2 KB que mudam raramente e aparecem em poucas páginas — ícones, logos minúsculos, sprites de UI. Acima de ~10 KB, a penalidade de tamanho e o cache perdido superam a requisição economizada, especialmente agora que o HTTP/2 torna requisições extras baratas. Deixe o selo de recomendação guiá-lo, e sirva fotos e gráficos grandes como arquivos normais em cache.

Prefira Codificação de URL para SVG

SVG é texto, então o Base64 o infla sem ganho. Ao incorporar SVG em CSS ou HTML, codifique a marcação em URL — geralmente é menor, permanece legível por humanos e comprime melhor com gzip/brotli. Reserve SVG em Base64 para pipelines que especificamente o exigem. Nosso Codificador/Decodificador de URL cuida da codificação em percentual.

Sempre Defina o Tipo MIME Correto

Um data URI só é renderizado se seu tipo MIME corresponder ao conteúdo: image/png, image/jpeg, image/gif, image/webp, image/svg+xml. Um tipo errado ou ausente é a razão número um de uma imagem incorporada não aparecer. Quando você copia desta ferramenta, o tipo é definido para você; se você montar URIs à mão, confira o prefixo duas vezes.

Comprima Antes de Codificar

Como o Base64 adiciona ~33% sobre o tamanho do arquivo, encolher a fonte primeiro compensa duas vezes. Passe imagens pelo nosso Compressor de Imagens — ou exporte nas dimensões certas — antes de codificar, para que o data URI resultante seja o menor possível. Um PNG comprimido de 4 KB vence um original de 40 KB tanto como arquivo quanto incorporado.

Nunca Confie em Base64 para Privacidade

Base64 é trivialmente reversível e não oferece proteção. Não o use para ocultar conteúdo de imagem sensível — qualquer um pode decodificá-lo instantaneamente, inclusive com a aba nesta página. Se o conteúdo precisa ser protegido, use controles de acesso reais e criptografia no servidor, e sirva a imagem por um endpoint autenticado.

Perguntas Frequentes

O que faz este conversor de Imagem para Base64?

Ele lê uma imagem que você solta, cola ou seleciona e codifica seus bytes como uma string Base64 — inteiramente dentro do seu navegador. Você obtém o Base64 bruto, um data URI pronto para uso (data:image/png;base64,…) e trechos de copiar e colar para em HTML, background-image em CSS, Markdown e JSON. Uma barra de metadados informa o tamanho original do arquivo, o tamanho codificado, o aumento percentual exato (Base64 é cerca de 33% maior), as dimensões em pixels e o tipo MIME. Nada é enviado: a codificação roda localmente via a API FileReader, então a mesma ferramenta é segura para capturas de tela, recursos internos e artes ainda não lançadas. Para o caminho inverso, use a aba Base64 → Imagem ou nosso decodificador de Base64 para Imagem.

Minhas imagens são enviadas para um servidor?

Não. Cada etapa acontece no lado do cliente, no seu navegador, usando a API FileReader e a codificação de strings do JavaScript. Sua imagem nunca é transmitida, nunca é armazenada e nunca é registrada. Você pode confirmar isso abrindo a aba Rede do seu navegador — codificar uma imagem dispara zero requisições de rede. Isso torna a ferramenta segura para material sensível: capturas de tela de produtos antes do lançamento, diagramas internos, recursos de clientes e qualquer coisa sob NDA. Não há limite de tamanho de arquivo imposto por um upload, apenas o limite prático de quão grande é uma string Base64 que seu navegador e o sistema de destino conseguem lidar confortavelmente.

Quanto maior o Base64 deixa uma imagem?

Base64 codifica cada 3 bytes de dados binários como 4 caracteres ASCII, então a string codificada fica cerca de 33% maior do que o arquivo original (mais alguns bytes de preenchimento e o prefixo data:). Um PNG de 9 KB se torna cerca de 12 KB de texto. Esse overhead é a razão mais importante para não converter imagens grandes para Base64: você envia mais bytes e, como a string está incorporada no seu HTML ou CSS, esses bytes são rebaixados toda vez que o arquivo que os contém muda e não podem ser armazenados em cache de forma independente. A ferramenta mostra o aumento exato para o seu arquivo específico na barra de metadados, para que você decida com números reais.

Quando devo usar uma imagem Base64 em vez de um arquivo normal?

Base64 (como data URI) é uma boa opção para recursos pequenos que mudam raramente, onde evitar uma requisição HTTP separada importa mais do que o cache: ícones e logos minúsculos embutidos em CSS, imagens incorporadas em e-mail HTML (muitos clientes bloqueiam imagens externas mas renderizam data URIs), widgets ou bookmarklets de arquivo único que precisam ser autocontidos, sprites SVG e imagens armazenadas dentro de payloads JSON/API. Uma regra prática: abaixo de cerca de 2 KB e usada em uma ou duas páginas, incorporar costuma valer a pena. O selo de recomendação desta ferramenta codifica exatamente essa heurística — verde abaixo de 2 KB, âmbar até 10 KB, vermelho acima.

Quando NÃO devo usar imagens Base64?

Evite Base64 para qualquer coisa grande ou reutilizada em várias páginas. Quatro razões concretas: (1) o aumento de ~33% no tamanho significa mais bytes pela rede; (2) uma imagem incorporada não pode ser armazenada em cache por conta própria — ela é rebaixada a cada mudança no HTML ou CSS que a contém, e repetida em cada página que a embute; (3) decodificar um data URI grande custa CPU e bateria, o que é perceptível no celular; e (4) você perde imagens responsivas (srcset/sizes) e o lazy-loading. Como o HTTP/2 multiplexa muitas requisições pequenas de forma barata, a razão original para incorporar — reduzir a contagem de requisições — raramente se aplica hoje. Para fotos, imagens hero ou qualquer coisa acima de ~10 KB, um arquivo normal em cache quase sempre carrega mais rápido. Se o objetivo é um arquivo menor, passe-o primeiro pelo nosso Compressor de Imagens.

Como uso a saída Base64 em HTML e CSS?

Para HTML, mude para a aba HTML e cole o elemento gerado: . Para CSS, use a aba CSS, que envolve o data URI em background-image: url("data:image/png;base64,…"). Ambos funcionam em qualquer lugar onde uma URL é aceita — src de img, background em CSS, mask-image, até tags link de favicon. O esquema data: é suportado por todos os navegadores modernos. Uma ressalva: data URIs muito longos em HTML inline podem prejudicar a legibilidade e, no CSS, inchar a folha de estilos enviada a todos os visitantes, então reserve a incorporação para recursos genuinamente pequenos.

Quais formatos de imagem são suportados?

PNG, JPEG/JPG, GIF (incluindo animado), WebP, SVG, ICO e BMP são todos suportados, além de AVIF quando o navegador consegue decodificá-lo. Como a ferramenta codifica os bytes brutos em vez de re-renderizar a imagem, GIFs animados permanecem animados, PNGs transparentes mantêm seu canal alfa e SVGs continuam totalmente escaláveis. O tipo MIME é lido do próprio arquivo e, quando você cola Base64 bruto no decodificador, inferido dos magic bytes dos dados. Não há conversão de formato durante a codificação — a saída representa exatamente o arquivo que você forneceu.

Por que o SVG é um caso especial?

SVG é texto XML, não binário, então o Base64 na verdade o deixa maior e mais difícil de ler sem nenhum benefício. Para incorporar SVG em CSS ou HTML, codificar a marcação em URL (codificando em percentual alguns caracteres como #, <, > e aspas) costuma ser menor do que Base64 e mantém o código-fonte legível e amigável ao gzip. Esta ferramenta ainda oferece saída SVG em Base64 porque alguns pipelines a exigem, mas se você está otimizando CSS à mão, prefira um data URI codificado em URL. Nosso Codificador/Decodificador de URL ajuda nessa abordagem.

Base64 é o mesmo que criptografia?

Não. Base64 é uma codificação, não criptografia — é totalmente reversível por qualquer pessoa, sem necessidade de chave. Ele existe para representar dados binários usando um conjunto seguro de caracteres ASCII imprimíveis, de modo que os dados sobrevivam ao transporte por sistemas que só lidam com texto (HTML, JSON, cabeçalhos de e-mail, URLs). Qualquer um pode decodificar uma string Base64 de volta para a imagem original em segundos, inclusive com a aba Base64 → Imagem aqui. Nunca trate Base64 como forma de ocultar ou proteger conteúdo de imagem sensível; ele oferece zero confidencialidade.

Posso incorporar uma imagem Base64 num e-mail?

Sim, e é um dos melhores usos da técnica. Muitos clientes de e-mail bloqueiam imagens hospedadas externamente por padrão por privacidade, o que quebra layouts que dependem de logos remotos. Incorporar imagens pequenas como data URIs garante que elas sejam renderizadas imediatamente, sem uma busca no servidor. As contrapartidas: alguns clientes mais antigos (notadamente certas versões do Outlook) têm suporte irregular a data URI, e incorporações grandes inflam o tamanho da mensagem que cada destinatário baixa. Mantenha as imagens incorporadas pequenas — logos e ícones, não fotografias — e teste nos clientes de destino.

Por que minha imagem Base64 não é renderizada?

As causas mais comuns: um tipo MIME ausente ou incorreto no prefixo data: (use image/png para PNG, image/jpeg para JPG, image/svg+xml para SVG), espaços em branco ou quebras de linha inseridos acidentalmente na string, uma cópia truncada que perdeu o preenchimento final (= ou ==), ou colar apenas o Base64 bruto sem o prefixo data:…;base64, onde se espera uma URL. O decodificador desta ferramenta é tolerante — ele remove espaços em branco, aceita entrada com ou sem o prefixo e infere o MIME a partir dos magic bytes da imagem — então colar sua string na aba Base64 → Imagem é a forma mais rápida de confirmar se os dados em si são válidos.