Converter uma imagem em Base64 (data URI)

Importe uma imagem e obtenha diretamente uma string data:image/...;base64,... pronta para colar em CSS ou HTML, para incluir um pequeno ícone sem requisição de rede adicional.

Exemplo:

Como funciona

Você quer incluir um pequeno ícone, um logotipo ou um pictograma diretamente em uma folha de estilo CSS (por exemplo em background-image) ou em HTML, sem adicionar um arquivo separado nem uma requisição de rede adicional? Importe sua imagem: ela é codificada em uma string Base64 precedida do prefixo correto data:image/png;base64, (ou jpeg, gif, webp... conforme o formato detectado), diretamente utilizável como valor de URL no seu código.

Quando usar uma imagem em Base64 em vez de um arquivo separado?

É especialmente relevante para imagens muito pequenas (ícones, pictogramas, pequenos logotipos): isso evita uma requisição HTTP adicional e pode simplificar a implantação de um componente autônomo. Para fotos ou imagens mais pesadas, um arquivo separado continua sendo preferível: o Base64 aumenta o tamanho em cerca de 33% e não é armazenado em cache de forma independente pelo navegador.

O formato da imagem é detectado automaticamente?

Sim. A ferramenta analisa os primeiros bytes do arquivo importado para determinar seu formato real (PNG, JPEG, GIF, WebP...) e o insere no prefixo da string gerada, sem confiar na extensão do nome do arquivo.

Processamento 100% local no seu navegador (WebAssembly) — sua imagem nunca é enviada a um servidor.