Imagem para Base64 Codificação Guia Completo

Incorpore imagens diretamente em HTML, CSS e JSON usando codificação Base64 — sem arquivos externos, sem requisições HTTP.

~33% overhead de tamanho Sem requisições HTTP Funciona em todos os navegadores

A codificação Base64 converte dados binários de imagem em uma string de texto de 64 caracteres ASCII. Isso permite incorporar imagens diretamente em HTML, CSS e JSON sem referências a arquivos externos.

A técnica é amplamente usada para ícones pequenos, templates de email e apps offline. Entender quando Base64 ajuda e quando prejudica a performance é essencial.

O que é codificação Base64

Base64 é um esquema de codificação binário-para-texto que representa dados binários usando 64 caracteres: A–Z, a–z, 0–9, + e /. Cada grupo de 3 bytes de dados binários mapeia para 4 caracteres Base64. Imagens codificadas em Base64 podem ser incluídas em HTML como data URIs ou em CSS como valores background-image.

Ferramenta gratuita Codificador de Imagem para Base64 Converta qualquer imagem para um URI de dados Base64 instantaneamente

Como funciona a codificação Base64

O codificador lê a imagem como bytes brutos, divide em grupos de 6 bits e mapeia cada grupo para um dos 64 caracteres. A saída termina com = ou == como preenchimento. Um arquivo PNG de 1KB torna-se aproximadamente 1.37KB de texto Base64.

Base64 em HTML e CSS

Uma imagem codificada em Base64 pode ser usada em qualquer lugar onde uma URL é esperada. Em HTML como src de img, em CSS como background-image. O formato data URI é:

<!-- HTML -->
<img src="data:image/png;base64,iVBORw0KGgo..." />

/* CSS */
.icon &#123;
  background-image: url('data:image/png;base64,iVBORw0KGgo...');
&#125;

Ferramenta gratuita Codificador / Decodificador Base64 Codifique e decodifique strings Base64 para texto e dados

Overhead e performance

Base64 adiciona aproximadamente 33% de overhead. Um PNG de 10KB torna-se ~13.3KB de Base64. No entanto, incorporar elimina a requisição HTTP — para arquivos pequenos (< 5KB), esta compensação é favorável. Para imagens maiores, o overhead supera a economia. Strings Base64 não são cacheáveis separadamente.

Quando usar imagens Base64

Use Base64 para: ícones pequenos e favicons (< 5KB) em CSS; templates de email onde imagens externas podem ser bloqueadas; PWAs offline; arquivos SVG com texturas bitmap; payloads JSON. Evite para: imagens > 10KB, imagens que mudam frequentemente, imagens que se beneficiam do cache CDN.

Limitações e alternativas

Limitações: sem cache separado, aumento de 33%, strings longas no código-fonte. Alternativas: sprites CSS, multiplexação HTTP/2, SVGs inline. Para emails, use imagens hospedadas em CDN quando strings Base64 são muito longas.

Ferramenta gratuita Gerador de Favicon Gere favicons em todos os tamanhos necessários a partir de qualquer imagem

FAQ

O que é codificação Base64 de imagens? +

A codificação Base64 converte dados binários de imagem em uma string de texto imprimível de 64 caracteres ASCII, permitindo incorporar imagens em HTML, CSS ou JSON sem arquivos separados.

Quanto maior é uma imagem Base64? +

Base64 adiciona aproximadamente 33% de overhead. Um PNG de 10KB torna-se ~13.3KB de texto Base64.

Como uso uma imagem Base64 em HTML? +

Como data URI no atributo src:

. O mesmo formato funciona em CSS como background-image.

Base64 funciona com todos os formatos de imagem? +

Sim. O tipo MIME no data URI especifica o formato: image/png, image/jpeg, image/gif, image/webp, image/svg+xml.

Devo usar Base64 para imagens grandes? +

Não. Para imagens > 5–10KB, o overhead de 33% supera a economia de requisições HTTP. Use Base64 apenas para ícones pequenos e placeholders.

Imagens Base64 são cacheadas pelos navegadores? +

Não separadamente. A string Base64 é parte do arquivo HTML ou CSS e é cacheada como parte desse arquivo.

Posso usar imagens Base64 em emails? +

Sim. Alguns clientes de email bloqueiam imagens externas, mas sempre renderizam Base64 inline. Porém, aumentam significativamente o tamanho do email.