Imagem para Base64: transforme JPG, PNG ou WebP em data URL, copie o texto ou faça o caminho inverso (Base64 → arquivo).
Como converter imagem em Base64
- Na aba Imagem → Base64, envie a foto, arraste o arquivo ou cole com Ctrl+V.
- Deixe marcado Incluir prefixo se você vai colar o resultado em HTML ou CSS. Sem o prefixo, sai só o texto codificado, que é o formato esperado por muitas APIs e campos de JSON.
- Clique em Copiar Base64, ou baixe como .txt se a string for longa demais para a área de transferência.
- Para o caminho inverso, abra a aba Base64 → Imagem, cole o texto e clique em Decodificar.
Quando vale usar data URL
A vantagem é uma só: a imagem viaja dentro do próprio HTML ou CSS, sem uma requisição separada. Isso rende em ícone minúsculo, em e-mail HTML e em situação onde você não tem onde hospedar o arquivo.
As desvantagens são várias e valem ser ditas. Base64 cresce cerca de um terço em relação ao arquivo binário. A imagem embutida não é cacheada separadamente pelo navegador, então ela volta a ser baixada junto com a página toda vez. E strings enormes deixam o HTML difícil de ler e o diff do Git impraticável.
Na prática: até alguns kilobytes, embutir compensa. Acima disso, hospedar o arquivo normal quase sempre ganha. Se a imagem estiver grande, o comprimir imagem antes muda bastante o tamanho do texto final.
Base64 de volta para imagem
A aba inversa serve para o caso comum de receber uma string que começa com data:image em um JSON, um log ou um trecho de código e precisar ver o que é aquilo.
Cole o texto com ou sem o prefixo e decodifique. Se a decodificação falhar, o motivo costuma ser quebra de linha no meio da string ou um pedaço faltando no fim, porque a cópia pegou só parte do conteúdo.
O que é data URL?
É o prefixo data:image/png;base64, + o conteúdo em Base64. Dá para colar em HTML (<img src>), CSS ou JSON.
Por que limitar o tamanho?
Base64 cresce ~33% em relação ao arquivo. Imagens muito grandes deixam o texto pesado e lentam o navegador — use comprimir antes se precisar.
Serve para ícone embutido em e-mail?
Funciona em parte dos clientes, mas não em todos: o Gmail costuma não exibir imagem em data URL, e o resultado é um quadrado vazio. Para assinatura que precisa aparecer em qualquer lugar, hospede a imagem e use o gerador de assinatura.
Preciso do prefixo data:image ou não?
Com prefixo para colar em HTML e CSS, porque é ele que diz ao navegador o tipo do arquivo. Sem prefixo quando o destino é um campo de API ou de banco que espera só a string codificada.
Por que o texto ficou maior que a imagem?
Porque Base64 representa cada três bytes com quatro caracteres. O crescimento de cerca de 33% é do formato e não tem como evitar; dá só para comprimir a imagem antes.
A decodificação falhou
Quase sempre é string incompleta ou com quebras de linha no meio. Copie o conteúdo inteiro, do começo ao fim, e cole de novo.
