Skip to main content

Conversor de Imagem para Base64 Converte imagens em dados URIs codificados em Base64 para incorporação em HTML, CSS e código.

Imagem para Base64 illustration
🖼️

Imagem para Base64

Converte imagens em dados URIs codificados em Base64 para incorporação em HTML, CSS e código.

1

Faça o Upload da Sua Imagem

Solte ou selecione qualquer arquivo de imagem para codificar como Base64.

2

Copie a Saída

Copie o URI de dados, a string Base64 bruta ou a tag de imagem HTML completa.

3

Use no Código

Cole os dados Base64 diretamente no seu código HTML, CSS ou JavaScript.

Loading tool...

What Is Imagem para Base64?

Um codificador de imagem para Base64 converte arquivos de imagem em strings de texto que podem ser incorporadas diretamente no código HTML, CSS ou JavaScript. A codificação Base64 representa dados binários de imagens como caracteres ASCII, tornando possível incluir imagens inline sem solicitações de arquivo separadas. A ferramenta gera três saídas: um URI de dados completo, a string bruta Base64 para APIs e uma tag img HTML pronta para colar. Isso é particularmente útil para pequenos ícones, logotipos e elementos da interface do usuário onde a redução das solicitações HTTP melhora o desempenho.

Why Use Imagem para Base64?

  • Três formatos de saída: URI de dados, string Base64 bruta e tag HTML
  • Elimina as solicitações HTTP para imagens pequenas
  • Pronto para copiar e colar em HTML, CSS e JavaScript
  • Mostra o comprimento da Base64 para estimativa de tamanho

Common Use Cases

Imagens Inline em HTML

Incorpore imagens pequenas diretamente no HTML para reduzir as solicitações HTTP.

Imagens de Fundo em CSS

Use URIs de dados Base64 nas propriedades background-image do CSS.

Modelos de E-mail

Incorpore imagens diretamente nos e-mails HTML para evitar links de imagem quebrados.

Cargas da API

Inclua dados de imagem em cargas JSON para APIs que aceitam imagens codificadas em Base64.

Technical Guide

A codificação Base64 converte dados binários de imagem em uma string de 64 caracteres ASCII. O método readAsDataURL da API FileReader lê o arquivo e produz um URI de dados. A codificação Base64 aumenta o tamanho dos dados em aproximadamente 33% porque cada 3 bytes de dados binários se tornam 4 caracteres Base64. Por esse motivo, é mais eficiente para pequenas imagens com menos de 10KB.

Tips & Best Practices

  • 1
    Melhor para pequenas imagens (ícones, logotipos) com menos de 10KB para evitar o inchaço do código
  • 2
    A Base64 aumenta o tamanho do arquivo em cerca de 33% - não use para grandes imagens
  • 3
    Os URIs de dados no CSS não podem ser armazenados em cache separadamente como imagens externas
  • 4
    Use a saída da tag de imagem HTML para copiar e colar rapidamente em páginas web

Related Tools

Frequently Asked Questions

Q Quando devo usar imagens Base64?
Para pequenas imagens (ícones, logotipos com menos de 10KB) onde a redução das solicitações HTTP supera o aumento de tamanho de 33%.
Q Por que a Base64 é maior do que o original?
A codificação Base64 converte 3 bytes em 4 caracteres, resultando em um aumento de tamanho aproximado de 33%.
Q Posso usar Base64 no CSS?
Sim, use o URI de dados na propriedade background-image: url(data:image/png;base64,...) ou outras propriedades de imagem do CSS.
Q Funciona com todos os formatos de imagem?
Sim, qualquer formato de imagem suportado pelo seu navegador pode ser codificado em Base64.
Q Há um limite de tamanho?
Não há um limite rígido, mas a Base64 para imagens acima de 100KB torna o código desajeitado.

About This Tool

Imagem para Base64 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.