Um Data URI incorpora o conteúdo de um arquivo diretamente em HTML, CSS ou JS como data:[tipo];base64,[dados], sem precisar de uma requisição HTTP separada. Em campanhas de e-mail marketing no Brasil, essa técnica esbarra num problema bem conhecido de quem trabalha com ferramentas como RD Station ou Mailchimp: nem todo cliente de e-mail exibe imagens embutidas da mesma forma.
Por que a logo embutida às vezes não aparece no e-mail
O Outlook para desktop — que ainda renderiza e-mails usando o motor do Word em vez de um motor de navegador — simplesmente não suporta imagens em data: URI, mostrando um ícone de imagem quebrada no lugar. É por isso que plataformas de e-mail marketing quase sempre recomendam hospedar as imagens num servidor em vez de embuti-las como Base64, mesmo elas funcionando bem no Gmail.
Onde compensa
- Menos requisições HTTP — útil para ícones pequenos ou imagens de fundo dentro de uma aplicação web.
- O arquivo fica "preso" ao documento e não quebra se um caminho de CDN mudar.
- Ótimo para placeholders que precisam aparecer instantaneamente, antes da imagem real carregar.
Limitações
- O Base64 aumenta o tamanho dos dados em cerca de um terço em comparação com o arquivo binário.
- Um Data URI grande infla o próprio arquivo HTML/CSS e não é armazenado em cache separadamente da página.
- Para imagens grandes ou reutilizadas com frequência, um arquivo separado com cache quase sempre é mais eficiente em visitas repetidas.
SVG como texto, não como Base64
Diferente dos formatos raster, o SVG é texto (XML), por isso não precisa ser codificado em Base64: basta escapar corretamente os caracteres especiais via percent-encoding (data:image/svg+xml,%3Csvg...). Essa variante fica um pouco mais leve e continua editável como texto puro direto no arquivo CSS.