Para converter imagem para Base64, solte um arquivo PNG, JPG, WebP, GIF, SVG, AVIF, BMP ou ICO acima e clique em “Converter para Base64”. Em “Saída como”, escolha “Data URI”, “Base64 puro”, “Tag <img>” ou “Fundo CSS” e clique em “Copiar tudo”. Os bytes originais são codificados, então a qualidade nunca muda.
Como usar a ferramenta Imagem para Base64
- 1
Adicione uma ou mais imagens
Solte arquivos PNG, JPG, WebP, GIF, SVG, AVIF, BMP ou ICO na área de upload ou clique em “Selecionar arquivos”. Vários arquivos podem ser codificados de uma vez.
- 2
Clique em “Converter para Base64”
Os bytes de cada arquivo são lidos no navegador e codificados em Base64 exatamente como estão, sem recomprimir a imagem.
- 3
Escolha o formato de saída
Em “Saída como”, alterne entre “Data URI”, “Base64 puro”, “Tag <img>” e “Fundo CSS”, conforme o lugar onde o código vai entrar.
- 4
Copie e cole
Use o botão “Copiar tudo” ao lado de cada resultado e confira o tamanho exibido, para saber quanto a string vai acrescentar à página ou ao stylesheet.
Quando colocar imagem em Base64 no HTML ou no CSS
O Base64 transforma dados binários em texto puro. Dentro de um data URI, esse texto pode substituir a URL de uma imagem, então ela viaja dentro do arquivo HTML, CSS ou JSON em vez de ser um download separado. Isso é útil para ícones e logotipos pequenos num stylesheet, imagens em templates de e-mail HTML, demos e protótipos de arquivo único e payloads de API ou arquivos de configuração que só aceitam texto.
O custo é o tamanho. Uma string Base64 fica cerca de 33 % maior que o arquivo binário, e uma imagem embutida não pode ser guardada em cache separadamente pelo navegador, então é baixada de novo toda vez que o arquivo que a contém for baixado. Por isso, imagem em Base64 combina mais com arquivos pequenos: um ícone de 2 KB vira uns 2,7 KB de texto, o que é tranquilo, enquanto uma foto grande incharia a página e funciona melhor como arquivo normal.
Como o conversor mostra o tamanho de cada resultado, você decide caso a caso se vale usar Base64 no HTML ou no CSS ou manter a imagem como arquivo comum.
Data URI, Base64 puro, tag img ou CSS: qual saída copiar
Um data URI em Base64 começa com data:, seguido do tipo de mídia do arquivo, como image/png, depois ;base64, e o texto codificado. Cole-o em qualquer lugar que espere uma URL: o atributo src de uma imagem, um valor url() no CSS ou um campo JSON. O “Base64 puro” é só o texto codificado, sem esse prefixo, que é o que muitas APIs e bibliotecas pedem.
A saída “Tag <img>” envolve o data URI num elemento de imagem HTML completo, pronto para colar na página, e a saída “Fundo CSS” entrega uma linha background-image pronta para o stylesheet. As quatro vêm da mesma codificação, então alternar entre elas não reprocessa o arquivo.
PNG para Base64 e JPG para Base64 funcionam do mesmo jeito. SVG para Base64 é útil quando uma ferramenta não aceita marcação SVG inline; o SVG codificado continua vetorial, então escala bem em qualquer tamanho.
Um codificador de imagem em Base64 que mantém os arquivos privados
O codificador lê seus arquivos com as APIs do próprio navegador e nunca recodifica os pixels, então a saída em Base64 decodifica de volta para um arquivo idêntico. Nada é redimensionado, comprimido ou convertido no caminho.
Nada é enviado, também. Os arquivos ficam no seu dispositivo, são processados dentro da aba e descartados quando você a fecha. Isso importa para logotipos, designs não lançados ou prints que você prefere não entregar a um servidor de terceiros. A ferramenta é grátis e não pede cadastro.
Dicas para os melhores resultados
- Embuta só imagens pequenas, como ícones, logotipos e gráficos simples; o Base64 acrescenta cerca de um terço ao tamanho.
- Comprima ou redimensione a imagem antes de codificar, já que a string Base64 cresce com cada byte do original.
- Em ícones SVG, o Base64 evita problemas de aspas quando a marcação quebraria uma string de CSS ou JSON.
- Use “Base64 puro” quando uma API pedir só o conteúdo codificado, e “Data URI” quando ela esperar uma URL.
- Imagens grandes costumam ficar melhores como arquivos vinculados, para o navegador guardá-las em cache entre páginas.
Perguntas frequentes
Como converter uma imagem para Base64?
Solte a imagem na área acima e clique em “Converter para Base64”. Depois escolha “Data URI”, “Base64 puro”, “Tag <img>” ou “Fundo CSS” e clique em “Copiar tudo”. A codificação acontece no seu navegador, e a saída decodifica de volta exatamente para o arquivo original.
O que é um data URI em Base64?
É uma string que contém a imagem inteira como texto, no formato data:, o tipo de mídia como image/png, ;base64, e depois os bytes codificados. Os navegadores aceitam esse texto em qualquer lugar onde uma URL de imagem é permitida, então a imagem dispensa um arquivo separado.
Converter para Base64 reduz a qualidade da imagem?
Não. A ferramenta codifica os bytes originais do arquivo sem recomprimir nada, então a imagem fica exatamente igual quando decodificada. O que muda é o tamanho: o texto Base64 fica cerca de 33 % maior que o arquivo binário.
Quais formatos de imagem posso converter?
Arquivos PNG, JPG, WebP, GIF, SVG, AVIF, BMP e ICO são aceitos, e você pode adicionar vários de uma vez. Cada resultado mostra o tamanho, então dá para ver quanto embutir a imagem acrescentaria ao seu código.
Devo usar imagens em Base64 no meu site?
Para ícones pequenos, logotipos e templates de e-mail, pode economizar uma requisição e manter tudo num arquivo só. Para fotos e imagens maiores costuma atrapalhar, porque o texto é maior e não pode ser guardado em cache separadamente. Confira o tamanho exibido antes de embutir.
Minhas imagens são enviadas para um servidor?
Não. A codificação em Base64 roda inteiramente no seu navegador. Suas imagens nunca são enviadas aos servidores do Krawly e nada é armazenado, então logotipos e prints privados ficam no seu dispositivo. Fechar a aba descarta os arquivos e os resultados.
Privado por padrão. Todos os conversores do Krawly rodam dentro do seu navegador com JavaScript e WebAssembly. Seus arquivos não são enviados, armazenados nem vistos por ninguém — ao fechar a aba, eles somem.