Validador de Data URI

Data URIs: embutindo bytes direto em HTML, CSS e JSON

Um data: URI e uma URL cujo corpo e o próprio recurso — não tem host, não tem path, não faz requisição de rede. O esquema foi padronizado pela RFC 2397 (1998) e e suportado por todo browser moderno, cliente de email e ferramenta HTTP-aware. E a forma canônica de inlinar uma imagem pequena, um icone SVG ou um JSON curto em HTML, CSS ou JavaScript sem disparar um roundtrip HTTP adicional.

O trade-off e direto: você elimina uma requisição de rede e o asset passa a ser cacheado junto com o documento pai, mas paga ~33% em tamanho (overhead do Base64) e abre mão do cache independente. Bem usado, e uma otimizacao elegante; mal usado, incha HTML/CSS e mata o hit rate do cache.

Sintaxe (RFC 2397)

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

• média-type: tipo MIME opcional, ex. image/png ou application/json. Quando omitido, o default e text/plain;charset=US-ASCII.
• ;base64: flag opcional. Quando presente, o payload e decodificado como Base64. Quando ausente, e decodificado como texto percent-encoded.
• data: os bytes em si, percent-encoded ou em Base64.

Exemplos reais:

data:text/plain,Hello%20World
data:application/json,{"hello":"world"}
data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'.../>
data:image/png;base64,iVBORw0KGgoAAANSUhEUgAA...
data:text/html;charset=utf-8;base64,PGgxPkhlbGxvPC9oMT4=

Casos de uso comuns

• Imagens de fundo em CSS: background: url("data:image/svg+xml;base64,...") evita uma requisição separada para icones e gradientes pequenos.
• Favicons SVG inline: <link rel="icon" href="data:image/svg+xml,<svg...><text>🚀</text></svg>"> — o truque do favicon emoji popularizado em 2020.
• Email HTML: imagens inline para o email renderizar offline, sem chamada de pixel de tracking.
• Downloads client-side: a.href = "data:text/csv,..." + a.download = "relatorio.csv" deixa o usuário salvar um arquivo gerado sem servidor.
• Fixtures de teste: embutir imagens pequenas ou JSONs em arquivos de teste deixa a suite auto-contida.

Performance: quando data URI ajuda e quando atrapalha

Embutir um SVG de 200 bytes inline e quase sempre ganho — você troca 200 bytes de payload por um handshake TCP e um round-trip TLS que pagaria de qualquer jeito. Embutir uma hero image de 200KB e quase sempre perda: incha HTML/CSS, impede que o browser cacheie a imagem separadamente e bloqueia o first paint.

Regras praticas:

• Inlinar assets menores que ~2KB. Acima disso, usar URL real com loading="lazy".
• Preferir SVG percent-encoded a SVG em Base64 — os dois funcionam, mas percent-encoded sai ~30% menor em payloads textuais.
• Nunca inlinar nada que deva ser cacheado entre páginas (logos, sprites, web fonts).
• Olhar o limite do browser: Chrome aceita até ~2MB por data URL; Safari antigo era bem mais restrito.

Segurança e CSP

Data URIs podem ser vetor de XSS e phishing: data:text/html renderiza markup arbitrario, e historicamente atacantes usaram URLs data: em campanhas de phishing para hospedar telas de login falsas sem precisar registrar domínio. Mitigacoes:

• CSP: restringir data: por diretiva. Uma política comum libera img-src 'self' data: mas bloqueia frame-src data: e object-src data:.
• Chrome e Firefox bloqueiam navegacao top-level para data:text/html desde 2018 para conter phishing.
• Iframes sandboxed: quando você realmente precisa renderizar data:text/html arbitrario, isole com sandbox="allow-scripts" sem allow-same-origin.

Clientes de email e a alternativa cid:

O Outlook (especialmente Outlook 2007-2019 com o Word como renderer) tira muitos data: URIs em corpos HTML de email, o que quebra logos e graficos inline. A alternativa portavel para email e o esquema cid: (RFC 2392), que referência um anexo MIME pelo Content-ID. Provedores modernos de email transacional (Postmark, SendGrid, AWS SES) cuidam do wrapping cid: automaticamente.

Tooling

• DevTools do browser: cole qualquer data URI na barra de endereço — o browser renderiza nativamente.
• Node.js: Buffer.from(payload).toString('base64') para codificar; npm dataurl e data-urls para parsing completo.
• Webpack / Vite: o tipo de modulo asset/inline emite data URIs automaticamente para assets abaixo de um threshold.
• Bash: base64 -w 0 image.png no Linux, base64 -i image.png no macOS.

FAQ

Data URIs são cacheaveis? Não independentemente. São cacheados junto com o documento que os contem, mas o browser não consegue reusar entre páginas ou sites.

Qual o tamanho máximo? A especificação não impoe limite, mas os browsers sim. Chrome e Firefox aguentam até ~2MB com folga; Safari historicamente cortava antes. Para portabilidade, considere ~32KB como limite seguro.

Data URIs são seguros? São inertes em contexto de imagem, fonte e CSS. Para text/html e application/javascript executam como código — use restrições data: em CSP e iframes sandboxed ao renderizar conteúdo não confiável.

Quando preferir percent-encoded em vez de Base64? Em payloads textuais como SVG e JSON — percent-encoded costuma sair 20-30% menor. Base64 ganha em dados binarios (PNG, JPEG, fontes), onde percent-encoding explodiria o tamanho.

Esta ferramenta envia o data URI para um servidor? Não. O parsing e a validação rodam inteiramente no navegador. Nada e enviado ou registrado.