- 1Enviar imagemSelecione sua foto
- 2ConverterGere o código Base64
- 3Copiar e usarCole em HTML, CSS ou JSON
Envie sua imagem
JPG, PNG, WebP, BMP ou GIF · Máx. 15 MB · Ctrl+V
Base64 da imagem
Cole o código
Pré-visualização
A prévia aparece depois de enviar a imagem.
- Nome do arquivo
- -
- Tamanho
- -
- Dimensões
- -
- Formato
- -
O código Base64 acima pode ser usado em HTML, CSS, JSON e outras aplicações.
Como usar
O trecho para colar aparece aqui depois da conversão.
Envie ou cole uma imagem para gerar Base64.
Como converter imagem em Base64
- Na aba Imagem → Base64, envie a foto, arraste o arquivo, use o exemplo ou cole com Ctrl+V.
- Escolha o formato do texto: Data URL para HTML e CSS, Apenas Base64 para API, ou as abas JSON e TXT quando quiser o conteúdo já embrulhado.
- Clique em Copiar código, ou em Baixar .txt se a string for longa demais para colar.
- No cartão Como usar, troque entre HTML, CSS e JSON e copie o trecho.
- Para o caminho inverso, abra 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. O limite desta página é 15 MB.
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.
