Como converter uma imagem em Base64
- Solte uma imagem na caixa acima ou clique em Escolher uma imagem. Funcionam arquivos PNG, JPG, GIF, WebP, SVG, AVIF, ICO e BMP.
- A ferramenta mostra uma prévia, o tamanho da imagem e o comprimento do texto em Base64.
- Escolha o formato de que precisa com as abas: Data URL (o texto completo
data:image/…;base64,…), Base64 (só a parte codificada), HTML <img>, CSS (uma linhabackground-image) ou Markdown. - Para os trechos de HTML e Markdown, escreva um texto alternativo que descreva a imagem e deixe ativada a opção Adicionar largura e altura para evitar que o layout se desloque durante o carregamento.
- Clique em Copiar e cole o código onde precisar. Se o resultado for muito longo, ele é encurtado na caixa para a página ficar rápida, mas o botão Copiar sempre copia o texto completo.
Tudo acontece no seu navegador. A imagem nunca é enviada, não há cadastro e o seu arquivo original não é alterado.
O que é uma imagem em Base64
Base64 é uma forma de escrever qualquer dado binário usando só 64 caracteres de texto seguros: as letras, os dígitos, o sinal de mais e a barra. Cada 3 bytes do arquivo viram 4 caracteres, e por isso o texto fica cerca de um terço maior que o arquivo. Uma data URL coloca esse texto depois de um cabeçalho curto, data:image/png;base64,, que diz ao navegador o tipo do arquivo e como ele está codificado. O navegador a trata como qualquer outro endereço de imagem, então ela pode ser usada em um atributo <img src>, no url() do CSS e em imagens de Markdown.
A conversão não comprime nada de novo. Os bytes do seu arquivo são codificados exatamente como estão, então decodificar o texto devolve uma imagem idêntica à original.
Quando vale a pena incorporar uma imagem
- Ícones e logotipos pequenos de poucos quilobytes, quando economizar uma requisição compensa o tamanho a mais.
- Páginas de um arquivo só, como um relatório salvo, uma demonstração de código ou um arquivo HTML que você envia a alguém e que precisa funcionar sem outros arquivos.
- Bundles de CSS e JavaScript que precisam de uma imagem de placeholder minúscula ou de um padrão de fundo.
- Dados de teste e documentação, em que um texto curto de exemplo é mais prático que um arquivo.
Evite usar com fotos e imagens grandes: o texto é um terço maior que o arquivo, faz o HTML ou o CSS demorarem mais para baixar e processar, e o navegador não consegue armazenar a imagem em cache separadamente da página. Muitos clientes de e-mail, inclusive o Gmail, também não mostram imagens em data URL. Se o seu site usa uma política de segurança de conteúdo (CSP), é preciso permitir data: em img-src.
Exemplo prático
Você tem um ícone PNG de 3.000 bytes e 40×20 pixels e quer colocá-lo em um botão de um único arquivo HTML. Solte-o na ferramenta: o texto em Base64 tem 4.000 caracteres, 33 % a mais que o arquivo, porque 3.000 ÷ 3 × 4 = 4.000. Na aba HTML, escreva o texto alternativo Baixar e copie o resultado, que tem este aspecto:
<img src="data:image/png;base64,iVBORw0KGgo…" alt="Baixar" width="40" height="20">
Cole dentro do botão e o ícone passa a fazer parte da página, sem um segundo arquivo para hospedar. Para usar o mesmo ícone como imagem de fundo em CSS, vá à aba CSS e cole background-image: url("data:…"); na regra.
Dicas e problemas comuns
- Imagens SVG. Elas já são texto, então dá para usar uma data URL de SVG mais curta, com escape de caracteres e sem Base64, mas a versão em Base64 funciona em todo lugar e é a mais simples.
- Reduza o tamanho antes. Se o texto em Base64 for enorme, comprima ou redimensione a imagem antes de converter.
- Confira o tipo. O começo da data URL deve indicar o tipo de imagem correto; esta ferramenta o define a partir do seu arquivo.
- Quebras de linha. Uma data URL deve ficar em uma linha só. Copie-a como está e não adicione espaços nem quebras.
- Acessibilidade. Escreva sempre um texto alternativo útil, ou deixe-o vazio em imagens puramente decorativas.
Perguntas frequentes
Minha imagem é enviada para algum servidor?
Não. O arquivo é lido e convertido no seu navegador, no seu próprio dispositivo. Nem a imagem nem o texto Base64 saem dele.
O que é uma data URL em Base64?
É a imagem inteira escrita como texto, no formato data:image/png;base64,…, para poder colocá-la diretamente em um atributo src do HTML, em um url() do CSS ou em uma imagem de Markdown, em vez de apontar para um arquivo separado.
Por que o texto em Base64 é maior que a minha imagem?
O Base64 escreve cada 3 bytes como 4 caracteres, então o texto fica 33 % mais longo que o arquivo. Além disso, o navegador não consegue armazenar em cache separadamente as imagens incorporadas; use-as para imagens pequenas, como ícones, e deixe as fotos grandes como arquivos normais.
Posso usar uma data URL em um e-mail?
Muitas vezes não. Muitos clientes de e-mail, inclusive o Gmail, não mostram imagens incorporadas como data URL. Em e-mails HTML, aponte para uma imagem hospedada em um servidor ou envie-a como anexo.
A qualidade da imagem muda?
Não. Os bytes do seu arquivo são codificados como estão, sem nova compressão, então a imagem obtida ao decodificar o texto Base64 é idêntica à original.