Converter Qualquer Imagem para Base64
A codificação Base64 transforma dados binários de imagem em um string de texto que pode ser incorporado diretamente em HTML, CSS, JavaScript, JSON ou qualquer formato baseado em texto. Solte uma imagem acima, escolha seu formato de saída (Base64 puro, data URI ou CSS background) e copie o resultado.
Como Funciona a Conversão de Imagem para Base64
Quando um navegador lê um arquivo de imagem, ele processa um fluxo de bytes: blocos de compressão JPEG, chunks PNG, nós XML SVG. Esses bytes incluem valores fora do intervalo ASCII imprimível, o que os torna inseguros para incorporar em documentos de texto.
A codificação Base64 resolve issó mapeando cada 3 bytes de dados binários para 4 caracteres de um alfabeto de 64 caracteres (A-Z, a-z, 0-9, +, /). O resultado é um string ASCII puro que qualquer protocolo baseado em texto pode transportar sem corrupção.
A abordagem FileReader
Esta ferramenta usa a API FileReader do navegador:
const reader = new FileReader();
reader.onload = () => {
const dataUri = reader.result;
// dataUri = "data:image/png;base64,iVBORw0KGgo..."
};
reader.readAsDataURL(file);Opções de Formato de Saída
Base64 puro
O string codificado bruto sem prefixo. Use quando precisar armazenar a imagem em um banco de dados, enviar em um payload de API ou passar para uma função que espera entrada Base64 pura.
Data URI
Um data URI completo com tipo MIME. Use em tags HTML <img>, funções CSS url() ou qualquer lugar onde uma URL é esperada:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSU..." alt="Imagem inline" />CSS Background
Uma declaração CSS pronta para colar:
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSU...);Quando Incorporar vs Servir Separadamente
Inline (data URI Base64)
Melhor para imagens abaixo de 10 KB. Elimina uma requisição HTTP, o que importa em conexões de alta latência. Casos comuns: favicons, ícones pequenos, templates de e-mail, exportações HTML de arquivo único e sprites SVG.
Arquivos separados
Melhor para imagens acima de 10 KB. Beneficiam-se de cache do navegador, distribuição CDN, carregamento lento, srcset responsivo e negociação de formato WebP/AVIF.
O limite crítico
Google Lighthouse é a maioria dos guias de desempenho recomendam 10 KB como ponto de corte. Abaixo disso, a sobrecarga da requisição HTTP geralmente custa mais que o aumento do Base64.
Imagens Base64 em Diferentes Contextos
HTML email
Clientes de e-mail bloqueiam imagens externas por padrão. Data URIs Base64 contornam issó para imagens pequenas como logos e ícones.
Aplicações de página única
SPAs às vezes codificam em Base64 imagens críticas acima da dobra para evitar layout shift durante o carregamento.
Markdown e documentação
Alguns renderizadores Markdown suportam data URIs em sintaxe de imagem:
Canvas e WebGL
A API Canvas toDataURL() retorna data URIs Base64.
Formatos de Imagem Suportados
Esta ferramenta lida com qualquer formato de imagem que seu navegador suporte: JPEG, PNG, GIF, WebP, SVG, BMP, ICO e AVIF.
Para decodificar um string Base64 de volta para uma imagem baixável, use o conversor Base64 para Imagem. Para codificação/decodificação de texto Base64, o Codificador Base64 principal lida com isso.