Conversor de Imagem Base64
Converta uma imagem em um data URI Base64, ou cole uma string Base64 de volta em uma imagem para download — tudo roda localmente, nada é enviado a servidores.
250 visualizações
Não foi possível decodificar como imagem — verifique o texto Base64.
Como Funciona
Esta ferramenta funciona em duas direções. No modo Imagem → Base64, escolha um arquivo com o seletor nativo do navegador; a ferramenta o lê com a API FileReader.readAsDataURL() e produz um data URI completo — uma string como data:image/png;base64,iVBORw0KG... — exibida em uma caixa, com o payload Base64 puro (sem prefixo) mostrado em uma segunda caixa, para que você pegue o formato que precisar, além de um botão de copiar com um clique para cada uma. No modo Base64 → Imagem, cole um data URI completo ou apenas o texto Base64 puro na área de texto; se você colar Base64 puro sem prefixo, a ferramenta adiciona automaticamente um cabeçalho data:image/png;base64, para que o navegador ainda consiga renderizá-lo, e então exibe uma pré-visualização <img> ao vivo com um botão de download que salva os bytes decodificados de volta como um arquivo de imagem real.
A codificação Base64 pega dados binários e os representa usando apenas 64 caracteres ASCII imprimíveis (A–Z, a–z, 0–9, + e /), o que é o que permite que uma imagem — inerentemente binária — seja incorporada em formatos somente-texto como HTML, CSS, JSON ou uma URL. O mecanismo é fixo e matemático: cada 3 bytes (24 bits) do arquivo original viram exatamente 4 caracteres Base64 (4 × 6 bits), preenchidos com = quando o comprimento da entrada não é múltiplo de 3. Essa proporção de 3 bytes na entrada para 4 caracteres na saída é também o motivo pelo qual a saída Base64 é sempre cerca de 33% maior que o binário original — 4 dividido por 3 é aproximadamente 1,333 — um overhead matemático fixo, não uma aproximação nem uma configuração de qualidade.
Bom Saber
Incorporar uma imagem como data URI diretamente no seu HTML ou CSS tem uma vantagem real: elimina uma requisição HTTP separada, o que importa para recursos muito pequenos e usados com frequência, como ícones, pequenos sprites, ou um logotipo minúsculo embutido em um template de e-mail onde imagens externas podem ser bloqueadas. O trade-off se inverte para qualquer coisa maior: um data URI não pode ser armazenado em cache separadamente pelo navegador da forma como um arquivo .png ou .jpg vinculado pode, ele infla o tamanho do arquivo HTML/CSS que o contém (nesses mesmos ~33%), e impede que esse arquivo seja renderizado até que todo o blob codificado tenha sido baixado. Como regra geral, data URIs são uma boa escolha para recursos com poucos kilobytes e uma escolha ruim para fotos, imagens de destaque (hero images) ou qualquer coisa que o usuário possa querer em cache entre carregamentos de página.
O prefixo de tipo MIME — a parte image/png, image/jpeg ou image/webp de data:image/png;base64,... — não é decorativo. É ele que diz ao navegador (ou a qualquer outro programa que leia a string) para qual decodificador entregar os bytes seguintes; sem ele, ou com o prefixo errado, um payload Base64 que seria válido pode falhar ao renderizar ou renderizar como um tipo de arquivo totalmente diferente. É exatamente por isso que esta ferramenta adiciona automaticamente um prefixo PNG quando você cola Base64 puro sem nenhum prefixo — um padrão razoável, mas você deve trocá-lo para corresponder ao formato real do arquivo original se souber que era um JPEG ou WebP.
Perguntas Frequentes
Por que a saída Base64 é sempre maior que a imagem original?
Base64 codifica cada 3 bytes de entrada binária como 4 caracteres de texto, então a saída é sempre cerca de 4/3 do tamanho da entrada — aproximadamente 33% maior. Essa é uma propriedade matemática fixa da codificação (6 bits de informação por caractere imprimível, em vez de 8), não algo causado por configurações de baixa qualidade ou uma ferramenta ineficiente.
Minha imagem é enviada a um servidor para ser convertida?
Não. As duas direções rodam inteiramente no seu navegador: FileReader.readAsDataURL() lê o arquivo localmente, e a decodificação de volta para imagem também acontece localmente. Nada é transmitido para lugar nenhum.
Quando devo realmente usar um data URI Base64 em vez de um arquivo de imagem normal?
Faz sentido para recursos pequenos e usados com frequência — ícones, pequenos sprites de interface, um logotipo em um e-mail HTML — onde economizar uma requisição HTTP extra compensa o aumento de ~33% no tamanho. É uma escolha ruim para fotos ou qualquer imagem que você queira que o navegador armazene em cache separadamente entre páginas, já que um data URI incorporado é baixado novamente toda vez que o arquivo HTML ou CSS que o contém é carregado.
Colei uma string Base64, mas nada aparece na pré-visualização — por quê?
Duas causas comuns: a string está sem o prefixo de tipo MIME (ou com um prefixo incorreto) — esta ferramenta adiciona automaticamente data:image/png;base64, se nenhum estiver presente, o que só ajuda se os bytes subjacentes forem realmente dados PNG — ou o próprio texto Base64 foi truncado ou corrompido (por exemplo, por espaços em branco ou quebras de linha inseridos ao copiar de certas fontes). Verifique se o prefixo corresponde ao formato real e se você copiou a string completa.
Qual é a diferença entre as caixas de saída "data URI completo" e "apenas Base64"?
O data URI completo (começando com data:image/...;base64,) é o que você cola diretamente em um atributo src de HTML ou em um url() de CSS para que o navegador o renderize imediatamente. A caixa apenas Base64 remove esse prefixo, que é o que você quer quando um programa, uma API ou um arquivo de configuração espera apenas o payload codificado puro e vai anexar sua própria informação de tipo separadamente.
Ferramentas Semelhantes
Reportar um Problema
Conversor de Imagem Base64
Comentários
Ainda não há comentários — seja o primeiro a escrever um!