Conversor e decodificador de imagem para Base64

Base64 é um jeito de escrever dados binários, como um arquivo de imagem, usando só 64 caracteres de texto seguros: letras, dígitos, mais e barra. Cada três bytes do arquivo viram quatro caracteres de texto. Isso permite que conteúdo binário passe por sistemas que só lidam com texto, como JSON, atributos HTML, arquivos CSS e alguns formatos de e-mail.

Um data URI envolve esse texto com um cabeçalho curto que diz ao navegador o que ele contém, por exemplo data:image/png;base64, seguido do arquivo codificado. Os navegadores conseguem exibi-lo exatamente como um link de imagem normal.

Quando incorporar

Ao comparar Base64 com links para arquivos de imagem, a troca é entre tamanho e cache. O texto Base64 é cerca de um terço maior que o arquivo original e não pode ser guardado em cache separadamente pelo navegador. Um arquivo normal é baixado uma vez e reaproveitado. O Base64 brilha com imagens muito pequenas, em que economizar uma requisição extra importa mais que algumas centenas de bytes.

Adicione uma imagem na aba Imagem para Base64. A ferramenta a lê localmente, detecta o tipo real pelos bytes do arquivo e mostra o tamanho original, o tamanho codificado e o aumento. Abaixo aparecem cinco trechos prontos com botões de copiar. Strings muito longas são encurtadas nas caixas para ganhar velocidade, mas o botão de copiar sempre copia o texto completo.

Você também pode baixar o data URI como arquivo de texto, o que é prático para strings muito grandes ou quando precisa enviá-las a um colega.

Formatos comuns

PNG para Base64 é o caso mais comum, porque ícones e logos geralmente são arquivos PNG com transparência. JPG para Base64 funciona do mesmo jeito e serve para fotos pequenas, como avatares. Arquivos SVG também são codificados; para SVG, texto simples codificado para URL pode ser ainda menor, mas o Base64 é a opção mais compatível.

No HTML

Para usar uma imagem Base64 em HTML, cole o trecho img na sua página. Ele já inclui um texto alternativo baseado no nome do arquivo e a largura e altura, o que ajuda a evitar mudanças de layout. Edite o texto alternativo para que ele descreva a imagem para leitores de tela.

No CSS

Para uma imagem de fundo Base64 em CSS, cole a regra background-image na sua folha de estilo. Isso serve para padrões e ícones pequenos. Mantenha fotos grandes como arquivos, porque incorporá-las deixa a folha de estilo inteira mais lenta para baixar e processar.

Markdown e JSON

O trecho Markdown funciona em muitos editores e ferramentas de documentação que aceitam data URIs. Para APIs e JSON, use o trecho só Base64, sem o cabeçalho data:, a menos que a documentação da API peça um data URI completo.

Mude para a aba Base64 para imagem e cole uma string Base64 pura ou um data URI completo. A ferramenta remove espaços e quebras de linha, aceita caracteres seguros para URL, adiciona o preenchimento que faltar, decodifica o texto e confere os primeiros bytes para reconhecer o tipo real da imagem. Você então vê a imagem, as dimensões e o tamanho, e um botão de download com a extensão correta.

Se o texto não for Base64 válido, estiver cortado ou contiver outro tipo de arquivo, uma mensagem clara explica o que deu errado. Isso torna o decodificador útil para depurar respostas de API, campos de banco de dados e o código-fonte de e-mails.

Como regra geral, incorpore imagens menores que alguns kilobytes e mantenha todo o resto como arquivos. A ferramenta avisa quando uma imagem tem mais de 100 KB, porque incorporá-la deixaria seu HTML ou CSS pesado. Para imagens maiores, comprima antes com nossa ferramenta de comprimir imagem ou converta para WebP.

Base64 é uma codificação, não uma criptografia. Qualquer pessoa pode decodificá-lo, então nunca o trate como um jeito de esconder ou proteger uma imagem.

Privacidade

A codificação e a decodificação acontecem inteiramente no navegador, usando funções nativas. Nada é enviado nem guardado, e a ferramenta é grátis, ilimitada e não usa créditos do EnhancerPro.

Por que minha string é tão longa?

Cada três bytes viram quatro caracteres, então uma imagem de 30 KB vira cerca de 40.000 caracteres. Isso é esperado. Se ficar longa demais para o seu uso, reduza as dimensões da imagem ou comprima-a antes de codificar.

Quebras de linha e e-mail

Alguns sistemas de e-mail quebram o Base64 em linhas de 76 caracteres. O decodificador ignora essas quebras automaticamente, então você pode colar o texto quebrado direto.

Favicons e ícones

Incorporar um favicon como data URI funciona na maioria dos navegadores, mas um favicon.ico de verdade e arquivos PNG são mais confiáveis para favoritos e telas iniciais. Nosso gerador de favicon cria o conjunto completo.

Um logo na assinatura de e-mail

Alguns clientes de e-mail bloqueiam imagens com link até o leitor permitir, mas o suporte a data URIs incorporados também varia. Para assinaturas, um PNG pequeno hospedado no seu site costuma ser a escolha mais confiável, e o Base64 é uma alternativa para sistemas que exigem tudo em um único bloco de HTML. De qualquer forma, mantenha o logo com poucos kilobytes.

Placeholders e imagens de carregamento

Uma versão minúscula e desfocada de uma foto codificada em Base64 pode aparecer na hora enquanto a imagem completa carrega. Reduza a imagem para cerca de 20 pixels de largura, codifique-a e use-a como fundo atrás da imagem real. Ela adiciona só algumas centenas de bytes à página.

Guardando imagens em JSON

Algumas APIs e arquivos de configuração aceitam imagens como strings Base64. Use o trecho só Base64 e confira a documentação para limites de tamanho. Quando receber esse tipo de dado, cole-o no decodificador para confirmar o tipo e as dimensões da imagem antes de salvar.

Testes e protótipos

Quando você compartilha um protótipo rápido como um único arquivo HTML, incorporar imagens pequenas significa que nada quebra quando o arquivo é movido ou enviado por e-mail. Para qualquer coisa que vá para produção, troque de novo as imagens grandes incorporadas por arquivos normais, para que os navegadores possam guardá-las em cache.

Conferindo o que uma string contém

O texto Base64 não dá nenhuma pista do conteúdo. Os primeiros caracteres muitas vezes sugerem o tipo, como iVBOR para PNG ou /9j/ para JPEG, mas o decodificador é o jeito confiável de saber. Ele lê a assinatura real do arquivo em vez de confiar no rótulo do data URI.

Checklist de desempenho

Antes de incorporar uma imagem, faça três perguntas. Ela é pequena, de preferência com menos de alguns kilobytes? É usada em uma única página, de modo que o cache não ajudaria muito? Uma requisição extra deixaria a primeira visualização visivelmente mais lenta? Se a resposta para as três for sim, o Base64 é uma boa escolha. Caso contrário, sirva um arquivo normal em um formato moderno como WebP, defina largura e altura e deixe o navegador guardá-lo em cache para todas as páginas que o usam. Assim seu HTML fica enxuto e suas páginas, rápidas.

Convertendo de um lado para o outro

Codificar e depois decodificar uma imagem devolve exatamente os mesmos bytes; o Base64 não tem perdas. Isso faz do decodificador um jeito rápido de confirmar que uma string copiada está completa. Se a imagem decodificada estiver cortada ou não aparecer, parte do texto se perdeu na cópia, muitas vezes no final, onde ficam os caracteres de preenchimento. Copie de novo da origem e decodifique outra vez. A ferramenta confirma quando estiver inteira.