Como usar
- 1.Para codificar, deixe “Imagem para Base64” selecionado e solte uma imagem na página, cole uma da área de transferência ou clique em “Escolher uma imagem”.
- 2.Copie a versão de que você precisa: o data URI para um
srcouurl(), o Base64 puro para uma API, ou a tag HTML ou a regra CSS prontas. Arquivos SVG também recebem um data URI mais curto, codificado para URL. - 3.Para decodificar, mude para “Base64 para imagem” e cole um data URI ou Base64 puro. CSS ou HTML que contenha um data URI também funciona.
- 4.Confira a prévia, o formato e o tamanho, e clique em Baixar para salvar a imagem com a extensão de arquivo certa.
O que é um data URI
Um data URI coloca um arquivo inteiro dentro de uma URL, para que a página mostre uma imagem sem um download separado. A sintaxe é data:[<media type>][;base64],<data>, por exemplo data:image/png;base64,iVBORw0KGgo…. O tipo de mídia diz ao navegador o que são os dados; ;base64 indica que eles estão codificados em Base64, e não como texto codificado para URL.
O Base64 escreve cada 3 bytes do arquivo como 4 caracteres ASCII simples, e é por isso que o resultado fica cerca de um terço maior que a imagem. O Gzip e o Brotli recuperam parte disso quando a página é enviada, mas o navegador ainda precisa decodificar o texto inteiro.
Quando embutir uma imagem ajuda, e quando atrapalha
Embutir compensa para imagens muito pequenas: ícones, fundos minúsculos e placeholders de um ou dois kilobytes, em que uma requisição separada custaria mais que os próprios bytes. Também é prático para relatórios HTML em um único arquivo, fixtures de teste e APIs ou documentos JSON que esperam uma imagem como texto.
Para qualquer coisa maior, geralmente deixa as páginas mais lentas. A imagem não pode ser armazenada em cache sozinha, então é baixada de novo com cada página ou folha de estilo que a contém; no CSS, ela também atrasa a renderização, porque o navegador espera a folha de estilo inteira. Com HTTP/2, requisições extras custam pouco, então um arquivo de imagem normal é a melhor escolha acima de alguns kilobytes.
O e-mail é um caso à parte: o Gmail e o Outlook não exibem imagens em data URI, então newsletters devem usar links para imagens hospedadas ou anexá-las como anexos inline (CID).
Um data URI mais curto para SVG
O SVG é texto, então nem precisa de Base64. Um data URI SVG codificado para URL, como data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'…, costuma ser 15 a 25% mais curto, comprime melhor e continua legível no seu CSS.
Só alguns caracteres precisam ser escapados: <, > e principalmente # (escrito %23), que de outra forma encerraria a URL, por exemplo em uma cor como fill='%23f00'. Esta ferramenta também compacta os espaços em branco e troca para aspas simples, para que o URI caiba dentro de url("…") sem precisar de mais escapes.
Perguntas frequentes
Minha imagem é enviada para algum lugar?
Não. A imagem é lida e codificada pelo seu navegador, no seu próprio dispositivo, e o Base64 que você cola também é decodificado ali. Nada é enviado ao nestoo nem a ninguém.
Por que a versão em Base64 é maior que o arquivo da imagem?
O Base64 representa cada 3 bytes com 4 caracteres de um alfabeto de 64, então o texto fica cerca de 33% maior que o arquivo, mais o pequeno prefixo data:image/…;base64,. É o preço de guardar dados binários como texto simples.
Como usar um data URI em HTML, CSS, Markdown ou JSON?
No HTML, coloque-o no src de uma imagem: <img src="data:image/png;base64,…" alt="">. No CSS, use-o em url(): background-image: url("data:…");. No JSON, ele é uma string comum; muitas APIs querem só a parte em Base64, sem o prefixo data:. O Markdown aceita  em princípio, mas o GitHub e muitos outros sites removem imagens em data URI, então use um link para uma imagem hospedada nesses casos.
Qual é o tamanho máximo da imagem?
A ferramenta codifica imagens de até 20 MB, e os navegadores conseguem exibir data URIs de vários megabytes. Na prática, mantenha as imagens embutidas em poucos kilobytes: as maiores incham seu HTML ou CSS e não podem ser armazenadas em cache separadamente.
Como transformar um data URI de volta em arquivo de imagem?
Mude para “Base64 para imagem” e cole o data URI ou só o Base64. A ferramenta detecta o formato real a partir dos próprios dados, mostra uma prévia e salva o arquivo com a extensão correta, mesmo que o URI indique outro tipo.