Neste artigo
O que sao data URIs?
Um data URI (Uniform Resource Identifier) e um esquema que permite incorporar conteudo de arquivo diretamente em uma string URL em vez de vincular a um arquivo externo. Definido pela RFC 2397, data URIs codificam o conteudo inline usando o formato data:[mediatype][;base64],data. Isso elimina a necessidade de uma requisicao HTTP separada para buscar o recurso.
Data URIs sao comumente usados para incorporar pequenas imagens, fontes, SVGs e outros assets diretamente em HTML ou CSS. Em vez de referenciar um arquivo externo com uma URL, todo o conteudo do arquivo e codificado (tipicamente em base64) e colocado inline. Isso pode reduzir requisicoes HTTP e simplificar o deployment para assets pequenos.
Como criar data URIs
Um gerador de data URI converte conteudo de arquivo ou texto para o formato data URI. O processo envolve identificar o tipo MIME e codificar o conteudo.
- Entrada de texto — insira texto diretamente e especifique o tipo MIME (text/plain, text/html, text/css, application/json). O texto pode ser codificado em URL ou em base64
- Upload de arquivo — faca upload de qualquer arquivo (imagens, fontes, SVGs, documentos) e o gerador determina o tipo MIME automaticamente e codifica o conteudo em base64
- Selecao de tipo MIME — o tipo de midia diz ao navegador como interpretar os dados. Tipos comuns incluem image/png, image/svg+xml, text/css e application/javascript
Experimente gratuitamente — sem cadastro
Gerar um data URI →Quando usar data URIs
Data URIs sao mais beneficos para assets pequenos e frequentemente usados onde eliminar uma requisicao HTTP melhora o desempenho.
- Imagens de fundo CSS — incorpore pequenos icones ou padroes diretamente no CSS para evitar requisicoes extras. Ideal para imagens abaixo de 2-4 KB
- SVGs inline no CSS — incorpore icones SVG como data URIs em propriedades background-image quando o SVG nao pode ser colocado diretamente no HTML
- Templates HTML de email — incorpore imagens diretamente no HTML do email porque muitos clientes de email bloqueiam imagens externas por padrao
Perguntas frequentes
Ha um limite de tamanho para data URIs?
Nao ha um limite rigido na especificacao, mas limites praticos existem. A maioria dos navegadores modernos lida com data URIs de ate varios megabytes, mas o Internet Explorer os limitava a 32 KB. A codificacao base64 aumenta o tamanho dos dados em aproximadamente 33%. Para assets maiores que 5-10 KB, arquivos externos com cache adequado sao geralmente mais eficientes.
Os data URIs afetam o desempenho?
Para assets pequenos, data URIs melhoram o desempenho eliminando requisicoes HTTP. No entanto, dados codificados em base64 sao cerca de 33% maiores que o arquivo original, e data URIs nao podem ser armazenados em cache independentemente pelo navegador. Para arquivos grandes, arquivos externos com headers de cache funcionam melhor.
Os data URIs sao seguros?
Data URIs tem implicacoes de seguranca. A maioria dos navegadores bloqueia a execucao de JavaScript em data URIs. No entanto, data URIs podem contornar regras de Content Security Policy (CSP) se nao configuradas corretamente. Ao aceitar data URIs gerados por usuarios, sempre valide o tipo MIME.