Os resultados são fornecidos apenas para fins informativos e podem conter erros. Verifique de forma independente as informações importantes. O uso desta ferramenta é por sua conta e risco.
O que esta ferramenta faz
O Conversor de Imagem para Base64 transforma um arquivo de imagem em uma data URL: uma única linha de texto que começa com data:image/png;base64, (ou o tipo do seu arquivo), seguida dos bytes da imagem codificados em Base64. Escolha um PNG, JPG, GIF, SVG, WebP ou qualquer outra imagem e o texto aparece com uma pré-visualização, pronto para copiar.
O arquivo é lido com o FileReader do navegador, então nunca é enviado para um servidor. Uma data URL pode ser usada em qualquer lugar onde um endereço de imagem normal funciona: em um <img src>, no CSS background-image: url(...), em um payload JSON ou em um template de e-mail. O Base64 deixa os dados cerca de um terço maiores que o arquivo original, por isso funciona melhor com imagens pequenas.
Quando usar
- Embutir um ícone ou logo pequeno no CSS para que a página faça uma requisição a menos.
- Colocar uma imagem dentro de um único arquivo HTML autocontido, como um relatório ou uma demo.
- Enviar uma imagem em uma requisição de uma API JSON que não aceita uploads multipart.
- Adicionar uma imagem inline a uma assinatura de e-mail em HTML ou a uma fixture de teste.
Exemplo prático
Entrada
pixel.png (1 × 1 px, azul, 69 bytes)Saída
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mOwbvoGAAKvAbSJsn7VAAAAAElFTkSuQmCCPerguntas sobre esta ferramenta
Por que o texto em Base64 é maior que a minha imagem?
O Base64 escreve cada 3 bytes como 4 caracteres de texto, então o resultado fica cerca de 33% maior que o arquivo. Uma imagem de 30 KB vira aproximadamente 40 KB de texto. A compressão Gzip ou Brotli no servidor recupera parte disso.
Quando não devo embutir uma imagem?
Evite fazer isso com fotos grandes e com imagens usadas em muitas páginas. Um arquivo de imagem normal é armazenado em cache pelo navegador uma única vez, enquanto uma imagem embutida é baixada de novo com cada arquivo HTML ou CSS que a contém.
Como uso o resultado no CSS?
Coloque-o dentro de url(): background-image: url("data:image/png;base64,...");. Para ícones SVG, um SVG codificado para URL costuma ser menor que o Base64; a página Codificador de URL pode prepará-lo.
Como transformo Base64 de volta em imagem?
Cole a data URL completa na barra de endereço do navegador e salve a imagem, ou decodifique a parte depois da vírgula com a ferramenta Decodificador Base64 se você precisar dos bytes brutos.
Esta ferramenta é gratuita?
Sim, é grátis. Sem cadastro nem e-mail. Veja o resultado nesta página.
Como recebo o resultado?
Use a ferramenta nesta página. O resultado aparece aqui, sem envio por e-mail.