Qual a diferença entre Base64 e data URI?

Base64 é só o texto que representa os bytes. Data URI é esse texto com o prefixo data:image/png;base64, na frente, que diz ao navegador o tipo do arquivo. Em src de img e em url() do CSS você precisa do data URI; em campos de API, depende da documentação: algumas pedem só o Base64.

Embutir imagem em Base64 deixa o site mais rápido?

Só para imagens muito pequenas, em que a requisição extra pesa mais que os 33% a mais de tamanho. Para fotos, o arquivo separado é melhor: o navegador guarda em cache, baixa em paralelo e não precisa reprocessar o HTML ou o CSS.

Posso usar imagem em Base64 em e-mail?

Não é confiável. O Gmail e o Outlook no Windows não exibem imagens em data URI. Para e-mail, hospede a imagem e use a URL, ou anexe com Content-ID (CID) e referencie como cid: no HTML.

Como colocar um SVG em data URI no CSS?

Escolha a imagem SVG, o formato CSS e a codificação URL-encoded. O resultado é uma linha background-image: url("data:image/svg+xml,...") com os caracteres especiais escapados, em geral menor que a versão em Base64.

Como transformar o Base64 que a API devolveu em arquivo?

Troque para Base64 para imagem e cole o valor, com ou sem o prefixo data:. A página mostra a prévia, o tipo real e as dimensões, e baixa o arquivo com a extensão certa, pronto para anexar num bug ou usar num teste de upload.

Por que a imagem em Base64 não aparece?

As causas comuns são o Base64 cortado na cópia, o tipo errado no prefixo data:, espaços ou quebras de linha dentro de uma string de CSS, ou um formato que o navegador não mostra, como HEIC fora do Safari. Colado aqui, o valor é conferido e a página diz qual desses é o caso.

A imagem é enviada para algum servidor?

Não. A leitura e a conversão acontecem no seu navegador, e a imagem não vai para servidor, URL nem armazenamento local. As métricas de uso registram só o formato escolhido, o tipo da imagem e uma faixa de tamanho, nunca a imagem ou o nome do arquivo.

Conversor de Imagem para Base64

Solte, cole ou escolha uma imagem e copie o data URI pronto para HTML, CSS ou Markdown. No sentido contrário, cole um Base64 ou data URI para ver a imagem, conferir o tipo real e baixar o arquivo.

A imagem é lida e convertida no seu navegador. Ela não é enviada a nenhum servidor e não fica salva na página.

Direção

Solte, cole (Ctrl+V) ou escolha uma imagem

PNG, JPEG, GIF, WebP, AVIF, SVG, ICO ou BMP, até 25 MB. A imagem não sai do navegador.

Escolher imagem

Formato

Resultado

Nenhuma imagem ainda

Escolha uma imagem ou cole um print com Ctrl+V. O código aparece aqui no formato escolhido.

Tem um Base64 que não é imagem, um header Basic ou um Secret do Kubernetes? O decodificador de Base64 lê texto e qualquer arquivo.

Decodificar Base64

O que é um data URI

Um data URI coloca o arquivo dentro do próprio endereço: data:image/png;base64, seguido dos bytes da imagem em Base64. O navegador trata esse texto como se fosse uma URL de imagem, então ele vale em src de img, em url() do CSS, em Markdown e em JSON. A parte antes da vírgula diz o tipo do arquivo; se ela estiver errada, alguns navegadores e validadores de upload recusam a imagem.

Quando embutir a imagem e quando não

Vale embutir

Ícones e logos de poucos KB, que custariam uma requisição cada
Imagens de fundo pequenas num CSS crítico, carregado junto com a página
Fixtures de teste e mocks de API, em que a imagem precisa ir dentro do JSON

Melhor como arquivo

Fotos e banners: o Base64 fica um terço maior e não entra no cache do navegador separado da página
A imagem principal da página, porque um HTML maior atrasa tudo o que vem depois
Imagens de e-mail marketing, que o Gmail e o Outlook no Windows não exibem em data URI

SVG não precisa de Base64

SVG é texto, então pode entrar no data URI com percent-encoding, escapando só <, >, # e %. O resultado costuma ficar menor que o Base64 e continua legível. As aspas duplas viram simples para o valor caber dentro de url("...") no CSS. Escolha URL-encoded nas opções quando a imagem for SVG.

Testar upload e API com imagem em Base64

Muitas APIs recebem a imagem como Base64 dentro do JSON, com ou sem o prefixo data:. Para QA, dois cuidados: o limite de tamanho costuma valer para o arquivo decodificado, e o Base64 é cerca de 33% maior, então uma foto de 5 MB vira uns 6,7 MB de payload. O segundo é o tipo: se o data URI diz image/png e os bytes são JPEG, o backend que confere a assinatura do arquivo recusa. O modo Base64 para imagem mostra os dois tipos lado a lado.

Formatos que o navegador mostra

PNG, JPEG, GIF, WebP, AVIF, SVG, ICO e BMP aparecem em qualquer navegador atual. HEIC, o formato das fotos do iPhone, só abre no Safari; aqui ele é convertido e baixado normalmente, mas a prévia pode não aparecer.

Perguntas frequentes sobre imagem em Base64

Data URI, e-mail, SVG, upload e imagens que não abrem.