Data URIs Base64 em CSS e HTML

Um data URI permite incorporar um arquivo inteiro —uma imagem, uma fonte, um ícone SVG— diretamente dentro do seu HTML ou CSS, sem uma requisição de rede separada. O arquivo é codificado em Base64 e colado inline como texto. Bem usado, economiza milissegundos no carregamento das páginas. Usado sem cuidado, incha suas folhas de estilo e deixa tudo mais lento. Este guia mostra a sintaxe exata, os compromissos reais e uma regra clara sobre quando recorrer a ele.

Quer gerar um agora mesmo? Cole um arquivo em Base64 Decode para codificá-lo, ou use o gerador de data URI dedicado para obter uma string data: pronta para colar.

---

Como é um data URI

Um data URI segue uma estrutura simples definida na RFC 2397:

data:[<media type>][;base64],<data>

Dividido em partes:

• data: — o esquema, como https: ou mailto:
• <media type> — o tipo MIME, p. ex. image/png, font/woff2, image/svg+xml
• ;base64 — sinaliza que a carga está codificada em Base64 (omita-o em formatos de texto puro)
• <data> — os bytes codificados propriamente ditos

Um exemplo real de um PNG minúsculo:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==" alt="1px dot">

O navegador decodifica essa string e a renderiza como uma imagem, sem requisição HTTP a um arquivo separado.

---

Usar data URIs em CSS

O lugar mais comum onde os data URIs brilham são os planos de fundo em CSS, onde eliminar uma requisição evita uma ida e volta que bloqueia a renderização:

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

Você pode incorporar fontes web da mesma forma dentro de uma regra @font-face:

@font-face {
  font-family: "Brand";
  src: url("data:font/woff2;base64,d09GMgABAAAAAA...") format("woff2");
  font-display: swap;
}

---

SVG: o único formato que muitas vezes você NÃO deveria passar para Base64

O SVG é texto, não binário. Codificá-lo em Base64 funciona, mas na verdade deixa o arquivo maior e ilegível. Para SVG, prefira a codificação URL: ela se mantém menor e você ainda pode editá-lo à mão:

/* Base64 — maior, opaco */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxu...");

/* Codificado em URL — menor, legível por humanos */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...%3E");

Uma ferramenta dedicada como o conversor de SVG para data URI produz automaticamente a forma otimizada e codificada em URL. Reserve o Base64 para ativos genuinamente binários como PNG, JPEG e WOFF2.

---

O compromisso de desempenho

O inlining não é grátis. Cada data URI carrega os mesmos custos e benefícios:

Benefícios

• Uma requisição HTTP a menos. Para ativos minúsculos acima da dobra, remover uma ida e volta pode melhorar de forma mensurável a primeira pintura.
• Entrega atômica. O ativo chega com o HTML ou o CSS, então não há piscar de imagem ausente nem uma segunda requisição que possa falhar.
• Sem problemas de CORS ou de caminho. Os dados viajam com o documento.

Custos

• Carga ~33% maior. O Base64 infla os dados binários em cerca de um terço (a cada 3 bytes viram 4 caracteres). Uma imagem de 9 KB passa a ter ~12 KB de texto.
• Sem cache independente. Um image.png separado é colocado em cache uma vez e reutilizado em todas as páginas. Uma imagem incorporada é baixada novamente dentro de cada arquivo HTML ou CSS que a contém, a cada falha de cache.
• O CSS que bloqueia a renderização fica mais pesado. Incorporar imagens grandes em uma folha de estilo atrasa toda a folha de estilo, e portanto a primeira pintura.
• Mais difícil de manter. Um blob Base64 de 40 KB no seu CSS é ilegível e incha os diffs.

A penalidade de 33% no tamanho é inerente à codificação. Se você quiser entender exatamente por que isso acontece, consulte o que é a codificação Base64.

---

Uma regra prática simples

Use um data URI quando todas estas condições forem verdadeiras:

• O ativo é pequeno (uma diretriz comum é abaixo de ~2–4 KB).
• Ele é crítico e está acima da dobra (um logotipo, um ícone principal, um plano de fundo usado de imediato).
• Ele é usado em uma ou poucas páginas, de modo que você não o esteja duplicando pelo site todo.

Use um <img src> normal ou um url() externo quando:

• O ativo é grande (fotos, ilustrações): a sobrecarga de 33% e a perda de cache superam a requisição economizada.
• Ele é reutilizado em muitas páginas: o cache compartilhado vence.
• Você depende de uma CDN, carregamento preguiçoso ou srcset responsivo, nenhum dos quais funciona com dados incorporados.

O HTTP/2 e o HTTP/3 modernos multiplexam requisições de forma barata, o que reduziu o ganho do inlining em comparação com os antigos tempos do HTTP/1.1. Incorpore de forma deliberada, para ativos pequenos e específicos, não como estratégia geral.

---

Gerar e decodificar data URIs

Para criar um data URI, codifique o arquivo em Base64 e envolva-o no prefixo data:<mime>;base64,. O gerador de data URI faz isso em um único passo e escolhe o tipo MIME correto para você.

Para ler um data URI de volta a um arquivo, remova tudo até a vírgula inclusive e depois decodifique em Base64 o restante. A ferramenta Base64 para imagem pré-visualiza o resultado, e Base64 para arquivo recupera qualquer tipo de arquivo. Tudo roda no seu navegador, então ativos sensíveis nunca saem da sua máquina.

---

Perguntas frequentes

O que é um data URI Base64?

Um data URI é uma string que incorpora o conteúdo de um arquivo diretamente no HTML ou CSS usando o esquema data:. Quando o arquivo é binário (como um PNG), ele é codificado em Base64 e prefixado com data:<mime-type>;base64,. O navegador o decodifica inline, então nenhuma requisição de rede separada é necessária.

Os data URIs deixam uma página mais rápida?

Eles podem, para ativos críticos pequenos, ao remover uma requisição HTTP. Mas adicionam ~33% ao tamanho do ativo e não podem ser colocados em cache de forma independente, então incorporar arquivos grandes ou muito reutilizados normalmente deixa as páginas mais lentas no geral.

Devo codificar SVG em Base64 para um data URI?

Normalmente não. O SVG é texto, então a codificação URL o mantém menor e legível por humanos. Reserve o Base64 para formatos realmente binários como PNG, JPEG e fontes WOFF2.

Qual é o tamanho máximo de um data URI?

Não há um limite rígido na especificação, mas os navegadores historicamente limitaram os data URIs (o IE antigo os limitava a 32 KB). Na prática, mantenha-os pequenos —alguns kilobytes— porque ativos incorporados grandes incham seu HTML/CSS e prejudicam o cache e os tempos de pintura.

Como converto uma imagem em um data URI?

Codifique a imagem em Base64 e adicione o prefixo data:image/png;base64, (correspondendo ao tipo MIME real). O gerador de data URI e o Base64 Decode fazem isso no navegador, sem enviar nada para um servidor.

Por que minha imagem de data URI não está aparecendo?

Os culpados habituais são um tipo MIME errado, uma flag ;base64 ausente, espaços em branco ou quebras de linha soltos dentro da string, ou um Base64 truncado. Recodifique o arquivo de forma limpa e confirme que o prefixo corresponde ao formato real.