Converter imagem para Base64 Data URL

Converta sua imagem para texto Base64.

base64-converter.js
1const img = await loadImage(file);
2const canvas = document.createElement("canvas");
3const ctx = canvas.getContext("2d");
4ctx.drawImage(img, 0, 0);
5const dataUrl = canvas.toDataURL();
6return btoa(dataUrl);

Solte imagens aqui

ou clique para navegar

JPGPNGWebPAVIFHEIC

Os arquivos nunca saem do seu navegador

Configurações de saída

Escolha como o Base64 é entregue.

O processamento é executado localmente no seu navegador.

Codificação Instantânea

Envie a imagem — receba a string.

Enviar

Arraste e solte sua imagem aqui.

Gerar Base64

Codificamos cada imagem localmente, sem uploads.

Copie ou baixe

Copie para a área de transferência ou baixe um ZIP de arquivos .txt.

Quando usar imagens Base64

Cenários comuns em que a codificação Base64 embutida melhora o desempenho e simplifica a implantação.

Incorporações de HTML e CSS

Pequenas imagens embutidas diretamente no código para reduzir solicitações HTTP e melhorar o tempo de carregamento inicial.

Modelos de e-mail

Incorpore logotipos e ícones em e-mails HTML para que sejam exibidos sem bloqueio de imagens.

Integrações de API

Envie imagens para APIs de visão de IA, armazenamento em nuvem ou webhooks que esperam cargas úteis Base64.

Aplicativos de arquivo único

Agrupe todos os ativos em um arquivo HTML para ferramentas off-line, demonstrações ou documentos portáteis.

Perguntas sobre Base64

Tudo sobre Data URLs.

Para que é usada a codificação Base64?

Base64 transforma uma imagem em texto para que ela possa ser incorporada diretamente em tags HTML img, propriedades de imagem de fundo CSS, cargas úteis de API JSON e modelos de e-mail sem a necessidade de downloads de arquivos separados.

Devo usar um URL de dados ou Base64 bruto?

Use um URL de dados (com o prefixo data:image/...;base64) para incorporações de HTML e CSS. Use Base64 bruto ao enviar para APIs como OpenAI Vision, fazer upload para serviços em nuvem ou quando o sistema receptor adicionar seu próprio prefixo.

Como incorporo Base64 em HTML?

Use a URL de dados diretamente no atributo src: <img src="data:image/png;base64,..." />. Isso elimina uma solicitação HTTP e a imagem é carregada instantaneamente com a página.

Como faço para usar Base64 em CSS?

Defina-o como uma imagem de fundo: background-image: url("data:image/png;base64,..."). Ótimo para pequenos ícones, padrões e elementos de interface do usuário que precisam ser carregados sem oscilações.

Minhas imagens são enviadas para um servidor?

Não. Todas as conversões Base64 acontecem localmente no seu navegador usando JavaScript. Suas imagens nunca saem do seu dispositivo, tornando-o 100% privado e seguro.

Posso converter um ZIP com pastas dentro?

Sim. Os uploads ZIP são totalmente suportados. A estrutura de pastas é preservada quando você baixa todos os arquivos Base64 como ZIP, facilitando o processamento em lote.

Por que a string é maior que a imagem?

A codificação Base64 usa 6 bits por byte em vez de 8, aumentando o tamanho em cerca de 33%.

Existe um limite de tamanho de arquivo?

Os arquivos individuais são limitados a 25 MB para manter o bom desempenho do navegador. Para obter melhores resultados com Base64, use imagens com menos de 100 KB para evitar sobrecarregar seu HTML/CSS.

Arquivo muito grande?

Comprima antes de converter para Base64.