Selecionar Imagem
Arraste e solte sua imagem aqui
ou clique para selecionar
Prévia da Imagem
Resultado Base64
Selecione uma imagem para ver o código Base64 aqui...
0 KB
Tamanho Original
0 KB
Tamanho Base64
0%
Aumento
--
Tipo MIME
Inserir Base64
Exemplos Rápidos
Pixel Vermelho
1x1 pixel vermelho em PNG
Pixel Transparente
1x1 pixel transparente
Gradiente
Pequeno gradiente azul
Prévia da Imagem
O resultado da decodificação aparecerá aqui
Opções de Codificação
Casos de Uso para Base64 de Imagens
🌐
Redução de Requisições HTTP
Inclua imagens pequenas diretamente no CSS/HTML, reduzindo o número de requisições ao servidor.
📧
E-mails HTML
Use imagens em e-mails sem depender de links externos que podem ser bloqueados.
📱
Aplicações Web Offline
Armazene imagens em localStorage ou IndexedDB como strings Base64.
🔒
Segurança
Evite hotlinking e proteja imagens sensíveis incorporando-as no código.
Informações Técnicas sobre Base64
O que é Base64?
Base64 é um esquema de codificação que converte dados binários em texto ASCII. Cada 3 bytes de dados são convertidos em 4 caracteres ASCII, resultando em um aumento de aproximadamente 33% no tamanho.
Vantagens:
  • Portabilidade: Texto puro que pode ser inserido em qualquer documento de texto
  • Segurança: Pode ser usado em lugares onde dados binários não são permitidos
  • Simplicidade: Fácil de copiar, colar e transmitir
  • Compatibilidade: Suportado por todas as linguagens de programação modernas
Desvantagens:
  • Aumento de tamanho: +33% em comparação com o binário original
  • Processamento: Requer decodificação no cliente
  • Cache: Não pode ser cacheado separadamente pelo navegador
  • Legibilidade: Código longo e difícil de ler
Quando usar Base64 para imagens:
  • Imagens muito pequenas (< 10KB)
  • Ícones e sprites
  • Imagens que aparecem apenas uma vez
  • Ambientes onde requisições HTTP são limitadas
  • Prototipação rápida
Quando NÃO usar Base64 para imagens:
  • Imagens grandes (> 50KB)
  • Imagens que se repetem na página
  • Sites com muitas imagens
  • Quando performance é crítica
  • Imagens que mudam frequentemente
Dica: Para otimização máxima, use Base64 apenas para imagens críticas acima da dobra (above the fold) e prefira sprites SVG para ícones.
Exemplos de Formatos de Saída
Data URL Completo:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==
CSS Background:
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==');
Tag HTML Img:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==" alt="Imagem">
Base64 Puro (sem cabeçalho):
iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==