Codificar uma imagem em Base64 / Data URI

Uma Data URI é um URL que contém diretamente os dados de um recurso em vez de apontar para um ficheiro remoto. A sua forma geral é data:[<mediatype>][;base64],<data>. Para uma imagem, tem-se tipicamente data:image/png;base64,iVBORw0KGgo…. O recurso é incorporado no HTML, CSS ou JSON e carregado sem qualquer pedido HTTP adicional.

As motivações comuns:

• Reduzir os pedidos HTTP: integrar um ícone diretamente no CSS em vez de o carregar à parte do documento
• Assinatura de e-mail com imagem inline: sem risco de a imagem ser bloqueada como conteúdo remoto
• Web Components / Web Workers: onde carregar um recurso externo coloca frequentemente um problema de scope ou de CORS
• Storage local (LocalStorage, IndexedDB, base de dados): serializar uma miniatura de avatar como string
• Self-contained snippets: um ficheiro HTML autossuficiente, sem dependência externa

Alguns contextos concretos em que a codificação Base64 de imagem se justifica:

• Ícones SVG inline em CSS (background-image: url("data:image/svg+xml;base64,…"))
• Assinaturas de e-mail personalizadas com logótipo
• Prototipagem rápida de uma página autónoma partilhada por e-mail
• Web components autónomos (um único ficheiro implantável)
• Geração de PDF no lado do navegador (jsPDF) com miniaturas incorporadas
• Dados de teste (mocks) que contêm imagens

Três etapas:

1. Carregue a sua imagem (PNG, JPG, SVG, WebP, GIF) através da zona de drop
2. Clique em "Codificar"
3. Copie a Data URI resultante com o botão dedicado e cole-a no seu HTML, CSS ou JSON

O Base64 não é uma solução milagrosa. Algumas precauções:

• O Base64 aumenta o tamanho em cerca de 33 %: 4 caracteres ASCII por cada 3 bytes binários
• As imagens codificadas não são guardadas em cache separadamente pelo navegador; são recarregadas com o HTML/CSS que as contém
• A privilegiar para imagens com menos de 10 KB; acima disso, um ficheiro externo costuma ser mais eficiente
• Para SVG, prefira a codificação URL (via encodeURIComponent) em vez de Base64: o resultado é mais curto e continua analisável como texto
• Ferramentas de build modernas (Webpack, Vite) automatizam a escolha Base64 vs. ficheiro externo através de um limiar de tamanho configurável

HTML:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAAS+rJYwAAAAASUVORK5CYII=" alt="pixel">

CSS:

.icon {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…") no-repeat;
  width: 16px;
  height: 16px;
}

JSON (mock data):

{
  "user": {
    "name": "Adrien",
    "avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA…"
  }
}

Qual a diferença entre Base64 e binário?

O binário representa os octetos brutos de um ficheiro. O Base64 é uma codificação que transforma esses octetos em 64 caracteres ASCII imprimíveis (A-Z, a-z, 0-9, +, /). Os contextos de texto (HTML, JSON, e-mail) não conseguem transportar binário; o Base64 resolve este problema ao preço de um sobrecusto de tamanho de 33 %.

Porque é que a minha Data URI é tão longa?

Uma imagem de 30 KB em binário torna-se aproximadamente 40 KB em Base64. E cada caractere é um byte ASCII, portanto sim, a cadeia é longa. É inerente à codificação. Para imagens grandes, mantenha um ficheiro externo.

Todos os navegadores suportam Data URIs?

Sim, sem exceção entre os navegadores modernos (Chrome, Firefox, Safari, Edge, mesmo desde o IE8). Limites históricos: o IE8 fixava-se em 32 KB. Já não há motivo de preocupação na web atual.

Como descodificar uma Data URI?

O nosso descodificador de imagem Base64 faz a operação inversa: cole a sua Data URI, recupere o ficheiro de imagem (PNG, JPG, SVG, WebP) pronto a carregar ou a guardar.

Base64 vs. URL encoding para SVG?

Para SVG, o URL encoding (com encodeURIComponent) produz uma cadeia mais curta do que Base64 e continua legível como texto. É a opção recomendada em CSS quando se integra um SVG inline. Para os formatos binários (PNG, JPG), o Base64 continua obrigatório.

A codificação Base64 afeta a qualidade da imagem?

Não. A codificação é lossless: é uma bijeção octeto binário <-> cadeia Base64. Os píxeis originais são estritamente preservados. Só o tamanho do ficheiro transportado aumenta em 33 %.