Pular para o conteúdo

Converter Imagem em Base64 – Gerador de Data URI

Solte uma imagem para receber o texto Base64 ou um data URI pronto para colar, uma tag HTML, uma regra CSS ou uma imagem em Markdown. A imagem é lida no seu aparelho e nunca é enviada.

Roda inteiramente no seu navegador. Nada do que você cola é enviado para lugar nenhum.

Como converter uma imagem em Base64

  1. Adicione uma imagem arrastando para a caixa, ou toque para escolher um arquivo do celular ou do computador.
  2. Escolha a saída em Saída como: Data URI, Só Base64, HTML <img>, Fundo CSS ou Markdown. Para arquivos SVG, decida se mantém a codificação de URL ativada.
  3. Confira a prévia e os tamanhos. A prévia mostra a imagem decodificada a partir do resultado, e uma linha mostra o tamanho original, o tamanho codificado e quanto ficou maior.
  4. Copie ou baixe o texto com o botão Copiar ou como arquivo .txt.

Recursos

  • Cinco saídas prontas para colar: data URI, Base64 puro, uma tag HTML <img>, uma regra CSS background-image e uma imagem em Markdown.
  • SVG com codificação de URL, uma alternativa menor que o Base64 para imagens vetoriais.
  • Comparação de tamanho com o tamanho original, o tamanho codificado e o aumento em porcentagem.
  • Prévia ao vivo gerada a partir do resultado, sobre um fundo quadriculado para a transparência ficar visível.
  • Vários formatos aceitos: PNG, JPG, WebP, GIF, SVG, AVIF, ICO e BMP.
  • Codificação exata, sem redimensionar e sem perder qualidade.
  • Aviso de tamanho quando a imagem passa de uns 10 KB.

Por que usar o conversor de imagem em Base64 do Fileora

Logos, prints e peças de design muitas vezes ainda não foram lançados ou são privados. O Fileora lê e codifica o arquivo no seu navegador, então a imagem nunca sai do seu aparelho. É grátis, não pede cadastro e funciona no celular, onde você escolhe a imagem direto da galeria.

Quando embutir uma imagem ajuda

Um data URI coloca a imagem dentro do seu HTML, CSS ou JSON, em vez de em um arquivo separado. Isso economiza uma requisição de rede, o que pode ajudar em:

  • Ícones pequenos e formas simples, principalmente SVG, usados no CSS.
  • E-mails em HTML e documentos de arquivo único, que precisam funcionar sem arquivos externos.
  • Placeholders, como uma prévia minúscula e desfocada mostrada enquanto a imagem completa carrega.
  • Testes, demos e trechos de código que devem rodar sem arquivos extras.
  • APIs que recebem imagens em Base64 dentro de um corpo JSON, como muitos serviços de envio de foto de documento.

Quando atrapalha

O texto Base64 é cerca de um terço maior que a imagem que ele representa. Imagens embutidas são baixadas de novo toda vez que a página ou a folha de estilo muda, porque não podem ir para o cache sozinhas. Elas também ficam no caminho crítico: uma imagem grande dentro do CSS atrasa a folha de estilo inteira e, com ela, a primeira pintura da página. Como regra prática, embuta só imagens abaixo de uns 10 KB e sirva o resto como arquivo normal.

Para deixar uma imagem abaixo desse tamanho antes, reduza o peso com a ferramenta de comprimir imagem ou converta para WebP no conversor de imagens. Se precisar da cor exata de um ícone no CSS, o conversor de cores mostra HEX, RGB, HSL e OKLCH. E para decodificar um Base64 de volta em arquivo, use a ferramenta de codificar e decodificar Base64.

Perguntas frequentes

Como converter uma imagem em Base64?

Arraste a imagem para a caixa ou toque nela para escolher um arquivo. O texto codificado aparece na hora como data URI. Escolha outra saída, como Só Base64, HTML, Fundo CSS ou Markdown, e depois copie ou baixe como arquivo .txt.

Qual a diferença entre data URI e Só Base64?

Só Base64 é apenas o conteúdo codificado da imagem, que é o que a maioria das APIs e campos JSON espera. O data URI acrescenta um prefixo curto como data:image/png;base64, na frente, que diz ao navegador que tipo de arquivo é aquele. Use o data URI em qualquer lugar onde o navegador espera o endereço de uma imagem, como o src de uma img ou um url() no CSS.

Por que o texto Base64 fica maior que a imagem?

O Base64 usa 4 caracteres de texto para representar cada 3 bytes do arquivo, então o resultado fica uns 33% maior que o original. A ferramenta mostra o tamanho da imagem, o tamanho codificado e o aumento em porcentagem para você decidir se vale a pena embutir.

Por que meu SVG não foi codificado em Base64?

Arquivos SVG são texto, então podem entrar em um data URI com codificação de URL no lugar do Base64, o que costuma dar um resultado menor. Essa opção já vem ativada para arquivos SVG. Desative Usar codificação de URL para SVG se alguma ferramenta que você usa exigir Base64.

Quais tipos de imagem são aceitos?

PNG, JPG, WebP, GIF, SVG, AVIF, ICO e BMP. O arquivo é codificado exatamente como está, sem redimensionar nem recomprimir, então a qualidade da imagem não muda.

Vale a pena embutir imagens grandes em Base64?

Normalmente não. Imagens acima de uns 10 KB funcionam melhor como arquivos normais: o texto codificado é maior, não pode ir para o cache separado do seu HTML ou CSS e atrasa o resto da página. A ferramenta mostra um lembrete quando a sua imagem passa desse tamanho.

Ferramentas relacionadas

Não encontrou a ferramenta que precisa ou algo não está funcionando?

Conte qual ferramenta você gostaria ou o que deu errado. Lemos todas as mensagens, e os pedidos decidem o que criamos a seguir.

Pedir uma ferramentaRelatar um problema

Abre seu app de e-mail. Por favor, não anexe arquivos privados.