Base64 é um método de codificação que converte dados binários (como imagens) em uma string de texto ASCII. Isso permite que você insira uma imagem diretamente no seu código HTML, CSS ou JavaScript sem precisar de um arquivo separado. É uma técnica valiosa em cenários específicos, mas tem trade-offs importantes que todo desenvolvedor precisa entender.

O Que É Codificação Base64?

Base64 converte cada grupo de 3 bytes de dados binários em 4 caracteres ASCII usando um alfabeto de 64 caracteres (A-Z, a-z, 0-9, +, /). Isso significa que a versão Base64 de qualquer arquivo é aproximadamente 33% maior que o arquivo original.

A string resultante pode ser usada em um Data URI, que tem o seguinte formato:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...

Como Usar Base64 em HTML e CSS

Em HTML (tag img)

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." alt="Minha imagem">

Em CSS (background-image)

.elemento {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...");
}

Em JavaScript

const img = new Image();
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...";

Quando Usar Base64

  • Imagens muito pequenas (< 2KB): Ícones minúsculos, bullets decorativos e microimagens. A economia de uma requisição HTTP vale o aumento de 33% no tamanho.
  • E-mails HTML: Alguns clientes de e-mail bloqueiam imagens externas por padrão. Base64 inline garante que a imagem aparece sem ação do usuário.
  • Aplicações single-file: Ferramentas que precisam funcionar como um único arquivo HTML sem dependências externas.
  • Sprites CSS inline: Pequenos ícones de UI embedados diretamente no CSS para evitar requisições HTTP adicionais.

Quando NÃO Usar Base64

  • Imagens grandes (> 10KB): O aumento de 33% no tamanho supera a economia de uma requisição HTTP.
  • Imagens que mudam frequentemente: Base64 inline no HTML/CSS não pode ser cacheado separadamente pelo navegador.
  • Performance crítica: Strings Base64 longas aumentam o tamanho do HTML/CSS, atrasando o parsing e renderização.

Converta Imagens para Base64

Arraste sua imagem e copie o Data URI pronto para usar em HTML, CSS ou JavaScript. Suporta PNG, JPG, WebP, SVG e GIF.

Abrir Conversor Base64

Frequently Asked Questions

Base64 aumenta o tamanho do arquivo?

Sim. A codificação Base64 aumenta o tamanho em aproximadamente 33%. Uma imagem de 10KB se torna uma string de ~13.3KB. Para imagens pequenas (< 2KB), esse aumento é compensado pela eliminação de uma requisição HTTP. Para imagens maiores, use arquivos separados.

Posso converter qualquer formato para Base64?

Sim. Base64 funciona com qualquer formato de imagem: PNG, JPEG, WebP, GIF, SVG, ICO e outros. O tipo MIME no Data URI (data:image/png, data:image/jpeg, etc.) indica ao navegador como interpretar os dados.

Base64 afeta o SEO?

Imagens inline em Base64 não são indexadas pelos mecanismos de busca para busca de imagens, pois não possuem URL própria. Para imagens que você deseja que apareçam no Google Imagens, use arquivos separados com atributos alt descritivos. Para ícones decorativos e microimagens, Base64 não tem impacto negativo no SEO.