Converter imagem para Base64
Solte a imagem e copie como data URL, pronta para colar num src de img, num background de CSS ou num campo de JSON.
A resposta aparece aqui enquanto você digita.
O que sai, e onde usar
Base64 escreve os bytes de um arquivo como letras e números comuns, para uma imagem passar por um lugar que só aceita texto. Com a opção de data URL ligada — e esta página já abre com ela — o tipo vem na frente, como em data:image/png;base64,iVBOR…, que o navegador aceita onde espera um endereço: no src de uma imagem, num background-image: url(…) do CSS, num link.
Os usos de sempre: um ícone dentro de um e-mail em HTML, para aparecer sem o leitor carregar imagens externas; um logotipo numa página de arquivo único ou num README; uma foto dentro de um JSON para uma API que não recebe upload; o favicon escrito direto no cabeçalho da página.
Um terço maior, e quando isso pesa
Base64 transforma cada três bytes em quatro caracteres, então o texto fica uns 33% maior que a imagem — um ícone de 30 KB vira 40 KB de texto. Colado na página, ele também não entra no cache sozinho: o navegador baixa de novo a cada cópia da página. Para ícones pequenos tudo bem; para fotos, não. Passando de alguns kilobytes, o arquivo de imagem normal é mais rápido.
Se a imagem é pesada, diminua antes: o compressor de imagens e o redimensionador reduzem a uma fração antes de ela virar texto.
SVG, e o caminho de volta
Um SVG já é texto, então pode entrar numa data URL sem Base64, só com a codificação de URL, e costuma ficar menor assim. Base64 funciona igual e é a forma que a maioria das ferramentas espera.
Para voltar de um texto Base64 para a imagem, troque a direção para decodificar no codificador e decodificador Base64. O arquivo é lido nesta aba; nada é enviado.