Conversor de Imagem ↔ Base64

Conversor de Imagem para Base64 — Data URI inline

Converta imagens (PNG, JPG, GIF, SVG, WebP) em strings Base64 (Data URI) que podem ser embutidas direto em HTML, CSS, JSON, e-mail ou bancos de dados. Faz também o caminho inverso (Base64 → imagem para visualizar e baixar). Tudo 100% no navegador, nada é enviado para servidor.

O que é Base64?

Base64 é um sistema de codificação que transforma dados binários (imagens, áudios, arquivos) em uma string ASCII com apenas 64 caracteres possíveis: A-Z, a-z, 0-9, +, / e = (padding).

Foi inventado para permitir transmissão de arquivos binários por protocolos que esperam texto, como SMTP (e-mail), HTTP (parte body) e HTML.

Data URI: o formato completo

Uma imagem Base64 vira um Data URI com o formato:

data:[mime-type];base64,[base64-string]

Exemplo:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

Onde usar Data URI / Base64

1. HTML inline (sem requisição extra)

<img src="data:image/png;base64,iVBOR..." alt="logo">

2. CSS background-image

.logo {
  background-image: url('data:image/png;base64,iVBOR...');
}

3. JSON / API

{
  "user_avatar": "data:image/jpeg;base64,/9j/4AAQ...",
  "name": "João"
}

4. E-mail HTML inline

Muitos clientes de e-mail bloqueiam imagens externas. Embedar com Base64 garante que a imagem apareça imediatamente sem clicar em "exibir imagens".

5. Markdown

![logo](data:image/png;base64,iVBOR...)

Vantagens do Base64

• ✅ Reduz requisições HTTP (importante para performance em pequenos ícones)
• ✅ Imagem viaja com o HTML/CSS — não precisa hospedar separadamente
• ✅ Sem CORS ou problemas de domínio
• ✅ Cache junto com o documento (HTML ou CSS)
• ✅ Funciona em e-mail sem servidor de imagens

Desvantagens

• ❌ 33% maior que o arquivo original (overhead do encoding)
• ❌ Browser não pode cachear separadamente: se a imagem mudar, recarrega tudo
• ❌ Não é otimizável (compressor de imagens não tem efeito direto)
• ❌ Dificulta inspeção em DevTools (string gigante)
• ❌ Aumenta tamanho do HTML/CSS — afeta tempo de download

Quando USAR Base64

• Ícones pequenos (< 5 KB), usados em vários lugares
• Imagens em e-mail HTML
• Logos em PDFs gerados
• Documentos exportáveis (HTML standalone)
• Assinatura de e-mail com logo
• Apps Electron / web standalone
• Templates de slides exportáveis

Quando NÃO usar

• Imagens grandes (> 50 KB): inflaciona HTML
• Imagens que mudam frequentemente: cache vira inimigo
• Imagens em galerias (lazy loading não funciona em Base64)
• Quando o CDN já cuida bem (CloudFront, Cloudflare)

Como o encoding funciona (matemática simples)

1. Pega o arquivo binário (bytes de 8 bits cada)
2. Agrupa em blocos de 24 bits (3 bytes)
3. Reagrupa em 4 chunks de 6 bits cada
4. Cada 6 bits = 1 caractere da tabela Base64
5. Adiciona padding "=" no final se necessário

Resultado: cada 3 bytes originais viram 4 chars Base64 → 33% maior.

Limite máximo de Data URI no navegador

Otimização: comprima antes de converter

Como Base64 aumenta 33% o tamanho, é crítico otimizar a imagem ANTES:

1. Use Comprimir Imagem para reduzir 50-80% sem perda visível
2. Considere converter para WebP — formato moderno mais leve
3. Para ícones, use SVG (em vez de PNG) — escalável e quase sempre menor
4. Redimensione para o tamanho real de uso (não codifique imagem 1920×1080 pra mostrar 100×100)

Privacidade desta ferramenta

• ✅ 100% no navegador via FileReader API
• ✅ Imagem nunca sai do seu computador
• ✅ Sem cadastro, sem cookies, sem rastreamento
• ✅ Use em rede corporativa sem temer vazamento

Decodificar (Base64 → Imagem)

A ferramenta também faz o caminho inverso: cole uma string Base64 (com ou sem prefixo Data URI), e você vê a imagem renderizada e pode baixá-la. Útil quando você recebe um JSON ou e-mail com imagem embutida.

Detecta automaticamente o tipo de imagem analisando os primeiros bytes (PNG: 89 50 4E 47, JPG: FF D8 FF, etc.).

Perguntas frequentes

Qual a diferença entre Base64 e Base32?

Base32 usa 32 caracteres (apenas A-Z + 2-7), evita confusão visual (sem 0 e O, sem 1 e I), mas é 60% maior. Base64 é mais comum.

Por que tem "=" no final?

É padding. Base64 codifica em blocos de 3 bytes. Se o arquivo não é múltiplo de 3, adiciona "=" para completar. 1 ou 2 "=" no máximo.

Base64 criptografa a imagem?

NÃO. É apenas codificação, não criptografia. Qualquer um pode decodificar trivialmente. Não use para dados sensíveis.

Posso usar pra esconder marca dágua?

Não. Base64 é facilmente decodificado por qualquer usuário curioso (DevTools mostra tudo).

O Data URI funciona em e-mail Gmail?

Sim em maioria dos clientes. Mas Outlook e alguns provedores antigos ainda têm problemas — teste antes de enviar campanhas em massa.